Знание СSS нужно, чтобы создавать удобные интерфейсы и оформлять страницы сайта: стилизовать текст, позиционировать блоки, добавлять интерактивные элементы. А ещё c помощью CSS можно создавать крутые картинки, логотипы и анимацию. Собрали пять нестандартных примеров использования языка.

Логотипы браузеров

Нарисуйте свой логотип любимого браузера и добавьте анимацию, чтобы он стал интерактивным и живым. Вот как это можно сделать с помощью CSS.

See the Pen Browsers by Jordano Aragão (@jordanoaragao) on CodePen.

Лоадер

Бывает, что нужно подождать, пока информация с сервера загрузится на сайт. Ожидание можно скрасить анимацией.

See the Pen Pure CSS Truck Loader by 0×5e0×5e (@0×5e0×5e) on CodePen.

Бэтмен

Можно бесконечно спорить, какая вселенная лучше — Marvel или DC. А можно сделать вот такого анимированного Бэтмена.

See the Pen Batman Animation Draw. Pure CSS! by Paul (@Maseone) on CodePen.

Страница 404

Когда на сайте возникает ошибка, пользователь видит страницу с её кодом. Для хороших сайтов разработчики создают специальную страницу, стилизуя её. Такой вариант может помочь пользователю чуть меньше расстроиться из-за возникшей ошибки.

See the Pen Pure CSS 404 Error Page by Peiman (@pjthedj) on CodePen.

Ноутбук

Просто милый улыбающийся ноутбук для тех, кто хочет потренироваться работать с анимацией на CSS.

See the Pen Laptop Pure CSS — Day 37 #dailycssimages by FireMugen (@firemugen) on CodePen.

Использование знакомого инструмента для решения нестандартных задач поможет опытным разработчикам лучше запомнить редкие CSS-свойства и применять их для создания сложных интерфейсов. А новички смогут изучить новые свойства языка в игровой форме и улучшить навыки.

Познакомиться с анимацией поближе можно на интерактивном курсе «Динамические эффекты».

Начать