Линейный градиент, как инструмент веб-дизайна

Градиент – это плавный переход на веб-странице от одного цвета к другому. Причем таких переходов и цветов может быть несколько на одной и той же странице. С помощью этого способа можно создавать такие эффекты дизайна, как блики, псевдотрехмерность, фон и прочее.

Для градиента используют свойство background-image или background со значением liner-gradient. В CSS данная запись будет выглядеть так – background: liner-gradient и в скобках через запятую указываем позицию, начальный и конечный цвет (to top left, #fff, #000). Цвет можно устанавливать любой так же как и позицию. Код цвета можно брать из специальных программ, а позиция имеет определенную кодировку:

- to top – цвет будет меняться снизу вверх;

- to bottom – цвет будет меняться сверху вниз;

- to left – цвет будет меняться справа налево;

- to right – цвет меняться справа налево;

- to top left – цвет будет меняться от нижнего угла справа к верхнему левому углу; Смотрите информацию на .

- to top right – цвет будет меняться от нижнего угла слева к верхнему углу слева

- to bottom left – цвет будет меняться от верхнего угла справа к нижнему углу слева;

- to bottom right - цвет будет меняться от верхнего угла слева к нижнему углу справа.

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

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

После значения цвета следует указывать его положение, которое лучше записывать в процентном отношении, например, blue 0%, red 50%, orange 100%. Это дает команду браузеру, чтобы сначала отображал голубой цвет, затем – красный, и в конце переходил на оранжевый. Вместо слов лучше использовать шестнадцатеричный код цвета.

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