Как создать красивое фоновое изображение

Что такое «красиво»- понятие более чем относительное. Но тем не менее фон, сделанный с помощью градиента хорошо смотрится. Дословно  градиент означает  вектор, направления возрастания какой-либо величины до ее максимального, или какого-то другого заданного значения. Применительно к оформлению различных элементов сайта так называют переход от одного цвета к другомуПри этом учитывается различные направления  переходов. Например сверху вниз или  же от центра к периферии. Варианты приведены ниже.

Чтобы создать изображение с градиентом цвета пишут достаточно простой CSS код. Ведь нужно только задать два кода цвета и указать направление перехода. Это доступно даже начинающему  специалисту. И возникает вполне закономерный вопрос: «Если все это так просто, то зачем же тогда нужен генератор?» Ответ на это вопрос прост. Большинство даже опытных мастеров не очень хорошо представляют себе как это все будет выглядеть на экране компьютера. Изображение созданное генератором позволяет сразу посмотреть на результат задуманного и если не подходит сразу же на месте подкорректировать. Или же подобрать другие цвета. Так удобней и потерь времени меньше.

Сайтов с с таким инструментов много. Наш выбор это программа  Сolorzilla.

И сразу же программа предлагает  большую палитру изображений с градиентом цветов.

fs

Выберите подходящий  вариант. Например тот, что отмечен на рисунке стрелочкой.

fs(2)

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

fs(3)

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

fs(4)

Размеры созданного изображения по умолчанию ширина 370 пикселей, высота 50. Изменения  до нужных размеров производятся в окне Size.

fs(5)

Все работа закончена — желаемое фоновое изображение с градиентом цвета создано. Скопируйте код и вставьте его в свой файл стилей.

fs(6)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *