5 занимательных проектов, реализованных на CSS без использования JavaScript

Силу CSS легко недооценить. Для тех, кто использовал CSS2, это лишь инструмент для настройки стилей. C приходом CSS3 нам открылось море возможностей: от стилизации элементов до создания анимаций, ранее возможных только с использованием Adobe Flash или JS. В этой статье приведены примеры, которые наглядно показывают все современные фичи CSS.

Трёхмерная Солнечная система

Эта демка занимает 1500 строк CSS-кода и использует base64-изображения. Используется совсем немного JavaScript, но что такое 42 строки?

Мона Лиза

Автор описывает свою Мону Лизу как “бессмысленную, но забавную”. Вся картина была воссоздана с использованием очень, очень большого количества элементов box-shadow. Каждый элемент имеет небольшой сдвиг и размытие, что придаёт изображению приятный вид. Интересная альтернатива base64.

Прогресс-бар

Этот трёхмерный прогресс-бар позволяет вам использовать CSS-классы в HTML для задания степени заполненности шкалы. Кроме того, можно использовать разные цвета. Если вы хотите анимировать заполнение шкалы, достаточно изменить класс и применить CSS-переход.

iPhone 6

“Лучшее, что есть в iPhone 6 — это его округлая форма, ведь теперь его можно нарисовать на CSS”, —  говорит автор этой демки. Живые обои смартфона также анимированы. Весь код занимает 500 строк, но для реализации потребовалось приличное количество HTML-элементов <div>. Никакие встроенные изображения не используются.

Вступление из Звёздных войн

“Я люблю Star Wars, но я не смог найти веб-версию вступления фильма 1977 года, поэтому мне пришлось сделать её самому.” Других объяснений и не нужно — просто запускайте демку! Музыка, конечно, включена в HTML в виде файлов .ogg.