5 занимательных проектов, реализованных на CSS без использования JavaScript
14К открытий14К показов
Силу 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.
14К открытий14К показов