Как создать визуальный эффект градиент стилями CSS ?

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

Довольно сложно найти ресурс,  где бы не использовались яркие и насыщенные визуальные эффекты. И даже если сайт стремится к минимализму эффектов, всё равно на нем могут найтись тени или еле заметный градиент. Он может присутствовать в заливке заднего фона, который почти незаметен, и его цветовая палитра может состоять из одного цвета – сочетание серого с серым, который всего на полотна меньшим или больше.

Градиент – это красивый визуальный эффект плавного перетекания одного цвета в другой.

До недавнего времени градиент рисовали в Photoshop или других графических редакторах. Это делалось таким образом: рисовали небольшую полоску, а  уже на самой  странице сайта заполняли (размножали) ее на весь экран.

CSS3 решил не отставать от современного течения и интегрировал градиент в свои стили. Теперь для создания этого эффекта достаточно прописать стиль телу (body) или блоку (div) с указанными параметрами. После этого блок с красивым фоном будет заполнен автоматически .

Градиент содержит много различных параметров, для индивидуальной и тонкой настройки. Они могут быть: линейными и радиальными (наполнение от цента по кругу) и разнонаправленными (сверху вниз, слева направо или подналегли). Также они могут состоять из множества оттенков (от двух и более).

Для отображения в более старых браузерах нужно соответственно прописывать специальные артикулы:
webkit-, -moz- или -O- .

Синтаксис написания стиля градиента

background: linear-gradient(направление, цвет-1, цвет-2, …);

Линейный градиент – если не указать направление то направление будет (по умолчанию).

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

Вот блок див и весь стиль с учётом старых браузеров:

Пример второй: Данный градиет состоит из 2-х цветов с линейной направленностью слева -> направо:

В следующем примере показано, как создать линейный градиент (слева направо) со всеми цветами радуги:

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

Добавить комментарий