Категория:
Опубликовано:

Кроссбраузерный градиент на CSS

Градиент на CSS

Фон в виде градиента основанный на CSS ранее был мечтой любого веб-дизайнера. К счастью прогресс не стоит на месте, и уже сейчас, все современные браузеры работают с CSS3, в котором это вполне осуществимо с помощью свойств background - linear-gradient или radial-gradient. Но есть друзья, которые по тем или иным причинам пользуются WEB-динозаврами. Специально для таких решаем эту задачу кроссплатформено.

Рассмотрим на примере линейного градиента:

background: linear-gradient(to top, #bf0a07, #e27a7a)
HTML:
<div class="block">
	<p>Градиент</p>
</div>
CSS блока (для наглядности):
.block{
  margin: 50px;
  width: 150px;
  height: 50px;
  text-align: center;
  border: 1px solid #ccc;
  color: #fff;
}
CSS (градиент):
background: #e27a7a; /* Для старых браузеров - без градиента */
background: -moz-linear-gradient(top,  #e27a7a 0%, #bf0a07 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e27a7a), color-stop(100%,#bf0a07)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e27a7a 0%,#bf0a07 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e27a7a 0%,#bf0a07 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e27a7a 0%,#bf0a07 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e27a7a 0%,#bf0a07 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e27a7a', endColorstr='#bf0a07',GradientType=0 ); /* IE6-9 */

Пример:

gradient.png

Для быстрой генерации градиентов есть специальные сервисы:

Вот и все. Никаких тебе вырезаний картинок. © Love Is Gone. Just Sex.

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

Комментарии

Эх, только мечтаю про времена, когда все будет по W3C

О да +++
Боюсь не дожить до этого ((

Прорвемся!