Линейные градиенты в CSS и генераторы градиентов

градиенты в CSSГрадиентом называют плавный переход из одного цвета к другому. Когда-то этот прием был достаточно популярен для сайтов в стиле веб 2.0. Помнится, многие дизайнеры применяли яркие градиенты для создания красочных логотипов, дизайнов сервисов и т.п. В настоящее время с помощью CSS3 данную фишку можно реализовать без каких-либо картинок, фотошопа, а используя только стили CSS. Я уже как-то писал про градиентные кнопки CSS3 сегодня поговорим про градиенты чуть более детально.

Линейные градиенты — самая простая реализация. При их создании используется функция linear-gradient(), которая задается как свойство для background-image.  Например:

<style>
    #mygradient {
        background-image: linear-gradient(180deg, red, #000000);
        height: 100px;
    }
</style>
<div id="mygradient"></div>

Вот что в итоге получается.

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

Для функции linear-gradient в самом простом варианте используется 3 параметра. Первый задает угол градиент в градусах (в примере выше — 180deg; по умолчанию, если не указывать, также будет 180). Второй и третий параметр — соответственно цвета с какого начинается и заканчивается градиент (в примере от красного red к черному #000000).

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

<style>
    #mygradient {
        background-image: linear-gradient(180deg, gold 40%, #000000 95%);
        height: 100px;
    }
</style>
<div id="mygradient"></div>

То получится такая картинка:

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

В этом случае золотой цвет (gold) переходит в черный (#000000) начиная с 40% блока и заканчивая 95%. То есть до 40% — это обычный золотой цвет, как и после 95% черный.

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

<style>
    #mygradient {
        background-image: linear-gradient(180deg, gold 40%, #000000 80%, grey 80%, grey 90%, green 90%);
        height: 100px;
    }
</style>
<div id="mygradient"></div>

Результат:

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

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

<style>
    #mygradient2 {
        background-image: linear-gradient(90deg, #ACB87D, #ACB87D 25%, #6B5B49 25%, #6B5B49 50%, #B89C7D 50%, #B89C7D 75%, #656C49 75%, #656C49);
        height: 10px;
		width: 450px;
    }
</style>
<div id="mygradient2"></div>

градиенты в CSS

Кроме линейных градиентов есть еще радиальные. Для них используется функция radial-gradient(). При этом градиент распространяется из центральной точки по круговому или эллиптическому принципу. Выглядит приблизительно так:

Радиальные градиенты в CSS

Описание и примеры реализации поищите тут + можно нагуглить много других статей по теме  (их хватает). Синтаксис там несколько иной, если понадобиться, разберетесь. Однако, думаю, чаще будете сталкиваться именно с линейными градиентами.

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

Я, в принципе, постарался максимально просто объяснить как формируются градинеты, но понимаю, что не всем это легко воспринимать. Для таких пользователей есть специальные сервисы создания градиентов. В подборке генераторов CSS3 и HTML5 вы могли уже встречать подобные инструменты. В них нужно лишь определить разные параметры , а на выходе получаете готовый код. Все максимально просто и доступно.

CSS Gradient Generator (HTML Generator)

CSS Gradient Generator (HTML Generator)

Здесь есть выбор цветов, типа градиента, ползунки для настройки тех или иных параметров. Управление генератором интуитивно понятное. Внизу найдете HTML и CSS код для вставки на сайт.

CSS Gradient Generator (CSS Portal)

CSS генератор градиентов (CSS Portal)

Отличительными фишками второго генератора я бы назвал, во-первых, наличие парочки цветовых решений градиентов по умолчанию, а во-вторых, комментарии в CSS коде. Из них вы можете понять, какая строка кода к какому браузеру будет применяться. Как видите, стандартная функция linear-gradient дополняется определенными вариантами для разных браузеров. Сервис также поддерживает и радиальные градиенты.

CSS Gradient Generator (Virtuosoft)

CSS Gradient Generator (Virtuosoft)

Данный инструмент содержит много разных мелочей и функций, которых нет в предыдущих двух. Настройка чуть более продвинутая. Не будут детально вникать в нюансы, сами потестируете. Единственное, что при копировании CSS в коде имеется зашифрованный фрагмент кода с помощью base64 (что немного странно). Зато есть поддержка iOS.

Вообще, конечно, возможности CSS3 по сравнению с тем простым CSS, что я учил когда-то, мягко говоря, поражают. Признаться, изначально хотел поговорить про формы CSS, но там вопрос еще куда более сложный, поэтому пришлось остановиться на градиентах. Если сравнивать CSS градиент с использованием картинки (пусть даже GIF и PNG) то он является более быстрым методом. Возможно, у вас будет что добавить по теме — пишите в комментариях.


Оставить комментарий
для статьи Линейные градиенты в CSS и генераторы градиентов