28. Градиенты.

Градиент – плавный переход от одного заданного цвета к другому. Бывают линейные и радиальные градиенты. Чтобы работать с градиентом нужно задать два цвета и точки перехода. В CSS градиенты используются для фона (являются значениями для background-image или background).

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

Простейший вариант – функция linear-gradient() с двумя аргументами-цветами. Это градиент сверху вниз.

Направление градиента можно задать первым аргументом функции. Варианты:

• угол (по часовой, 0о – это сверху вниз), цвет меняется к этому углу.
• слово to и значения top, bottom и left, right, а также их сочетания через пробел.

background-image: linear-gradient(110deg, red, blue);
background-image: linear-gradient(to left top,red,blue);

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

background-image: linear-gradient(red -20px, blue 50%);

Для построения градиента можно использовать не два, а более цветов. И для каждого цвета можно задавать позицию на векторе градиента.

background: linear-gradient(red -20px, blue 50%, white);

Функция repeating-linear-gradient() создаёт бесконечно повторяющийся линейный градиент, образуя фоновый узор. По своему действию похожа на linear-gradient() и имеет те же параметры. Обычно для цветов указывается смещение на векторе градиента. Цвета последовательно сменяют друг друга.

background: repeating-linear-gradient(red, blue 50%);
background: repeating-linear-gradient(red, blue 20px, red 40px);

Радиальный градиент

В радиальном градиенте переход между цветами происходит по окружности («круги на воде»). Для построения служит функция radial-gradient():

Как и в случае линейного градиента, можно настраивать «остановки» для цветов:

background-image: radial-gradient(red, blue 50%);

Ещё настраивается центр градиента. По умолчанию точкой отсчёта является середина (at center center). Её можно смещать аналогично background-position.

Первое значение определяет расположение по горизонтали, второе – по вертикали. Указываются после предлога at в любой единице измерения, в процентах или при использовании ключевых слов

[left|center|right] || [top|center|bottom]

background: radial-gradient(at 100px 50px, red, blue);

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

background: radial-gradient(circle at 150px 100px, red, blue);

Дополнительно можно настроить размер градиента. Делается это указанием специальных параметров после слова circle (или ellipse): closest-side, closest-corner, farthest-side, farthest-corner.

Вместо спец. параметров можно указать радиус градиента в единицах размера.

background: radial-gradient(circle
farthest-corner at 150px 100px,
red, blue);

Функция repeating-radial-gradient() создаёт бесконечно повторяющийся радиальный градиент.

background: repeating-radial-gradient(red, blue 20px);

Вендорные префиксы

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

• -o- префикс для Opera
• -moz- префикс для Mozilla
• -ms- префикс для IE
• -webkit- префикс для Safari и Chrome

p {
-moz-lol-cat:=°__°=;
-webkit-lol-cat: =^__^=;
lol-cat: smile;
}

Это правильный подход!