Вы здесь: Главная » CSS » Создание градиентов. Линейный градиент

Создание градиентов. Линейный градиент

В CSS3.0 появилась возможность создавать градиенты для элементов, что раньше выполнялось только с помощью изображения, предварительно созданного, как правило, в Photoshop.

Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.

Для того, чтобы применить градиент, нужно использовать свойство background-image или составное свойство background. Основная проблема здесь заключается в том, что свойство это так долго ожидалось верстальщиками, что все браузеры успели создать свой синтаксис для его отображения. Но об этом мы поговорим ниже, а сейчас основным синтаксисом мы будем считать стандартный.

Итак, сначала о линейном градиенте.

Линейный градиент

Подразумевает, как минимум, наличие 2-х значений цвета: начального и конечного. Самая простая запись выглядит так:

Но вы можете задать направление градиента, используя ключевое слово to и само направление: left (влево), right (вправо), top (вверх), bottom (вниз):

Кроме того, задать направление градиента можно в градусах, например, диагональный градиент будет иметь угол 45deg:

Можно задавать и отрицательное значение, тогда градиент "перевернется", т.е. будет направлен в противоположную сторону.

Как вы понимаете, совсем необязательно ограничиваться всего двумя цветами в градиенте. Вы можете добавить их через запятую столько, сколько вам нужно. Вопрос только в том, насколько это будет красиво и уместно.

Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная - как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:

Тот, кто работал с настройкой градиента в Photoshop должен заметить очень много параллелей в таком подходе. Там для каждого маркера в можно задать как раз позицию в процентах. И, конечно же выбрать цвет.

Photoshop редактор градиента

В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в ... флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.

Посмотреть результат всех предыдущих экспериментов можно здесь:


Посмотреть Simple Gradient1

Кроссбраузерный линейный градиент

Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;

Есть еще вариант показать для них изображение с градиентом, например:

Изображение в этом случае должно быть размером, например, 30x1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.

Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий  5.1 - 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.

А для IE до версии 10 существует специальный фильтр.

Результат будет выглядеть так:

Подробнее на linear-gradientcaniuse.com

Генератор градиента от Colorzilla

Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.

CSS генератор градиента

Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator - так вот это прямая ссылка на описанный выше генератор градиента.

colorzilla_ext

CSS Matic Gradients

Еще один отличный сервис для создания градиента - это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.

На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.

cssmatic gradient-generatorСправа от градиента можно выбрать его направление (вправо, вниз, по диагонали) и вид (линейный, радиальный).
Есть поддержка IE младше 10 версии.

Кроме того, здесь есть возможность получить цвет в формате SASS, что очень удобно для тех, кто использует этот CSS-препроцессор.

UI Gradients

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

На главной странице вы увидите слайдер, который позволит выбрать градиент, скопировать 16-ричное значение цветов в нем или получить css-код градиента.

ui_gradient1

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

ui_gradient2Нажав клавишу ENTER или кнопку внизу слайдера, вы получите css-код градиента с предложением скопировать его в буфер обмена.

ui_gradient3

CSS3 Maker

Еще один сервис, на котором вы можете настроить градиент - CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.

CSS3 Maker

Blend - Create and customize beautiful CSS3 gradients.

В заголовке сервиса Blend написано "Создавайте и изменяйте красивые CSS3 градиенты". И так оно и есть.

Вы задаете нужные вам цвета, нажимаете на кнопку "Let's Blend" - и, вуаля, градиент готов.

Blend

Справа вверху вы можете выбрать линейный вам нужен градиент или радиальный и получить код с помощью крайней правой кнопки.

blend2

Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.

Автор: Админ

11 комментариев

  1. Здорово! Буду знать, большое спасибо за информацию.

  2. А есть какие-то более сложные и интересные примеры использования градиентов?

  3. Круто! Не знал, что так много всяких сервисов есть для создания градиентов!

  4. Спасибо за ссылки на генераторы градиентов!
    Пригодились!

  5. Такая подробная статья.
    А как часто сейчас используются градиенты?
    Вроде, сейчас в моде плоский дизайн (flat), а не web 2.0?

    • Сейчас действительно в моде flat-стиль c плоскими изображениями и иконками.
      Но градиенты все-таки используют - иногда для фона заднего плана (для body), иногда для кнопок.
      В основном, сейчас градиенты стали нюансными, в которых переходы между цветами почти незаметны, но все-таки присутствуют.
      Даже в Bootstrap-4 сделали такие классы, хоть и не в стилях по умолчанию.

  6. Интересно и много о градиентах.
    А как сделать градиентную рамку вокруг картинки, например?

  7. Интересная статья. Спасибо.

  8. Класс! Я и не знал, что есть столько сайтов, на которых можно градиент создать!

  9. А где применяют градиенты?

    • Их обычно применяют в качестве фона, для кнопок или ссылок, которые выглядят, как кнопки.
      Для того, чтобы часть текста располагалась на подложке (в этом случае градиент обычно бывает полупрозрачным).

Добавить комментарий для Алина Отменить ответ

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