CSS Reference 썸네일형 리스트형 CSS Reference (2006) Image (170) Hover Effect (62) Image Effect (49) Background (59) Slider (131) Image Slider (131) Mouse (110) Mouse Effect (110) Animation (339) CSS3 (54) Loading (80) Animation (168) SVG (17) GSAP (15) INTRO (5) Particles (184) Particles (74) Canvas (57) Three.js (53) Parallax (100) Scroll (100) Button (287) Button Input (38) Button Search (13) Button SNS (19) Button (217) Menu (159) Accordian Menu (11) Tab Menu (8) Hamberger Menu (15) Side Menu (20) Mobile Menu (11) Overlay Menu (20) Menu (74) Text (270) Text (261) Font (9) UI (132) Layout UI (29) Dashboard UI (12) Intro UI (16) Mobile UI (17) Card UI (16) Login UI (5) Code UI (12) Table UI (1) Modal UI (16) ETC UI (4) Form UI (4) Media (33) Audio (16) Video (2) Clock (15) ETC (74) Etc (22) Game (35) Study (10) Color (7) Youtube (2) SVG Tutorial (1) Javascript (1) Collect (4) Webs (4) 현재까지 와주신 분 오늘 오신 분 어제 오신 분 삼각형 무늬의 파란색 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 삼각형 무늬의 파란색 백그라운드 패턴입니다. CODE Background Pattern See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 백그라운드 패턴입니다. CODE 하트의 빨간색 백그라운드 패턴 배경 See the Pen Background-pattern by Webstoryboy (@webstoryboy) on CodePen. 하트의 빨간색 백그라운드 패턴 배경 Code 파란색 리피트 백그라운드 패턴 배경 See the Pen Repeating-linear-gradient background by Webstoryboy (@webstoryboy) on CodePen. 파란색 리피트 백그라운드 패턴 배경입니다. CODE 영화의 타이틀 모션 텍스트 애니메이션 See the Pen FlyIn Movie Title by Vuild (@vuild) on CodePen. 영화의 타이틀 모션 텍스트 애니메이션 효과입니다. transform의 scale과 opacity를 이용한 효과입니다. CODE 각 색션의 컨텐츠가 변경외는 이미지 슬라이드 See the Pen React Product Slides by Mike Quinn (@mprquinn) on CodePen. 각 색션의 컨텐츠가 변경외는 이미지 슬라이드입니다. CODE 마우스 오버하면 3D로 오버하는 플립 효과 See the Pen 3d Card Flip by Mike Quinn (@mprquinn) on CodePen. 마우스 오버하면 3D로 오버하는 플립 효과입니다. rotateY 효과를 이용하면 됩니다. CODE input을 이용한 범위 설정하기 디자인 소스 See the Pen [BROKEN] prettify ` 패스워드의 조건을 확인해주는 소스 See the Pen Vue Password Strength by Dronca Raul (@rauldronca) on CodePen. 패스워드의 조건을 확인해주는 소스입니다. 특수기호, 특수 문자, 대문자 등을 확인해 주는 예제입니다. CODE 심플한 로딩 애니메이션 소스 두가지 See the Pen Two Minimal Loaders by Dronca Raul (@rauldronca) on CodePen. 심플한 로딩 애니메이션 소스 두가지입니다. CODE CSS를 이용한 큐브 박스 회전하기 See the Pen Transparent Rotating Cube using CSS by Dronca Raul (@rauldronca) on CodePen. CSS를 이용한 큐브 박스 회전하기 애니메이션입니다. CODE 웨이브치는 뮤직 플레이어 See the Pen Anomaly by Dronca Raul (@rauldronca) on CodePen. 웨이브치는 뮤직 플레이어입니다. 제이쿼리를 통해 플레이와 정지를 컨트롤 하고 웨이브는 transform을 통해 애니메이션을 주는 예제입니다. CODE 캔버스를 이용한 닷 애니메이션 효과 See the Pen Canvas #2 — Interactivity by Dronca Raul (@rauldronca) on CodePen. 캔버스를 이용한 파티클립니다. 마우스 오버하면 원을 크게 해주는 효과네요! CODE 마우스 오버하면 라인이 움직이는 애니메이션 버튼 See the Pen Text Hover Animation by me-vaisakhr (@me-vaisakhr) on CodePen. 마우스 오버하면 scaleX를 통해 애니메이션이 되는 버튼입니다. CODE 레이어 느낌이 나는 버튼 오버 효과 See the Pen Layered Button by Dronca Raul (@rauldronca) on CodePen. 레이어 느낌이 나는 버튼 오버 효과입니다. CODE 마우스 오버하면 3D 효과를 주는 버튼 See the Pen 3D Buttons by Dronca Raul (@rauldronca) on CodePen. 마우스 오버하면 3D 효과를 주는 버튼입니다. rotateX를 이용하면 간단하게 만들 수 있는 오버 효과 버튼입니다. CODE 클릭하면 화면 전체를 감싸는 오버레이 메뉴 See the Pen Overlay Menu by Dronca Raul (@rauldronca) on CodePen. 클릭하면 화면 전체를 감싸는 오버레이 메뉴 CODE VIEW 회전하는 입체형 큐브 애니메이션 See the Pen Rotating Cube by Dronca Raul (@rauldronca) on CodePen. 회전하는 입체형 큐브 애니메이션입니다. 먼저 육각형의 DIV박스를 만들고 각 박스 안에 9개 박스를 만들어서 표현한 입체형 큐브입니다. 실제로 해보면 별로 어렵지 않은 소스입니다. CODE CSS를 이용한 입체 폴리건 만들기 See the Pen Transparent Rotating Pyramid by Dronca Raul (@rauldronca) on CodePen. preserve-3d를 이용한 입체 형태의 로테이션입니다. 생각보다 어렵지 않습니다. CODE 클릭하면 나타나는 레이어 팝업 디자인 See the Pen Flat Modal Window by Dronca Raul (@rauldronca) on CodePen. 클릭하면 레이어 팝업과 배경을 뿌옇게 해주는 소스입니다. 깔끔한 레이어 팝업입니다. SITE 마우스 방향에 따라 움직이는 삼각형 객체 See the Pen ▲ by Dronca Raul (@rauldronca) on CodePen. 마우스의 좌표값과 그에 따른 위치 값을 구하여 만드는 마우스 스크립트입니다. 매우 유용한 소스네요. SITE CSS Keyframes을 이용한 간단한 애니메이션 See the Pen 🔼 by Dronca Raul (@rauldronca) on CodePen. CSS Keyframes을 이용한 간단한 애니메이션입니다. 배경색은 mix-blend-mode를 이용하여 표현했네요~ SITE SVG를 이용한 물결 채우기 로더 See the Pen Water Fill Loader by Dronca Raul (@rauldronca) on CodePen. SVG 좌표를 이용한 물결 채우리 로딩 소스입니다. SITE SASS를 이용한 CSS 파티클 애니메이션 See the Pen CSS Particles — Using sass random() function by Dronca Raul (@rauldronca) on CodePen. SASS의 for문을 이용해서 원을 400개를 뽑아내는 CSS 파티클입니다. SASS를 이용해서 편하게 만들 수 있는 예제입니다. SITE 마우스의 움직임에 따라 커지는 원들 See the Pen Mouse Interactivity 🖱 by Dronca Raul (@rauldronca) on CodePen. 마우스의 움직임 좌표를 구하여 스케일과 for문을 이용한 인터렉티브한 애니메이션 효과입니다. 자바스크립의 기본 객체만 알면 쉽게 구현 할 수 있는 예제입니다. SITE 마우스를 쫒아 다니는 원과 반전 효과 See the Pen Inter UI — Interactivity by Dronca Raul (@rauldronca) on CodePen. 마우스를 쫒아다니는 원과 글씨와 원의 마스크 효과를 통해 표현한 인터렉티브한 UI 입니다. 이런 스타일의 사이트를 요즘 많이 볼 수 있는 있는 예제입니다. SITE Canvas를 이용한 눈 오는 효과 See the Pen Canvas Snow ❄️ by Dronca Raul (@rauldronca) on CodePen. Canvas를 이용한 눈 오는 효과 마우스의 방향에 따라 움직이는 버튼 오버 효과 See the Pen Hover Effect using CSS Variables by Dronca Raul (@rauldronca) on CodePen. 마우스를 오버하면 마우스의 위치 값을 알아내어 마우스 오버 효과를 주는 예제입니다. SITE 라디오 버튼을 이용한 애니메이션 See the Pen Radio Buttons Interaction ✨ by Dronca Raul (@rauldronca) on CodePen. 라디오 버튼을 이용한 애니메이션입니다. Input을 선택하면 트랜스폼을 이용해서 깔금하게 만들었네요. VIEW Input을 이용한 폰트 사이즈 조절하기 See the Pen Increase Font Size with CSS Variables by Dronca Raul (@rauldronca) on CodePen. 폰트 사이트를 조절하는 예제입니다. input 태그를 통해 폰트 사이즈를 제이쿼리로 컨트롤 하는 간단한 예제입니다. View 이전 1 ··· 45 46 47 48 49 50 51 ··· 67 다음