Линейный градиент в CSS3
Верстка
Линейный градиент в CSS3Градиент. Это плавное перетекание одного цвета в другой. Раньше, реализация градиентного фона осуществлялась рисунками. Делался фон, который содержал в себе градиент. Как понимаете, это дополнительная картинка. К тому же, в случае, если менялась цветовая схема сайта, то приходилось перерисовывать эту картинку по-новой. В настоящее время градиент можно оформить при помощи каскадных стилей. В этом случае, внешний вид градиента очень легко меняется. Сегодня поговорим о градиентах в CSS3.
Градиент может украсить сайт. Сделанный умелыми руками он может дать дизайну объемность и живость. Градиенты бывают линейными и радиальными. В этом материале будем говорить о линейном градиенте.
Итак, берем наш стандартный блок с подложкой:
В разных браузерах градиент создается разными определениями. Но суть остается одна: градиент ложится на фон блока так же, как и рисунок (background-image). Только вместо определения url используются следующие:
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 также имеются заплатки:
background: -khtml-gradient(linear, startpos, endpos, color-stop(0%,startcolor), color-stop(100%,endcolor)); /* старые Konqueror */
- startpos - стартовая позиция градиента.
- endpos - конечная позиция градиента.
- startcolor - начальный цвет.
- endcolor - конечный цвет.
Я бы не рекомендовал пользоваться данной заплаткой. Данные браузеры обновляются вполне самостоятельно и настойчиво. Не нужно загромождать код дополнительными условиями.
И остается у нас такой браузер как IE. Десятая версия стоит не у всех, и еще много пользователей пользуются IE6. Для создания градиента в IE нужно использовать фильтры:
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#FFFF0000, EndColorStr=#FFFFFFFF, GradientType=1); /* IE ниже 8 */
- StartColorStr - стартовый цвет.
- EndColorStr - конечный цвет.
- GradientType - направление градиента. 0 - вертикальный, 1 - горизонтальный.
Цвет задается в формате #AARRGGBB шестнадцатиричными группами:
- AA - альфа-канал (уровень прозрачности);
- RR - Красный;
- GG - Зеленый;
- BB - Синий.
Также рекомендую избегать использования фильтров. К тому же, направление градиента через фильтр может быть только в двух направлениях. Диагональный градиент сделать не получится.
Итак, соберем все, что узнали воедино. В моем примере поддержка старых браузеров отсутствует, не обессудьте. Идите в ногу со временем. Ретро уже не в моде. У меня получился вот такой симпотишный блок:
Код этого блока:
.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>
Для создания сложных градиентов можно описать вместо двух большее количество цветов:
(это не картинка)
Код сложного градиента:
.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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Линейный градиент в CSS3
Верстка
Скрипты, инструкции, справочники
| Категория: | Верстка |
| Просмотрено: | 8045 |
| Рейтинг: | 4.7/3 |
| Дата добавления: | 2011-11-16 08:28, Среда |
| Добавил: | Szen |
| Теги: | CSS3, Градиентная заливка, градиент |
Рекомендуем
Дополнительно к Линейный градиент в CSS3
Мини-форум
| № 0 | 2011-11-16 08:28 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Линейный градиент в CSS3". |
| Гость |
