Градиент CSS. Плавный переход от одного цвета к другому

Здравствуйте уважаемые начинающие веб-мастера. Снова Оригинальный эффект CSS.

В этой статье я расскажу, как сделать фоновый цвет переходящим от тёмных оттенков к более светлым, а так же, от одного цвета к другому.

Называется такое действие — градиент, и так как по сути оно является фоновым изображением, то исполняется свойством background принимающим два значения:

1. linear-gradient — переход цвета от одного края или угла, к другому.

2. radial-gradient — переход цвета от центра к краям.

Записывается следующим образом:

background: -moz-linear-gradient(top, #ff0000, #ffcfcf);

Ниже, на примере, разберём подробно каждый элемент этой записи.

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

Ставиться префикс в начале значения, и начинается с тире.

-moz-linear-gradientзначение для Mozilla Firefox 3.6 + ;
-webkit-linear-gradientзначение для Chrome 10 +, Safari 5.1 +, IOS 5+,  Android 4+ ;
-o-linear-gradientзначение для Opera 11.10 + ;
-ms-linear-gradientзначение для IE10 + ;

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

Пример:

Двухцветный градиент css

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
#gradient{
background: #ff0000;
background: -moz-radial-gradient(center, ellipse cover, #ff0000, #ffcfcf);
background: -webkit-linear-gradient(top, #ff0000, #ffcfcf);
background: -o-linear-gradient(top, #ff0000, #ffcfcf);
background: -ms-linear-gradient(top, #ff0000, #ffcfcf);
width: 600px;
height: 400px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="gradient"></div>
<//body>
</html>

Это самый простой, двухцветный градиент. Разберём подробно значения свойства background

В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.

Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.

Затем, в круглых скобках:

top — направление от которого начинается первый цвет (может быть bottom, left, right)

#ff0000 — через запятую первый цвет; Красный цвет

#ffcfcf — через запятую второй цвет; 37

У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.

Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:

bottom right — от правого нижнего угла к левому верхнему;

bottom left — от левого нижнего к правому верхнему;

top right — от правого верхнего к левому нижнему;

top left — от левого верхнего к правому нижнему;

Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)

#gradient{
background: #ff0000;
background: -moz-radial-gradient(center, ellipse cover, #ff0000, #ffcfcf); 
background: -webkit-radial-gradient(center, ellipse cover, #ff0000, #ffcfcf);
background: -o-radial-gradient(center, ellipse cover, #ff0000, #ffcfcf);
background: -ms-radial-gradient(center, ellipse cover, #ff0000, #ffcfcf);
width: 600px;
height: 400px;
border: 1px solid #333;
}

Градиент css

А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)

Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.

#gradient{
background: #ff0000;
background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%);
background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%);
background: -o-radial-gradient(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005);
background: -ms-radial-gradient(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%);
width: 600px;
height: 400px;
border: 1px solid #333;
}

Радиальный градиент css

Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.

Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).

Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.

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

Подбор цветов

В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.

В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.

В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перекур

— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!

Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!

Выпадающее меню средствами CSS < < < В раздел > > > Как сделать тень для текста, картинки, блока
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

8 комментариев на «Градиент CSS. Плавный переход от одного цвета к другому»

  1. stariс говорит:

    В фотошопе то Алиса легче сделать, тому кто им владеет, но картинка получается в любом случае тяжелее кода в десятки раз, т.е. скорость загрузки больше. У кого много денег на раскрутку на это внимания не обращают — ссылками продавливают, ну а нам веб-работягам приходится этот показатель учитывать. И он здорово действует. Я даже маркеры для списков на css пишу, чтоб картинками не перегружать страницы.

    Эффект плавного перехода цвета можно реализовать средствами анимации css, или на JavaScript. Я поклонник css. Вот тут на четвёртой картинке солнце встаёт и садится и соответственно меняется цвет неба. При желании можно сделать любой плавный переход любого цвета в любой последовательности и направлении.

  2. Алиса говорит:

    Отличная статья!
    Спасибо за ражжевку
    то что вы тут показали проще в фотошопе сделать и подставить на бэк просто — зачем же ссс тут юзать

    но вот вопрос.. давно мечтаю сделать на бекграунде сайта эффект плавного перелива цвета (как на Windows 8 когда строится новый профиль пользователя)
    но не статика как в вашей статье.. чтобы цвета переходили из одного в другой динамически

  3. Alex говорит:

    THE BEST!!!
    СПАСИБО!!!

  4. Вадим говорит:

    Спасибо Вам за помощь в возникшем вопросе, все доступно и понятно! Успешного Вам развития!!!

  5. starik говорит:

    Рад что помог. Если что — спрашивайте.

  6. Виталий говорит:

    Огромное спасибо! Всё доступно и понятно)

  7. starik говорит:

    И Вас с Новым Годом! Желаю Вам творческих успехов, огромного трафика и всего того чего хочется. Побольше и побыстрее.

  8. Юрий говорит:

    Спасибо за статью! Вы молодец! Еще раз СПАСИБО! С уходящим годом!

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

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