CSS3 и изображения

На рисунке 1.12 показано, как выглядит законченная CSS3 кнопка в браузере Chrome версии 16, который мы использовали чуть ранее.

Думаю, вы согласитесь с тем, что любые отличия варианта на основе изображений от версии, полностью базирующейся на CSS, несущественны. Создание визуальных элементов с применением CSS3 позволяет сделать наш адаптивный веб-дизайн намного более легковесным, чем если бы мы создавали его с использованием изображений. Более того, градиенты изображений хорошо поддерживаются современными мобильными браузерами, при этом единственный недостаток заключается в отсутствии поддержки градиентов со стороны таких браузеров, как Internet Explorer версии 9 и ниже.

Что еще может предложить CSS3? До сих пор мы рассматривали весьма прозаические примеры того, как CSS3 может помочь при решении повседневных задач, связанных с разработкой. Однако теперь посмотрим, какие по-настоящему удивительные вещи позволяет делать CSS3. Запустите браузер Safari или Chrome и откройте страницу по адресу http://www.panic.com/blog/. К сожалению, этот веб-дизайн не является адаптивным, но для нас интерес представляют «приколотые булавками» заметки в верхней части страницы (рисунок 1.13). Наведите указатель мыши на любую из них и посмотрите, как изображение при этом слегка двигается вправо-влево, а его нижняя часть как бы приподнимается. Здорово, не так ли? В прошлом подобного расширенного эффекта можно было добиться с использованием требевательного к вычислительным ресурсам Flash или JavaScript. Однако в данном случае эффект был обеспечен исключительно благодаря CSS3 транформациям. Применение CSS3 вместо JavaScript или Flash позволяет сделать анимацию более легковесной, удобной в сопровождении и, следовательно, идеально подходящей для адаптивного веб-дизайна. Пользователи браузеров, поддерживающих версию CSS3, смогут наблюдать такой эффект, в то время как остальные вместо эффекта увидят лишь статические изображения.

Страница с анимированными заметками

Еще один замечательный пример CSS3 трансформаций можно увидеть по адресу http://demo. marcofolio. net/3d_animation_css3/. Опять-таки веб-дизайн данной страницы не является адаптивным, однако нас интересуют CSS-трюки, которые на ней задействованы. Взгляните на страницу сначала в Internet Explorer 9 или Firefox (браузер Firefox версии 9.0 не поддерживает соответствующий CSS3-модуль). А затем посмотрите на нее в Safari версии 5 и выше или Chrome версии 16 и выше. Приведенный На рисунке 1.14 скриншот не позволяет в полной мере оценить анимацию, поэтому, если вы сами не взглянете на эту страницу, вам придется поверить мне на слово — демонстрируемые там эффекты хороши.

3D-анимация с использованием CSS3

Такие отлично выглядящие эффекты работают не только в браузерах Safari и Chrome на основе WebKit. Веб-дизайн страницы, располагающейся по адресу http://designlovr.com/examples/dynamic_stack_of_index_cards/, будет работать и в Firefox. Это еще один пример, который базируется исключительно на CSS3 (рисунок 1.15).

Создание динамического стека карточек с помощью CSS3

Безусловно, подобные эффекты не являются неотъемлемой частью любого из описанных сайтов. Это только прекрасная демонстрация прогрессивного улучшения (progressive enhancement). Пользователи браузеров, не поддерживающих эти эффекты, увидят лишь статические изображения. Однако если у пользователя установлен современный браузер, он сможет насладиться расширенными визуальными эффектами. Но надо отметить, что поддержка браузерами 3D-трансформаций CSS3 довольно ограниченна. Например, широко поддерживаются такие CSS3 правила, что позволяют добавлять тени к тексту, градиенты, границы со скругленными углами, RGBA-цвет и разнообразные фоновые изображения. Они обеспечивают гибкое решение распространенных проблем, связанных с дизайном, которые долгие годы мучили и озадачивали нас.