Градиентный фон с помощью стилей CSS
Автор статьи: Kremax
Сайт: Kremax.jino-net.ru
Многие веб-мастера ломают голову над тем, какой фон им выбрать для своего творения (сайта) или отдельных его частей (ячеек таблиц и т.д.). При этом в основном используются фоновые картинки (gif или jpg расширения), на загрузку которых уходит какое-то время, а вот минимизация этого времени – есть одна из главных задач веб-дизайнера. Эту статью я пишу в облегчение тем, кто градиентную заливку производит путем, указанным выше.
Эту нехитрую операцию можно с легкостью воспроизвести используя стили CSS, что позволяет, во-первых, не тратить время на создание фоновой картинки в каком-либо графическом редакторе, во-вторых, уменьшить время загрузки самой страницы (или отдельных ее составляющих).
Итак, приступим непосредственно к рассмотрению кода. Предположим, вы хотите иметь градиентный фон какой-то ячейки таблицы. В теговом виде это будет выглядеть так:
<table>
<tr>
<td bgcolor=#898989 style="filter:progid:DXImageTransform.microsoft.Gradient(gradientType=0,
StartColorStr=#E0E0E0,EndColorStr=#ffffff)">
<!--Здесь задуманное Вами содержание-->
</td>
</tr>
</table>
Как видим, все просто. Теперь рассмотрим, что означает каждый отдельный элемент. Тег style задает стиль того объекта, применительно к которому он используется (в данном случае ячейка таблицы). Задаем в нем параметр filter, который, я думаю, не надо переводить на русский язык (т.е мы задаем фильтр, используемый при стилизации данного объекта). Progid – и есть тот самый фильтр. Он задает далее функцию, которая и выполняет заливку градиентом. Эта функция DXImageTransform.microsoft.Gradient() имеет три переменные, опишем каждую. GradientType – эта переменная задает тип градиента (горизонтальный или вертикальный) и может иметь три значения: 0 – это заливка по вертикали, 1 – заливка по горизонтали, 2(и любое другое число) – заливает вертикальным градиентом, переходящим из синего цвета в черный. Далее идут, как Вы уже наверное догадались, начальный и конечный цвета. Все элементарно.
Следует сказать еще одну вещь по этому поводу. Этот трюк действует только, когда просматривать Вашу страницу через Internet Explorer 5.0 (и выше). Точно знаю, что в Mozila Firefox это не работает. Из этой ситуации я решил выкрутиться очень просто. Параллельно стилю нужно задать подходящий цвет (в bgcolor), который бы загружался, если Ваш сайт просматривают не в IE. На счет Opera и Netscape Navigator я не знаю, т.к. не испытывал (но Вам проделать это должно быть не трудно). Всем желаю удачи!
Самые выгодные обменные пункты электронных валют
