본문 바로가기

CSS Reference

삼각형 무늬의 파란색 백그라운드 패턴 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