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

nojsmini

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

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

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

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

Мона Лиза

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

See the Pen Mona Lisa with pure CSS by Jay Salvat (@jaysalvat) on CodePen.

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

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

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

iPhone 6

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

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@fbrz) on CodePen.

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

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

See the Pen Star Wars opening crawl from 1977 by Tim Pietrusky (@TimPietrusky) on CodePen.

Перевод статьи «Stretching the limits of CSS 3: Amazing creations in pure CSS»Иван Бирюков, страж правописания