Градиентные фоны

Мэтью О'Нил

Перевод оригинальной статьи Мэтью О'Нила Super-Easy Blendy Backgrounds

Translated with the permission of A List Apart Magazine

Перевод Кирилла Грушко

Недавно меня постигло разочарование. Пытаясь претворить в жизнь дизайнерскую идею, насыщенную градиентными фонами, я осознал, что при использовании традиционной разметки потребуется не менее десятка градиентных изображений, различных по цвету и высоте. К слову сказать, по профессии я программист, поэтому любой графический редактор сложнее MS Paint вызывает у меня нервную дрожь. Убив немало времени на создание изображений, я не только усомнился в своих творческих способностях, но и с ужасом представил себе, сколько усилий понадобится для исправления возможных ошибок. Не дай Бог, если придется подправить высоту того или иного изображения, или изменить его цветовую гамму… При таких вот обстоятельствах и родился нижеследующий прием создания градиентных фонов для веб-страниц.

Чёрное и белое.

В упомянутом дизайнерском проекте все градиенты представляли собой плавный переход к белому цвету, поэтому логичным показалось создать для начала изображение в формате PNG, содержащее градиентный переход от прозрачного к белому, с тем чтобы цвет прозрачной части градиента в конечном счете определялся стилем на веб-странице. Вызвав свой любимый редактор изображений, я создал два файла PNG, каждый размером 100x100 пикселей; в одном содержался переход от прозрачного к белому, в другом – к черному. В последнем варианте особой необходимости не было, но очень уж хотелось посмотреть, что получится.

Два изображения с полупрозрачными градиентами, созданные при помощи редактора The Gimp.

Вот как выглядела CSS:

.blue {

background-color: #2382a1;

}

.green {

background-color: #4be22d;

}

.pink {

background-color: #ff009d;

}

.gradwhite {

background-image: url(grad_white.png);

}

.gradblack {

background-image: url(grad_black.png);

}

.box {

border: solid orange 2px;

float: left;

height: 100px;

margin: 1px;

width: 175px;

}

Разметка:

<div class="box gradwhite blue"></div>

<div class="box gradwhite green"></div>

<div class="box gradwhite pink"></div>

<div class="box gradblack blue"></div>

<div class="box gradblack green"></div>

<div class="box gradblack pink"></div

В этом и последующих примерах для облегчения восприятия используются цветовые определения стиля, однако всем должно быть ясно, что в реальных условиях использование презентационных имен классов не приветствуется, не так ли? Именно так.

Первый пример дает следующий результат:

Фон, созданный при помощи градиента в формате PNG.

В чем дело, фон не масштабируется?!

Порадовавшись собственной смекалке, я попытался подогнать размер div под размеры веб-страницы. Как вы уже наверное догадались, ничего из этого не вышло. Фоновое изображение замечательным образом размножалось по горизонтали и по вертикали (при помощи repeat-x и repeat-y), но изменять размеры решительно противилось. (Желаете проверить? См. пример второй.)

Говорят, в третей версии CSS будет присутствовать атрибут background-size, но поскольку расчетное время прибытия этой версии – вечность, легче от этого не становится. Что же делать? Самое логичное – употребить здесь какой-нибудь пригодный для масштабирования элемент, например, img. Вместо того, чтобы выводить в качестве фона градиент PNG, используем img, установив его ширину (width) и высоту (height) в 100%.

Третий пример дает нам вот что:

Зар-р-работала!

Вот CSS, взамен прежнего:

.blue {

background-color: #2382a1;

}

.green {

background-color: #4be22d;

}

.pink {

background-color: #ff009d;

}

.gradwhite img, .gradblack img {

background-color: transparent;

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

}

.box2 {

border: solid orange 2px;

float: left;

height: 150px;

margin: 1px;

position:relative;

width: 84px;

}

Соответствующая разметка:

<div class="box2 gradwhite blue">

<img src="/grad_white.png"/>

</div>

<div class="box2 gradwhite green">

<img src="/grad_white.png"/>

</div>

<div class="box2 gradwhite pink">

<img src="/grad_white.png"/>

</div>

<div class="box2 gradblack blue">

<img src="/grad_black.png"/>

</div>

<div class="box2 gradblack green">

<img src="/grad_black.png"/>

</div>

<div class="box2 gradblack pink">

<img src="/grad_black.png"/>

</div>

Теперь изображение закрывает собой текст!

Попробуем запустить текст поверх нашего фона. Но сначала следует заставить фон масштабироваться вместе со шрифтом, на тот случай если пользователю вздумается изменять величину текста. Это делается удалением декларации height и добавлением условного комментария (кивок в сторону Internet Explorer 7, который непременно попытается найти родительский элемент для height). Про условные комментарии можно прочитать на сайте Quirksmode.

Примечание: В реальных боевых условиях, скорее всего, потребуется просто подключить к странице файл с таблицей стилей, совместимой с браузерами вроде Firefox, а затем добавить ещё два файла с таблицами, использующими условные комментарии для Internet Explorer 6 и 7. Но для нашего примера вполне сгодится следующий комментарий:

<!--[if IE 7]>

<style type="text/css">

.box {

border: solid red 2px;

height:2.5em;

}

</style>

<![endif]-->

Текст проглядывает сквозь градиентный фон.

Этот процесс описан в четвертом примере. И вот результат: фон с абсолютными координатами объявляется поверх текста. Чтобы исправить ситуацию, воспользуемся универсальным селектором, дабы сгруппировать всех потомков .gradwhite, задать им относительные координаты (при необходимости можно, конечно, сделать это поточнее), и присвоить им z-index равный единице. Если, далее, присвоить им z-index равный нулю, это позволит избавиться от перекрывания текста изображениями. Наконец, назначим текстовым абзацам стиль, отделяющий их друг от друга (см. пятый пример).

Текст, корректно накладывающийся на градиент.

Обновленный CSS...

.gradwhite img, .gradblack img {

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

z-index:0;

}

.gradwhite * {

position: relative;

z-index: 1;

}

.gradwhite p {

margin: 0px;

padding: 3px;

}

.box3 {

border: solid orange 2px;

float: left;

margin: 1px;

padding: 5px;

position:relative;

width: 256px;

}

…и разметка.

<div class="box3 gradwhite pink">

<img src="/grad_white.png"/>

<p>This text is in front of the image.</p>

</div>

Вы уже поняли, что все это не работает в Internet Explorer 6?

Всем известно, что Internet Explorer 6, как и предыдущие версии браузера, не распознаёт прозрачность формата PNG. А поскольку Internet Explorer 7, поддерживающий эту функцию, завоевывает рынок не слишком стремительно, вы, наверное, решите, что вышеописанное упражнение вам никогда не пригодится на практике. Что ж, в Internet Explorer есть маленький, но от этого не менее замечательный фильтр под названием Alpha Image Loader, суть которого разъяснена в следующей статье на сайте A List Apart: «Прозрачность PNG во всех браузерах: практическое решение». Нам в данном случае интересно отметить, что, загрузив изображение PNG, можно настроить фильтр Alpha Image Loader на определенный «масштаб», избежав тем самым трюков, к которым мы прибегали в случае с браузером Firefox.

Как же заставить все это функционировать в Internet Explorer и Firefox одновременно? Можно создать стили с расчетом на Firefox, а затем использовать супертрюк HTML для подмены стилей в Internet Explorer 6. Я позволю себе ради ясности применить здесь супертрюк CSS, ибо это позволит нам увидеть всю разметку целиком и даст возможность вырезать и вставлять её части. Употребляя этот прием в рабочих условиях, я предпочитаю снабжать код условными комментариями для каждого из существующих браузеров. В конце концов, трюк есть трюк – никто не гарантирует, что он будет работать вечно.

Шестой пример – вся разметка:

Как это работает в Internet Explorer 6.

CSS:

.gradwhite {

filter: progid:DXImageTransform.Microsoft. »

AlphaImageLoader(src='grad_white.png', »

sizingMethod='scale');

}

* html .gradwhite img {

display:none;

}

Разметка (не вникайте в строки со стилями, через несколько секунд мы от них избавимся):

<div class="box gradwhite pink" style="width:256px;">

<p>

Wow, maybe this will actually work!

</p>

</div>

Последние штрихи.

Наконец, добавим еще один супертрюк HTML, а именно атрибут position:static, примененный к классу box, и покончим тем самым с досадной ошибкой в Internet Explorer 6, нарушающей работу ссылок с фильтром Alpha Image Loader при некоторых обстоятельствах.

Седьмой пример являет взору окончательный вариант градиентных фонов для любого браузера:

Градиенты во всем их великолепии.

Окончательная CSS:

<style type="text/css">.grad img {

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

z-index: 0;

}

.box {

border: solid orange 2px;

float: left;

margin: 1px;

position: relative;

width: 165px;

padding: 5px;

}

.box * {

margin: 0px;

position: relative;

z-index: 1;

}

* html .grad {

filter: progid:DXImageTransform.Microsoft.AlphaImage »

Loader (src='grad_white.png', sizingMethod='scale');

}

* html .grad img {

display: none;

}

* html .box {

position:static;

}

.blue {

background-color: #2382a1;

}

.green {

background-color: #4be22d;

}

.pink {

background-color: #ff009d;

}

</style>

<!--[if IE 7]>

<style type="text/css">

.box {

border: solid red 2px;

height:2.5em;

}

</style>

<![endif]-->

Окончательная разметка:

<div class="box grad blue">

<img src="grad_white.png" alt="blur gradient box" />

<p><a href="#">Ooo, linked text</a>!</p>

</div>

<div class="box grad pink">

<img src="grad_white.png" alt="pink gradient box" />

<p><a href="#">Ooo, linked text</a>!</p>

</div>

<div class="box grad green">

<img src="grad_white.png" alt="green gradient box" />

<p><a href="#">Ooo, linked text</a>!</p>

Вот и всё! Во второй части статьи я объясню, как с помощью описанного метода можно создавать весьма изощренные страницы.