В CSS3.0 появилась возможность создавать градиенты для элементов, что раньше выполнялось только с помощью изображения, предварительно созданного, как правило, в Photoshop.
Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.
Для того, чтобы применить градиент, нужно использовать свойство background-image или составное свойство background. Основная проблема здесь заключается в том, что свойство это так долго ожидалось верстальщиками, что все браузеры успели создать свой синтаксис для его отображения. Но об этом мы поговорим ниже, а сейчас основным синтаксисом мы будем считать стандартный.
Итак, сначала о линейном градиенте.
Линейный градиент
Подразумевает, как минимум, наличие 2-х значений цвета: начального и конечного. Самая простая запись выглядит так:
|
1 2 3 |
#simple { background-image: linear-gradient(#fff, #000); } |
Но вы можете задать направление градиента, используя ключевое слово to и само направление: left (влево), right (вправо), top (вверх), bottom (вниз):
|
1 2 3 |
#simpleDest { background-image: linear-gradient(to right, #fff, #000); } |
Кроме того, задать направление градиента можно в градусах, например, диагональный градиент будет иметь угол 45deg:
|
1 2 3 |
#diag { background-image: linear-gradient(45deg, #cde, #7db9e8); } |
Можно задавать и отрицательное значение, тогда градиент "перевернется", т.е. будет направлен в противоположную сторону.
|
1 2 3 |
#diag { background-image: linear-gradient(-45deg, #cde, #7db9e8); } |
Как вы понимаете, совсем необязательно ограничиваться всего двумя цветами в градиенте. Вы можете добавить их через запятую столько, сколько вам нужно. Вопрос только в том, насколько это будет красиво и уместно.
|
1 2 3 4 |
#diag { background-image: linear-gradient(45deg, #cde, #00f, #207cca, #cde, #7db9e8); height: 300px; } |
Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная - как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:
|
1 2 3 |
#soft-percent { background-image: linear-gradient(to top, #f00 20%,#ffc4ee 50%, #000 80%); } |
Тот, кто работал с настройкой градиента в Photoshop должен заметить очень много параллелей в таком подходе. Там для каждого маркера в можно задать как раз позицию в процентах. И, конечно же выбрать цвет.
В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в ... флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.
|
1 2 3 4 5 6 |
#ukraine { background-image: linear-gradient(to bottom, #157cc7,#157cc7 50%,#ff0 50%, #ff0); } #hard-percent { background-image: linear-gradient(to right, #f00 20%,#ffc4ee 20%,#ffc4ee 80%, #000 80%); } |
Посмотреть результат всех предыдущих экспериментов можно здесь:
Посмотреть Simple Gradient
Кроссбраузерный линейный градиент
Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;
Есть еще вариант показать для них изображение с градиентом, например:
|
1 2 |
background-color: #b4e391; background-image: url(images/bg-gradient.jpg); |
Изображение в этом случае должно быть размером, например, 30x1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.
Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий 5.1 - 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.
А для IE до версии 10 существует специальный фильтр.
Результат будет выглядеть так:
|
1 2 3 4 5 |
background: #b4e391; /* Старые браузеры */ background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */ |
Подробнее на 
caniuse.com
Статья о градиентах на CSS Tricks.
Генератор градиента от Colorzilla
Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.
Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator - так вот это прямая ссылка на описанный выше генератор градиента.
CSS Matic Gradients
Еще один отличный сервис для создания градиента - это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.
На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.
Справа от градиента можно выбрать его направление (вправо, вниз, по диагонали) и вид (линейный, радиальный).
Есть поддержка IE младше 10 версии.
Кроме того, здесь есть возможность получить цвет в формате SASS, что очень удобно для тех, кто использует этот CSS-препроцессор.
UI Gradients
Еще один сайт, посвященный градинтам uiGradients. На нем есть ряд приятных двухцветных линейных градиентов, которые вы можете использовать как при дизайне сайта, так и в его верстке.
На главной странице вы увидите слайдер, который позволит выбрать градиент, скопировать 16-ричное значение цветов в нем или получить css-код градиента.
Кроме того, нажав клавишу SHIFT или кнопку внизу слайдера с градиентом, вы увидите ряд блоков с примерами градиентов. Сделать выбор в этом случае будет проще и быстрее.
Нажав клавишу ENTER или кнопку внизу слайдера, вы получите css-код градиента с предложением скопировать его в буфер обмена.
CSS3 Maker
Еще один сервис, на котором вы можете настроить градиент - CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.
Blend - Create and customize beautiful CSS3 gradients.
В заголовке сервиса Blend написано "Создавайте и изменяйте красивые CSS3 градиенты". И так оно и есть.
Вы задаете нужные вам цвета, нажимаете на кнопку "Let's Blend" - и, вуаля, градиент готов.
Справа вверху вы можете выбрать линейный вам нужен градиент или радиальный и получить код с помощью крайней правой кнопки.
Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.
Использование линейного градиента для оформления фона
В примере ниже вы найдете фон в виде градиента с использованием css-переменных.
See the Pen Scotch VHS CSS by BlurSoulx (@BlurSoulx) on CodePen.
Анимация линейного градиента
С помощью css-свойств @keframes и animation вы можете сделать анимацию фона с градиентом для body, например.
See the Pen jLaGqy by Naoya (@nxworld) on CodePen.
Свойство border с использованием линейного градиента
Если для вашей страницы необходимы градиентные рамки (границы), то вы можете использовать один из приведенных ниже вариантов.
See the Pen CSS dashed border using linear-gradient by Naoya (@nxworld) on CodePen.
Здорово! Буду знать, большое спасибо за информацию.
А есть какие-то более сложные и интересные примеры использования градиентов?
Круто! Не знал, что так много всяких сервисов есть для создания градиентов!
Спасибо за ссылки на генераторы градиентов!
Пригодились!
Такая подробная статья.
А как часто сейчас используются градиенты?
Вроде, сейчас в моде плоский дизайн (flat), а не web 2.0?
Сейчас действительно в моде flat-стиль c плоскими изображениями и иконками.
Но градиенты все-таки используют - иногда для фона заднего плана (для body), иногда для кнопок.
В основном, сейчас градиенты стали нюансными, в которых переходы между цветами почти незаметны, но все-таки присутствуют.
Даже в Bootstrap-4 сделали такие классы, хоть и не в стилях по умолчанию.
Интересно и много о градиентах.
А как сделать градиентную рамку вокруг картинки, например?
Интересная статья. Спасибо.
Класс! Я и не знал, что есть столько сайтов, на которых можно градиент создать!
А где применяют градиенты?
Их обычно применяют в качестве фона, для кнопок или ссылок, которые выглядят, как кнопки.
Для того, чтобы часть текста располагалась на подложке (в этом случае градиент обычно бывает полупрозрачным).