28 передовных CSS3-эффектов для модернизации вашего сайта

С CSS можно делать многое: создавать красивые эффекты, модели, формы. Внедрить качественный CSS сейчас не сложно — тысячи бесплатных эффектов и туториалов в сети. Но подобрать идеальную комбинацию современных эффектов сложно — большинство выглядят устаревшими. Собрали крутые CSS3-эффекты, которые дадут сайту современный вид и отличный UX. Код открыт для экспериментов.

28. 3D-текст

Дайте заголовкам 3D-вид с крутыми шрифтами и тенями.

27. Плоские иконки

Чистый CSS набор Iconex Flat Icon Set (4 иконки), автор Alireza Attari.

26. Цветовой спектр

Результат смешивания цветов через box-shadow. Прогрессия среди 3 цветов.

25. Metro UI

В стиле Windows 8, полностью на CSS3. Иконки из FontAwesome.

24. Эластичный штрих

Эластичный обводка текста с красивой цветовой схемой, эффекты на CSS и SVG.

23. Многослойные фигуры

Красивые цветные слоистые фигуры (чистый CSS), автор Snhasani.

22. Спираль CSS

Облачная спиральная анимация — можно использовать как иконку загрузки.

21. Анимация текста

Yoann создал классный тикер-эффект с анимацией текста. Переключение второго слова выглядит круто.

20. Плоская длинная тень

Ультимитивный shadow-миксин с fade-переменными, длинными тенями и угловой переменной.

19. CSS-существа

Красивые интерактивные иконки полностью на HTML и CSS.

18. 3D Flip-кнопка

Простая 3D-кнопка с переворотом на чистом CSS3 — без JS и изображений.

17. Трансформация текста с тенью

CSS text-shadow с продвинутыми типографическими техниками через lettering.js.

16. CSS-радуга

Полноценная радуга с простым hover-эффектом.

15. Цветной глитч 404

Крутой глитч-эффект (с вибрацией) на CSS и немного JS.

14. UI Feedback

Набор идей для обратной связи кнопок. Вдохновение для оживления фронтенда.

13. Горизонтальный аккордеон

На чистом CSS. Элементы вместо изображений, шрифт Genericons для соц-иконок.

12. Иллюзия круга

Круг с движением Туси, автор Jaime Caballero. Можно использовать как индикатор загрузки.

11. Секундомер

Элегантный счётчик — идеально для шаблонов «coming soon».

10. CSS Text-FX

Создано добавлением приглушённого света к тексту — эффект мерцания.

9. CSS Меню

Современное мобильное меню с CSS3 анимациями и переходами.

8. Budget Slider

Простой CSS + jQuery слайдер в 3D-дизайне, вдохновлён Erik Deiner.

7. Анимированная тень текста

Паттерн animated text-shadow использует -webkit-background-clip: text и linear-gradient для имитации полосатой тени текста.

6. CSS 3D Captioned Domino Image

Адаптивный 3D hover-эффект с лучшей семантикой, меньше псевдоэлементов, меньше CSS.

5. Radio Click Through

Простой изображений-слайдер на радиокнопках, полностью на CSS.

4. Градиентные Ghost-кнопки

Кнопки и текст с градиентом через border-image и box-shadow.

3. Squishy Toggle Buttons

Имитация мягких резиновых кнопок, автор Justin Windle.

2. Простые стэк-эффекты

Набор toggle-эффектов: как создавать простые стэк-эффекты через perspective и 3D transform.

1. SpinKit

SpinKit (коллекция индикаторов загрузки) использует CSS-анимации для плавных кастомизируемых анимаций.

Читайте также: 26 современных jQuery-плагинов для улучшения сайта