Градиентом называется плавный переход от одного цвета к другому. Обычно его используют в качестве фона для какого-либо элемента сайта, заливки меню или кнопок. Такие элементы становятся более привлекательными для глаз человека.
Градиент задается в CSS в свойстве background.
Например, если вы для элемента определите свойство:
|
1 |
background: linear-gradient(to top, #000, #fff); |
то заполните его линейным градиентом (linear-gradient), переходящим от черного (#000) к белому (#fff) снизу вверх (to top).
После «to» можно писать top, bottom, left, right (то есть вверх, вниз, влево, вправо) или их сочетания. Так, если вы укажите направление «to top right», то получите диагональную заливку от левого нижнего края к правому верхнему.
Однако, здесь я не хочу рассказывать о спецификациях css. Существует удобный онлайн генератор градиентов, использующий css3 — http://www.colorzilla.com/gradient-editor/
Здесь вы просто выбираете вид градиента и его цвета, а в окне CSS появляется код, который вам нужно скопировать в свой файл css применительно к нужному элементу.
Как видно в этом окне довольно много кода. Это потому, что разные браузеры используют свои собственные команды для отображения заливки. Здесь вы получите код, который будет работать на максимально большом количестве браузеров, в том числе на таких распространенных, как Chrome, Safari, Opera, Firefox и IE. Нужно однако иметь ввиду, что не все браузеры поддерживают градиент.
Кратко о работе редактора:
Presets — это уже подготовленные заранее градиенты. Здесь есть довольно красивые варианты. Посмотрите, может вам что-то понравится из этого набора.
В окне Preview вы видите результат ваших настроек.
В поле Orientation вы задаете вид или направление заливки: горизонтальный, вертикальный, диагональный, радиальный.
Цвета для градиента задаются следующим образом. Вы нажимаете на квадратик маркера (на рисунке обведен красным), его цвет появляется ниже в поле color, затем нажимаем на поле color, появляется окно для выбора цвета, выбираем нужный цвет и жмем Ok.
Вы можете задать сколько угодно маркеров цвета. Для этого просто нажмите мышкой под линейкой редактирования градиента. Убрать маркер можно захватив его мышкой и потянув вниз.
Дополнительные функции:
- hue/saturation — позволяет задавать различные оттенки градиента, попробуйте сами, чтобы понять, что это такое;
- reverse — переворачивает градиент.
Делаем прозрачный градиент
Я не нашел в Colorzilla настроек, предназначенных для создания прозрачной (полупрозрачной) заливки. Хотя опция Opacity (прозрачность) есть, но у меня она почему то недоступна для изменений. В описании генератора есть пояснение что,
- Opacity support with multiple opacity stops
но я не понял, что это значит.
Однако в полученном с помощью генератора коде можно изменить цвет на нужный нам со свойством прозрачности. Как известно, прозрачный цвет задается в css с помощью функции rgba, в которой первые 3 параметра это вхождения цветов (красный, зеленый, голубой) в конечный цвет, а четвертый параметр это прозрачность, задаваемая от 0 до 1, чем меньше значение, тем прозрачнее цвет. Например, черный цвет с 50% прозрачностью будет задан как rgba(0, 0, 0, 0.5). Для переключения в режим представления цветов в нужный нам вид, необходимо настройку «Color format» переключить в rgba.
