웹사이트 현대화를 위한 28가지 최첨단 CSS3 효과

CSS로 할 수 있는 일은 많습니다. 예쁜 효과 만들기, 모델 만들기, 다양한 모양 만들기 등. 요즘 완벽한 CSS를 애플리케이션에 적용하는 건 어렵지 않습니다. 수천 가지 효과와 튜토리얼이 인터넷에 무료로 공개되어 있습니다. 하지만 적절한 이상적 효과 조합을 고르는 건 정말 어려운 일이고, 대부분 약간 구식이거나 올드해 보입니다. 웹사이트에 훌륭한 사용자 경험과 함께 모던한 룩을 줄 놀라운 CSS3 효과 28가지를 모았습니다. 코드를 자유롭게 가지고 놀며 멋진 결과를 만들어 보세요.

28. 3D 텍스트

멋진 폰트와 놀라운 그림자 효과로 헤딩 텍스트에 3D 룩을 주세요.

27. 플랫 아이콘

알리레자 아타리(Alireza Attari)가 디자인한 순수 CSS 아이콘엑스 플랫 아이콘 세트(4개 아이콘).

26. 컬러 스펙트럼

박스 섀도우로 색상을 섞으면 나오는 결과입니다. 컬러 스펙트럼은 3색 간의 전이입니다.

25. 메트로 UI

윈도우 8 디자인에서 영감을 받은 메트로 UI, 완전히 CSS3로 제작되었습니다. 아이콘은 폰트어썸에서 추출했습니다.

24. 엘라스틱 스트로크

아름다운 색상 구성과 CSS 및 SVG로 만든 효과가 있는 텍스트의 엘라스틱 스트로크입니다.

참고: 영감을 위한 50개 이상의 아름다운 타이포그래피 예시

23. 레이어드 셰이프

스나사니(Snhasani)가 디자인한 아름다운 색상의 레이어드 셰이프(완전히 CSS로 작성).

22. 스파이럴 CSS

로딩 아이콘으로 사용할 수 있는 구름 같은 스파이럴 CSS 애니메이션.

21. 텍스트 애니메이션

요안(Yoann)이 텍스트 애니메이션으로 만든 놀라운 티커 효과. 두 번째 단어의 토글 효과가 꽤 멋집니다.

20. 플랫 롱 섀도

페이드 변수, 롱 섀도, 각도 변수가 담긴 궁극의 섀도우 믹스인입니다.

19. CSS 크리처

HTML과 CSS만으로 완전히 만들어진 아름다운 인터랙티브 아이콘들.

18. 3D 플립 버튼

자바스크립트도 이미지도 사용하지 않는 심플한 CSS3 3D 플립 버튼.

17. 그림자로 텍스트 변형

lettering.js를 사용한 고급 타이포그래피 기법으로 디자인된 CSS 텍스트 섀도우.

16. CSS 레인보우

심플한 호버 효과가 있는 풀 서클 레인보우.

15. 컬러풀 글리치 404

CSS와 약간의 자바스크립트로 만든 놀라운 글리치(진동) 효과.

참고: 창의적이고 재미있는 404 에러 페이지 100+

14. UI 피드백

버튼에 피드백을 주는 아이디어 모음. 프론트엔드 UI에 더 많은 역동성을 주는 영감용입니다.

13. 가로 아코디언

순수 CSS로 만든 가로 아코디언. 이미지 대신 요소를 포함하며 소셜 네트워킹 아이콘용 제네리콘 폰트를 사용합니다.

12. 원 착시

하이메 카바예로(Jaime Caballero)가 디자인한 투시 모션이 있는 원 착시. 페이지 로딩 바/아이콘으로 사용 가능.

11. 초 카운터

'곧 출시' 템플릿에 완벽한 우아한 카운터.

참고: 아름다운 공사중/출시예정 템플릿 40+

10. CSS 텍스트-FX

텍스트에 희미한 빛을 더해 얼룩덜룩한 플래시를 주는 효과입니다.

9. CSS 메뉴

CSS3 애니메이션과 트랜지션이 있는 모던 모바일 메뉴.

8. 예산 슬라이더

에릭 다이너(Erik Deiner)에서 영감을 받은 심플한 CSS + 제이쿼리 3D 디자인 슬라이더.

7. 애니메이션 텍스트 섀도우

-webkit-background-clip: text와 linear-gradient를 사용해 스트라이프 텍스트 섀도우를 시뮬레이션하는 애니메이션 텍스트 섀도우 패턴.

6. CSS 3D 캡션 도미노 이미지

더 나은 시맨틱 마크업, 더 적은 가상 요소, 더 적은 CSS로 반응형 3D 호버 효과.

5. 라디오 클릭 스루

라디오 버튼을 사용한 심플 이미지 슬라이더, 완전히 CSS로 작성.

4. 그라데이션 고스트 버튼

보더 이미지와 박스 섀도우를 활용해 디자인된 그라데이션 고스트 버튼과 텍스트.

3. 스퀴시 토글 버튼

저스틴 윈들(Justin Windle)이 디자인한 말랑말랑한 고무 버튼 시뮬레이션.

참고: 웹 디자이너를 위한 신선한 리소스

2. 심플 스택 효과

원근감과 3D 트랜스폼을 사용해 심플 스택 효과를 만드는 방법을 보여주는 토글 효과 세트.

1. 스핀킷 (SpinKit)

스핀킷(로딩 인디케이터 모음)은 CSS 애니메이션을 사용해 부드럽고 커스터마이징 가능한 애니메이션을 만듭니다.

다음 읽기: 웹사이트를 더 좋게 만드는 26가지 모던 제이쿼리 플러그인