Линейный градиент в CSS3

Верстка

Рисунок Линейный градиент в CSS3
Линейный градиент в CSS3 Линейный градиент в CSS3
оценка: 4.7 из 5
оценок: 3

Градиент. Это плавное перетекание одного цвета в другой. Раньше, реализация градиентного фона осуществлялась рисунками. Делался фон, который содержал в себе градиент. Как понимаете, это дополнительная картинка. К тому же, в случае, если менялась цветовая схема сайта, то приходилось перерисовывать эту картинку по-новой. В настоящее время градиент можно оформить при помощи каскадных стилей. В этом случае, внешний вид градиента очень легко меняется. Сегодня поговорим о градиентах в CSS3.

Градиент может украсить сайт. Сделанный умелыми руками он может дать дизайну объемность и живость. Градиенты бывают линейными и радиальными. В этом материале будем говорить о линейном градиенте.

Итак, берем наш стандартный блок с подложкой:

Это блок с которым мы будем работать

В разных браузерах градиент создается разными определениями. Но суть остается одна: градиент ложится на фон блока так же, как и рисунок (background-image). Только вместо определения url используются следующие:

Code
background: linear-gradient(direction, start, end); /* CSS3 градиент */
background: -o-linear-gradient(direction, start, end); /* Opera 11.10+ */
background: -moz-linear-gradient(direction, start, end); /* Firefox 3.6+ */
background: -webkit-linear-gradient(direction, start, end); /* Chrome 10+, Safari 5.1+ */
background: -ms-linear-gradient(direction, start, end); /* IE10 */
background: -khtml-linear-gradient(direction, start, end); /* Konqueror */
  • direction - направление линейного градиента. Содержит значение в градусах.
  • start - стартовый цвет градиента.
  • end - конечный цвет градиента.

Направление градиента также можно задавать при помощи предопределенных переменных (указывают, от какого края начинается градиент): left, top left, top, top right, right, bottom right, bottom, bottom left.

Цвет может задаваться в любом доступном CSS-формате, включая объявление цвета с альфа-каналом через rgba. Кроме того, градиент можно позиционировать на фоне блоков, как простое изображение.

Версии Opera ниже 11.10 не умеют показывать градиент. Есть разннобразные заплатки. Но так как Opera успешно обновляется сама, эти заплатки рассматривать не будем. Для старых версий Chrome, Safari и Konqueror также имеются заплатки:

Code
background: -webkit-gradient(linear, startpos, endpos, color-stop(0%,startcolor), color-stop(100%,endcolor)); /* Chrome 1-9, Safari 4-5 */
background: -khtml-gradient(linear, startpos, endpos, color-stop(0%,startcolor), color-stop(100%,endcolor)); /* старые Konqueror */
  • startpos - стартовая позиция градиента.
  • endpos - конечная позиция градиента.
  • startcolor - начальный цвет.
  • endcolor - конечный цвет.

Я бы не рекомендовал пользоваться данной заплаткой. Данные браузеры обновляются вполне самостоятельно и настойчиво. Не нужно загромождать код дополнительными условиями.

И остается у нас такой браузер как IE. Десятая версия стоит не у всех, и еще много пользователей пользуются IE6. Для создания градиента в IE нужно использовать фильтры:

Code
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#FFFF0000, EndColorStr=#FFFFFFFF, GradientType=1)"; /* IE8+ */
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#FFFF0000, EndColorStr=#FFFFFFFF, GradientType=1); /* IE ниже 8 */
  • StartColorStr - стартовый цвет.
  • EndColorStr - конечный цвет.
  • GradientType - направление градиента. 0 - вертикальный, 1 - горизонтальный.

Цвет задается в формате #AARRGGBB шестнадцатиричными группами:

  • AA - альфа-канал (уровень прозрачности);
  • RR - Красный;
  • GG - Зеленый;
  • BB - Синий.

Также рекомендую избегать использования фильтров. К тому же, направление градиента через фильтр может быть только в двух направлениях. Диагональный градиент сделать не получится.

Итак, соберем все, что узнали воедино. В моем примере поддержка старых браузеров отсутствует, не обессудьте. Идите в ногу со временем. Ретро уже не в моде. У меня получился вот такой симпотишный блок:

Блок с линейным градиентом

Код этого блока:

Code
<style="text/css">
  .myblock1{
    padding: 20px;
    border: 1px solid #aaaaaa;
    background: #ffffee; /* для неподдерживающих градиент */
    background: linear-gradient(315deg, #ffffee, #ffff44); /* CSS3 градиент */
    background: -o-linear-gradient(315deg, #ffffee, #ffff44); /* Opera 11.10+ */
    background: -moz-linear-gradient(315deg, #ffffee, #ffff44); /* Firefox 3.6+ */
    background: -webkit-linear-gradient(315deg, #ffffee, #ffff44); /* Chrome 10+, Safari 5.1+ */
    background: -ms-linear-gradient(315deg, #ffffee, #ffff44); /* IE10 */
    background: -khtml-linear-gradient(315deg, #ffffee, #ffff44); /* Konqueror */
  }
</style>

<div class="myblock1">
  Данные
</div>

Для создания сложных градиентов можно описать вместо двух большее количество цветов:

Блок со сложным линейным градиентом
(это не картинка)

Код сложного градиента:

Code
<style="text/css">
  .myblock1{
    padding: 20px;
    border: 1px solid #aaaaaa;
    background: #ffffee;
    background: linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -o-linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -moz-linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -webkit-linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -ms-linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -khtml-linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
  }
</style>

<div class="myblock1">
  Данные
</div>

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Линейный градиент в CSS3
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:5879
Рейтинг:4.7/3
Дата добавления:2011-11-16 08:28, Среда
Добавил:Szen
Теги:CSS3, градиентная заливка, градиент

Мини-форум

№ 02011-11-16 08:28
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Линейный градиент в CSS3".
Гость
Учавствовать в обсуждении "Линейный градиент в CSS3" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что бы вы хотели изучить?
Всего ответов: 254
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 6
Гостей: 5
Пользователей: 1

NiklKl
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz