본문 바로가기

web's

#css #animation #canvas #svg #button #scroll

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를 이용한 반응형 북 레이아웃
관리자 페이지 대시보드 UI See the Pen Task Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen. 관리자 페이지 대시보드 UI
심풀한 뮤직 앱 애니메이션 디자인 See the Pen Simple Music App UI Design 🎵▶️ by Aysenur Turk (@TurkAysenur) on CodePen. 심풀한 뮤직 앱 애니메이션 디자인
그리드를 이용한 애니메이션 See the Pen Animated CSS Grid Firefoxes by Michelle Barker (@michellebarker) on CodePen. 그리드를 이용한 애니메이션
이런 스타일은 그리드를 어떻게 할까? See the Pen CSS Grid: Smashing Mag's Contents Page by Olivia Ng (@oliviale) on CodePen. 이런 스타일은 그리드를 어떻게 할까?
매거진 스타일의 그리드 페이지 See the Pen CSS Grid: Magazine Layouts by Olivia Ng (@oliviale) on CodePen. 매거진 스타일의 그리드 페이지
코드를 깔끔하게 보여주는 이미지 See the Pen direction-aware shadow with ES6 by Mert Cukuren (@knyttneve) on CodePen. 코딩을 편하게 보여주는 이미지
로그인과 회원가입을 할 수 있는 창 See the Pen Slide Form by Arturo Cabrera (@Pixmy) on CodePen. 로그인과 회원가입을 할 수 있는 창
윈도우 팝업처럼 나오는 모달 창 See the Pen Front End Day 40 - Modal popup with no javascript by sean_codes (@sean_codes) on CodePen. 윈도우 팝업처럼 나오는 모달 창
정말 실사 같은 사실적인 모바일 이미지 See the Pen Photorealistic pure CSS mobile phone by Grzegorz Witczak (@Wujek_Greg) on CodePen. 정말 실사 같은 사실적인 모바일 이미지
카드 스타일에서 상세페이지 보여주는 애니메이션 See the Pen (⌐🔴_🔵) Turnable Tables, Part 2 (🔴_🔵¬) | 3D CSS Record Player App | @keyframers 1.18.1 by @keyframers (@keyframers) on CodePen. 카드 스타일에서 상세페이지 보여주는 애니메이션
로테이션되는 모바일 카드 스타일 애니메이션 See the Pen 🌀Revealing Rotations | 3D Card Spin Transition | @keyframers 1.25.0 by @keyframers (@keyframers) on CodePen. 로테이션되는 모바일 카드 스타일 애니메이션
밑으로 살짝 나오는 모달 스타일의 애니메이션 See the Pen Modal Mitosis 🦠 | CSS-Only Gooey Content Toggle | @keyframers 2.5.0 by @keyframers (@keyframers) on CodePen. 밑으로 살짝 나오는 모달 스타일의 애니메이션
클릭하면 원이 커지는 모달 애니메이션 See the Pen Material Design Modal in Pure CSS by Johan Fagerbeg (@birjolaxew) on CodePen. 클릭하면 원이 커지는 모달 애니메이션
CSS 그리드를 이용한 쇼핑몰 전시 이미지 See the Pen Isometric eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen. CSS 그리드를 이용한 쇼핑몰 전시 이미지
로그인, 회원가입 UI 폼 애니메이션 소스 See the Pen Login & Signup Form by Emil (@emilcarlsson) on CodePen. 로그인, 회원가입 UI 폼 애니메이션 소스
클릭하면 흔들리는 모달창 레이어 팝업 애니메이션 See the Pen Daily UI #011 Flash Message by Emil (@emilcarlsson) on CodePen. 클릭하면 흔들리는 모달창 레이어 팝업 애니메이션
심플한 대화식 레이어 팝업 모달 애니메이션 See the Pen Native dialog element by Rune Sejer Hoffmann (@RSH87) on CodePen. 심플한 대화식 레이어 팝업 모달 애니메이션
빈티지 느낌이 나는 모달 스타일 디자인 소스 See the Pen rémi's pop-up by Thibaud Goiffon (@Gthibaud) on CodePen. 빈티지 느낌이 나는 모달 스타일 디자인 소스입니다.
클릭하면 아래에서 위로 올라오는 팝업 창 See the Pen Full Width/Height Modal by Olivia Ng (@oliviale) on CodePen. 클릭하면 아래에서 위로 올라오는 팝업 창입니다.
클릭하면 나타나는 레이어 팝업 디자인 See the Pen Flat Modal Window by Dronca Raul (@rauldronca) on CodePen. 클릭하면 레이어 팝업과 배경을 뿌옇게 해주는 소스입니다. 깔끔한 레이어 팝업입니다. SITE

티스토리툴바