Как CSS3 позволяет решать повседневные задачи, связанные с дизайном?

Взглянем на популярную задачу, с которой разработчики сталкиваются в большинстве проектов. Нужно создать скругленный угол для экранного элемента, скажем, для интерфейса с вкладками, или, например, для прямоугольного элемента вроде верхнего колонтитула. При использовании CSS 2.1 это можно сделать благодаря методике sliding doors («раздвижные двери») (http://www.alistapart.com/articles/ slidingdoors/), в результате чего одно фоновое изображение будет располагаться позади другого. HTML-код прост, как показано далее:

<a href="#"><span>Box Title</span></a>

Мы добавим фон со скругленными углами для элемента <a>, создав два изображения. Первое — headerLeft. png — будет 15 пикселов в ширину и 40 пикселов в высоту, а второе — headerRight. png — в этом примере всегда будет шире верхнего колонтитула (в данном случае 280 пикселов). Каждое из этих изображений будет половиной «раздвижных дверей». По мере увеличения одного элемента (текста в наших тегах <span>) фон будет заполнять соответствующее пространство, то есть в результате мы получим решение, которое обеспечит скругление углов и не потеряет актуальности со временем. Вот как будет выглядеть CSS-код в этом примере:

A {

Display: block; height: 40px; float: left; font-size: 1.2em; padding-right: 0.8em;

Background: url(images/headerRight. png) no-repeat scroll top right;

}

A span {

Background: url(images/headerLeft. png) no-repeat; display: block; line-height: 40px; padding-left: 0.8em;

}

Результат применения методики «раздвижных дверей»

Такой подход позволяет решить описанную ранее задачу, связанную с дизайном, однако требует дополнительной разметки (семантически у элемента <span> нет значения) и отправки двух дополнительных НТТР-запросов (для изображений) на сервер для создания итогового эффекта на экране. Теперь мы можем объединить два изображения в одно, чтобы создать спрайт, а затем использовать CSS-свойство background-position: для его сдвига. Однако, несмотря на то что такое решение снижает требования к скорости канала подключения пользователя, оно будет негибким. А что, если заказчик захочет, чтобы радиус скругления углов был меньше? Или пожелает применить другой цвет? Тогда нам придется заново переделывать наше изображение. Прискорбно, но до появления CSS3 дизайнеры и разработчики клиентских приложений сталкивались именно с таким положением дел. Дамы и господа, я видел будущее, и там главенствует CSS3! Пересмотрим наш HTML-код, сделав его таким:

На рисунке 1.11 видно, как итоговый результат будет выглядеть в Google Chrome (v16):

<a href="#">Box Title</a>

CSS-коду теперь можно придать следующий вид:

A {

Float: left; height: 40px; line-height: 40px; padding-left: 0.8em; padding-right: 0.8em; border-top-left-radius: 8px; border-top-right-radius: 8px; background-image: url(images/headerTiny. png); background-repeat: repeat-x;

}

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

Рисунок 1.12. Результат применения CSS3-кода

В этом примере два предыдущих изображения были заменены одним изображением шириной 1 пиксел, которое повторяется по оси X. Несмотря на то что изображение имеет ширину лишь 1 пиксел, оно составляет 40 пикселов в высоту и, надо надеяться, окажется больше по высоте, чем любое вложенное содержимое. При использовании того или иного изображения в качестве фона всегда нужно выбирать такое, которое будет иметь запас по высоте с расчетом на возможное переполнение содержимым, но это, к сожалению, приводит к тому, что приходится использовать крупные изображения. Кроме того, повышаются требования к скорости канала подключения пользователя.

Однако в данном случае, в отличие от решения, полностью основанного на изображениях, CSS3 за нас заботится о округлении углов благодаря border-radius и прочим соответствующим свойствам. Заказчик хочет, чтобы углы имели небольшой радиус скругления, например 12 пикселов? Нет проблем: просто измените значение свойства border-radius на 12px, и требуемый результат будет достигнут. Это CSS-свойство, обеспечивающее скругленные углы, представляет собой эффективный и гибкий инструмент и поддерживается браузерами Safari (версии 3 и выше), Firefox (версии 1 и выше), Opera (версии 10.5 и выше), Chrome (версии 3 и выше) и Internet Explorer 9. Компания Microsoft с таким энтузиазмом относится к поддержке этого свойства в Internet Explorer 9 (надеюсь, вы уловили здесь мой легкий сарказм), что даже создала интерактивную страницу, демонстрирующую различные эффекты, которых можно добиться с его помощью. Взглянуть на них вы сможете по следующему URL-адресу: http://ie. microsoft.com/testdrive/html5/ borderradius/default. html.

CSS3 идет еще дальше и избавляет нас от необходимости в изображениях, обеспечивающих градиентный фон, генерируя такой эффект непосредственно в браузере. Все это пока не очень хорошо поддерживается браузерами, однако благодаря, например, свойству linear-gradient (yellow, blue) любой элемент можно обеспечить фоном в виде градиента, генерируемого CSS3.

Градиенты можно задавать, указывая основные цвета, традиционные шестнадцатеричные значения (например, #BFBFBF) или один из цветовых режимов CSS3 (подробнее на эту тему мы поговорим в главе 5). Если вы хотите, чтобы пользователи

Устаревших браузеров вместо градиента видели однотонный фон (а не вообще ничего), то CSS код вроде того, что приведен чуть ниже, будет обеспечивать однородный цвет, если браузер не сможет обработать градиент:

#42c264;

Background-color:

Background-image:

Background-image:

Background-image:

Background-image:

Background-image:

Background-image:

-webkit-linear-gradient (#4fec50, #42c264); — moz-linear-gradient (#4fec50, #42c264); — o-linear-gradient (#4fec50, #42c264); — ms-linear-gradient (#4fec50, #42c264); — chrome-linear-gradient (#4fec50, #42c264); linear-gradient (#4fec50, #42c264);

Свойство linear-gradient дает указание браузеру начинать с первого значения цвета (которым в данном примере является #4fec50), а затем переходить ко второму значению (#42c264).

Как видите, в CSS-коде свойство background-image: linear-gradient повторяется с использованием разных префиксов, например — webkitЭто позволяет различным производителям браузеров (так, например, — moz — относится к Mozilla Firefox, — ms указывает на Microsoft Internet Explorer и т. д.) экспериментировать с собственными реализациями новых CSS3 свойств, прежде чем представлять готовый продукт, когда префиксы уже не будут нужны. Поскольку таблицы стилей по своей природе являются каскадными, вариант без префикса расположен в конце кода. Это подразумевает, что он будет превалировать над предшествующими объявлениями при наличии таковых.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *