본문 바로가기

UI

네온 효과 코딩 UI See the Pen augmented-ui social media picture-of-code thing by Jane 💜 (@propjockey) on CodePen. 네온 효과 코딩 UI
배너가 변하는 그리드 애니메이션 UI See the Pen Animate Grid with FLIP by Paulina Hetman (@pehaa) on CodePen. 배너가 변하는 그리드 애니메이션 UI
비디오 관리자 페이지 UI See the Pen Video Sharing Platform UI by Aysenur Turk (@TurkAysenur) on CodePen. 비디오 관리자 페이지 UI
크롬 브라우저 탭 메뉴 UI See the Pen Chrome Tabs UI by morooka (@mo-ro) on CodePen. 크롬 브라우저 탭 메뉴 UI
인트로 텍스트 리빌 효과로 좋은 애니메이션 See the Pen CSS Masked Text Reveal by James Bosworth (@bosworthco) on CodePen. 인트로 텍스트 리빌 효과로 좋은 애니메이션
페이지 트랜지션 애니메이션 See the Pen Page Transition Animation | using GSAP by Sikriti Dakua (@dev_loop) on CodePen. 페이지 트랜지션 애니메이션
Unsplash를 이용한 이미지 갤러리 See the Pen Image Gallery | Unsplash API by Sikriti Dakua (@dev_loop) on CodePen. Unsplash를 이용한 이미지 갤러리
카드 유형의 input 스타일 See the Pen Checkbox card by Sławek Jaskulski (@fireblader) on CodePen. 카드 유형의 input 스타일
인트로로 쓰기 좋은 80년대풍 디자인 See the Pen '80s Inspired Pure CSS graphics by CurleyWebDev (@curley) on CodePen. 인트로로 쓰기 좋은 80년대풍 디자인
블로그 레이아웃 그리드 See the Pen Modern Blog Layout with CSS Grid by Aysenur Turk (@TurkAysenur) on CodePen. 블로그 레이아웃 그리드
랜덤으로 돌아다니는 사람들 See the Pen Crowd Simulator by Szenia Zadvornykh (@zadvorsky) on CodePen. 랜덤으로 돌아다니는 사람들
마우스 오버하면 내려오는 스파이더맨 See the Pen Hover animation - what's Spidy gotto say? by Shireen Taj (@TajShireen) on CodePen. 마우스 오버하면 내려오는 스파이더맨
그리드 레이아웃을 이용한 카드 유형 See the Pen F1 Team of the week Card (Honeycomb Grid) by Shireen Taj (@TajShireen) on CodePen. 그리드 레이아웃을 이용한 카드 유형
그리드 레이아웃을 이용한 사이트 See the Pen Responsive Grid Timeline | Dribble shot by Shireen Taj (@TajShireen) on CodePen. 그리드 레이아웃을 이용한 사이트
깔금한 느낌의 메인 UI 디자인 See the Pen Greetings From Santorini! by Jackie Zen (@jackiezen) on CodePen. 깔금한 느낌의 메인 UI 디자인
테이블 UI See the Pen Table UI with TailwindCSS & AlpineJS by Mithicher (@mithicher) on CodePen. 테이블 UI
Code 탭 디자인 UI See the Pen Tabs with AlpineJS and TailwindCSS by Mithicher (@mithicher) on CodePen. Code 탭 디자인 UI
카드 레이아웃 UI See the Pen Card Article UI by Mithicher (@mithicher) on CodePen. 카드 레이아웃 UI
카드 유형 레이아웃 UI See the Pen Article News Card by Andy Tran (@andytran) on CodePen. 카드 유형 레이아웃 UI
반응형이 지원되는 소셜 플랫폼 UI See the Pen Responsive Social Platform UI by Aysenur Turk (@TurkAysenur) on CodePen. 반응형이 지원되는 소셜 플랫폼 UI
비디오 플랫폼 UI 디자인 페이지 See the Pen Skateboard Video Platform by Aysenur Turk (@TurkAysenur) on CodePen. 비디오 플랫폼 UI 디자인 페이지
투명한 유리 효과의 메인 UI See the Pen Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur) on CodePen. 투명한 유리 효과의 메인 UI
React를 이용한 리퀴드 스와이프 효과 See the Pen Liquid Swipe by Yugam (@pizza3) on CodePen. React를 이용한 리퀴드 스와이프 효과
미래지향적?? 디자인 사이트?? See the Pen Slack / Discord Cyberpunk 2077 redesign w/ Preact by Hussard (@hussard) on CodePen. 미래지향적?? 디자인 사이트??
라인과 닷으로만 구성된 레이아웃 스타일 See the Pen Stylestage.dev - StageOS by Håvard Brynjulfsen (@havardob) on CodePen. 라인과 닷으로만 구성된 레이아웃 스타일
자동으로 채워지는 레이아웃 애니메이션 See the Pen Layout is overrated by Andy Barefoot (@andybarefoot) on CodePen. 마우스 방향에 따라 움직이는 글씨
그리드 레이아웃은 이런 구조에 딱! See the Pen CSS Grid: Newspaper Layout by Olivia Ng (@oliviale) on CodePen. 그리드 레이아웃은 이런 구조에 딱!
CSS로만 만든 모달 창(레이어 팝업) See the Pen Pure CSS Modal - #15 by Ivan Grozdic (@ig_design) on CodePen. CSS로만 만든 모달 창(레이어 팝업)
자동으로 맞추는 그리드 레이아웃 See the Pen Layout is overrated by Andy Barefoot (@andybarefoot) on CodePen. 자동으로 맞추는 그리드 레이아웃
Gird를 이용한 반응형 북 레이아웃 See the Pen Responsive CSS Grid - Books by Andy Barefoot (@andybarefoot) on CodePen. Gird를 이용한 반응형 북 레이아웃