Дизайн сайта, его функциональность – не только графика, фотографии, удобное расположение и сочетание текстовых блоков с изображениями. Это еще и анимации, это большая работа «за сценой», которая невидима простому пользователю. Он о ней даже не догадывается частенько. Перед его взором открываются разные по красоте и стилю страницы в браузере, наполненные той или иной информацией. Иногда он видит интерактивные проекты, иногда смотрит на анимацию загрузки. Но, так или иначе, для него это все выглядит обычным и простым, информативным.
Но какую при этом проделывают работу верстальщики и дизайнеры, простые обыватели задумываются редко. А ведь как приятно всем нам наблюдать за небольшими спецэффектами или думать: «Ух, а тут переключатели совсем другие, необычные», или смотреть на эффекты параллакса и прочее, и прочее. Сейчас с помощью одного только CSS можно сделать многое и работать это будет во всех известных и массовых браузерах.
Некоторые разработчики стараются не просто создавать что-то, а придумывать нечто новое или попросту нечто красивое и тем самым подталкивать развитие и появление новых трендов, направлений, популяризировать имеющиеся элементы. И хотя такие эксперименты не всегда полезны на проектных площадках, они невероятно вдохновляющие и образовательные.
Мы решили отобрать несколько самых необычных и красивых проектов CSS, отлично демонстрирующих великую силу и неограниченные возможности самого CSS. Так как все примеры можно найти на Codepen, то полный текст кода и анимацию примера вы сможете найти по ссылкам.
Градиентная загрузка
Часто на том или ином сайте создают анимационные загрузки, показывающие в процентах оставшееся время до открытия страницы. Но MaxStalker решил использовать градиент и дополнительно изменить размер элементов, тем самым создавая вариант бесконечной загрузки.
Многие узнают в ней анимацию из Facebook (очень мимолетную), но там она уменьшенная по размеру. Кроме того, в большинстве своем на сайтах используют аналогичные анимации в варианте GIF, так как если некоторые параметры CSS и могут быть несовместимы со старыми версиями браузеров, то у изображений таких проблем нет.
Но данный пример создан на CSS3 и доказывает, что его можно вполне применять в любом месте. Если немного пофантазировать, то можно изменить и размер по высоте, и цветность, и градиентность, и даже скорость.
Переключатель
Внешне переключатель выглядит весьма просто и скромно. Вы переключаете его на день или ночь в формате AM/PM и видите соответствующее графическое изменение (солнышко или звездочки). Казалось бы, ничего особенного, что могло бы привлечь к нему внимание, но во время самого переключения происходит едва уловимая анимация смены Солнца на Луну, да и создан он на чистом, 100% CSS. То есть, нет никаких картиночек с Луной, звездами, лучами Солнца и прочее. Все полностью отрисовано с помощью кодировки.
Как это можно использовать на сайтах или в приложениях? По-разному. Например, можно в оформлении Личного кабинета или просто как «фишку» добавить. Если есть хотя бы маломальские навыки работы с CSS, то можно и тем более – заменить день и ночь на другие события.
Так или иначе, но данный пример наглядно показывает, на что способен CSS.
Шлейф
Если вы читаете наш блог хотя бы полгода, то могли заметить, как много примеров веб-дизайна мы приводили, где курсор мышки и действия на страницах сайта отслеживались (francoisrisoud, lakewood, wowtapes). Сам курсор принимал обычно вид кружочков, которыми можно и рисовать, и управлять контентом, и прочее, и прочее. Традиционно такое отслеживание создается при помощь JavaScript, который обрабатывает координаты курсора X/Y на странице.
Технически JavaScript все таки нужен, чтобы собрать эти данные и обработать их, превратив во что-то полезное. Но данный пример на CSS показывает наглядно, что такое отслеживание курсора мышки можно сделать и без JavaScript. При этом отслеживаться будет любое движение курсора. Более того, за курсором будет летать еще маленький кружочек.
Не факт, что такое отслеживание может нравиться самим пользователям или быть для них удобным, но для некоторых типов сайтов это весьма неплохой вариант «изюминки».
Аттракционы
В интернете достаточно много различных векторных иллюстраций и иконок. Немалое их количество используется в веб-дизайне или дизайне мобильных приложений. Но что вы скажите насчет того, чтобы самим создать векторные изображения в SVG и оживить их с помощью CSS.
Именно это и сделал Vladimir Gashenko в своем экспериментальном проекте «Парк аттракционов». Особенность его в том, что работает он только в тех версиях браузеров, что поддерживают формат SVG. И в них он выглядит безупречно, а каждый элемент имеет реальный масштаб и размер по отношению к другим элементам сцены. Кроме того, все SVG-изображения прорисованы с высокой детализированностью, что, разумеется, восхищает.
Отдельно стоит обратить внимание на анимации облаков, воздушного шара, колеса обозрения, даже маленькие шарики, и те скромно двигаются, хотя изначально взгляд на них и не падает. Но вот каруселька с лошадками, увы, статична…
Да, скромно, просто и со вкусом, но на CSS ничего подобного еще не было. И только через несколько лет мы сможем найти аналогичные работы в интернете, которые будут содержать в себе только код и никаких заранее созданных в Photoshop/Illustrator изображений.
Лента Мёбиуса
О таком объекте, как искривлённая лента с перевернутыми концами знают многие. Кто-то очень быстро вспоминает название, а кто-то просто сразу понимает, о чем речь. Создать такую ленту физически из бумаги несложно, даже просто. Нарисовать в 3D на компьютере тоже не составит труда.
Если использовать концепцию ленты Мёбиуса для проектирования повторяющейся анимации, то создать её в чистом CSS довольно сложно. Хотя и возможно. При этом захочется добавить объемные элементы, градиенты, чтобы было понятно, как и где она перекручивается. Потом еще насытить какими-нибудь интересными и малозаметными возможностями.
Пример Ленты Мёбиуса на CodePen впечатляет и выглядит безупречно. Но что самое интересное, в коде CSS используется не более 90 строк. В HTML же всего 6 строк для создания общей сцены.
Вряд ли такая анимация найдет себе применение на каких-либо сайтах, хотя из неё можно сделать сногсшибательную загрузку, если, например, в центре добавить цифровой счётчик процентов. Зато этот пример наглядно демонстрирует всю мощь CSS даже для такого сложного объекта.
Строительство
Небольшое приложение, в котором пользователь может построить собственную карту с горами, псевдолесами и постройками, может быть очень занятным еще на стадии создания. Обычно такие приложения создаются на JavaScript, так как существует динамика в действиях (поднять/опустить предмет, повернуть, окрасить), размещение на плоскости, 3D-ротация.
Пользователь Vincent Durand решил все это создать только при помощи 100% CSS. Он добавил стрелки для вращения и подъема/опускания объектов, возможность изменить цвет и прочее. И все это делается с помощью одного клика по элементам интерфейса. А вся сцена полностью реализована с использованием кубов разного размера. Даже псевдо-вода – тоже куб, у которая видима одна грань и окрашена в голубой цвет.
Сумасшедшее применение CSS, но оно работает и вдохновляет, дает идее развитие.
Иконки
Выше мы рассказали о том, как создавалась анимационная сцена «Парк аттракционов». Но если там изображения были созданы в SVG-формате, то теперь посмотрим на то, как их создают только в CSS. Так Peter Schmiz отрисовал с помощью кода все иконки iOS 7, используя только HTML и CSS.
Ни один из значков не использует ни одного крохотного изображения SVG. При этом изначально каждый элемент значка строго прописан и закреплён в HTML с помощью span / div. Уже затем разработчик описывал его в CSS. Но что необычно – они выглядят очень точными, совпадающими с оригинальными на 100%.
Красивые, яркие, точные. В наборе их 22 шт. И да, обратите внимание на детали в таких значках, как Погода или Карта. И ведь несложно такое создать, в принципе. Всего-то нужно усидчивость, терпение и много свободного времени - и все, создать что-то в CSS – несложно.
Slack
Те, кто однажды открывал сайт корпоративного мессенджера Slack, возможно запускал его, наверняка обращали внимание на его анимированную иконку загрузки. Она чем-то похожа на сочетание цветов Google. Разноцветные полосочки образуют решетку, затем переворачиваются, исчезают, снова появляются, создают решетку и так до бесконечности. Создать такое на CSS3 – впечатляет. Но наш пример воссоздает грузчик Slack только с одним элементом на странице. И это впечатляет еще больше.
Код CSS насчитывает не более 100 строк, но при этом описывает цвета логотипа, эффекты анимации, расположение по координатам. Использовать такой загрузчик, где бы то ни было на сайтах или в приложениях, не относящихся напрямую к Slack, невозможно. Авторские права никто еще не отменял. Но зато можно разобраться и попробовать проработать нечто подобное и простое.
Солнечная система
В завершении еще один пример использования CSS, который поражает титаническим трудом разработчика, своей точностью в создании, красотой. Возможно, от него будет мало толку на каком-либо сайте, но зато посмотреть, изучить, насладиться возможностями и представить всю мощь и силу CSS – можно.
Динамический дизайн Солнечной системы создан Malik Dellidj на чистом CSS, без каких-либо изображений. Каждая планета отрисована на CSS, и даже скорости движения каждой из них (разные скорости) тоже обсчитываются в нем же. Что более всего поражает, но этот проект призван стать точной моделью Солнечной системы и у него даже фон реалистичный есть для загрузки.
Сложно представить, сколько времени ушло у разработчика на создание этого шедевра и тем более на обсчет скоростей анимации. Но зато, если есть воля, то и способ найдется. И да, 1 год = 30 секундам реального времени.
Завершение
В интернете можно найти и другие интересные варианты использования CSS. Но мы отобрали наиболее яркие, по нашему мнению, и впечатляющие примеры. Тем более что все они созданы на чистом CSS, без использования дополнительных скриптов, изображений, возможностей.
Да, труд и время затрачены в невообразимом количестве. Но зато существует и простор для использования на сайтах или мобильных приложениях. А если что-то представляется возможным использовать – всегда есть шанс изучить код и разобраться, как это было вообще создано и по аналогии уже можно самостоятельно что-то отрисовывать.
Таким образом, веб-разработка, верстка, программирование для веб – не такие и унылые штуки. Все дело в идеях и стремлениях. Кто-то любит творить в Photoshop’е, а кому-то нравится рисовать числами с помощью, казалось бы, непонятных аббревиатур и слов.