Просмотров: 2 279

Линейный градиент (linear-gradient) с помощью CSS.

Градиент — это плавный переход одного цвета в другой через серию промежуточных цветов.

При линейном градиенте переход цвета происходит вдоль одной линии. С появлением современных модулей 3 версии CSS на веб-страницах стало возможным создание эффекта градиента. Эта заметка о том, как вы можете это делать.

Начнем с того, что специального свойства для линейно градиента нет. Для его задания используется свойство background.

Значение для свойства background, которое отвечает за создание линейного градиента linear-gradient.

Т.к. функция градиента довольно новая, его поддержка в старых браузерах оставляет желать лучшего.

Вот таблица совместимости:

22-01-2014 17-32-51

Полноценная его поддержка появилась только в Internet Explorer 10 версии.

Но, не стоит бояться и совсем не использовать это свойство. Есть несколько трюков, которые могут помочь решить эту проблему. О них чуть позже.

Сейчас общее правило для создания линейного градиента:

linear-gradient(позиция, цвет в начальной точке,цвет в конечной точке)

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

1) Ключевым словом (добавляется ключевое слово to + название сторон(ы))

2) Конкретным значением в градусах

Вот список возможных значений, которые можно указать:

to top или 0deg Снизу вверх.

to bottom 180deg Сверху вниз.

to left 270deg Справа налево.

to right 90deg Слева направо.

Код примера:

<div style="width:300px; height:70px; background:linear-gradient(to top, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to bottom, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to left, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to right, #FB9A14, #F9800F);"></div>

Внешний вид:

23-01-2014 5-16-54

Следующая группа создает градиент из угла в угол. Для этой группы можно задавать позицию только ключевыми словами. Значение в градусах здесь не предусмотрено.

 to top left От правого нижнего угла к левому верхнему.

to top right От левого нижнего угла к правому верхнему.

to bottom left От правого верхнего угла к левому нижнему.

to bottom right От левого верхнего угла к правому нижнему.

Код примера:

<div style="width:300px; height:70px; background:linear-gradient(to top left, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to top right, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to bottom left, #FB9A14, #F9800F);"></div>
<br>
<div style="width:300px; height:70px; background:linear-gradient(to bottom right, #FB9A14, #F9800F);"></div>

Внешний вид:

23-01-2014 5-20-18

Теперь давайте вернемся к вопросу совместимости в старых браузерах. Как быть в этом случае?

Предлагаю вашему вниманию конструкцию, которую использую сам.

Общая формула следующая:

background: #FB9A14; /* для браузеров, которые не поддерживают градиент */
background:linear-gradient(to top, #FB9A14, #F9800F);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FB9A14, endColorstr='#F9800F); /* для IE6-9 */
background: -webkit-linear-gradient(top, bottom, #FB9A14, #F9800F); /* для webkit-браузеров (Safari, Chrome, Яндекс.Браузер)*/
background: -moz-linear-gradient(top, #FB9A14, #F9800F); /* для firefox 3.6+ */
background: -o-linear-gradient(top, #FB9A14, #F9800F); /* для Opera 11.10+ */
background: -ms-linear-gradient(top, #FB9A14, #F9800F); /* для IE10+ */

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

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