Здравствуйте уважаемые начинающие веб-мастера. Снова Оригинальный эффект CSS.
В этой статье я расскажу, как сделать фоновый цвет переходящим от тёмных оттенков к более светлым, а так же, от одного цвета к другому.
Называется такое действие — градиент, и так как по сути оно является фоновым изображением, то исполняется свойством background принимающим два значения:
1. linear-gradient — переход цвета от одного края или угла, к другому.
2. radial-gradient — переход цвета от центра к краям.
Записывается следующим образом:
background: -moz-linear-gradient(top, #ff0000, #ffcfcf);
background: -moz-radial-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 + ; |
Вот такой список нам придётся вставлять в селектор элемента, создавая ему градиент, для того, чтобы Ваш очень красивый фон корректно отразился во всех браузерах. Красота требует жертв.
Пример:
Код:
<!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 — через запятую второй цвет; 
У 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;
}
А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)
Объём цвета задаётся от 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;
}
Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.
Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).
Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.
Поэтому я пользуюсь инструментом colorscheme.ru, в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.
В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.
В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.
В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.
Примеры различных вариантов градиента и готовый код, можно найти в шпаргалках Градиент примеры код
Желаю творческих успехов.
Перемена
— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!
Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!
Выпадающее меню средствами CSS < < < В раздел > > > Как сделать тень для текста, картинки, блока
Как делается фоновый цвет;
Прозрачные картинки и прозрачный цвет CSS;
Полезная статья, большое спасибо!
Вот,очень нужный вопрос. Префиксы практически ушли в прошлое и прописывать их не нужно. Всё руки не дойдут взяться и исправить все коды на сайте. Наверно потому, что и вреда-то от префиксов особо нет.
Единственно, где они всё ещё актуальны — это тонкая настройка свойства margin. Мозилла всё ещё чуть отличается в этой позиции от других популярных браузеров. Правда, я ещё не тестил 59.01
За 5 лет не изменилась ситуация с браузерами? Всё так же нужно прописывать свойства отдельно для каждого?
В фотошопе то Алиса легче сделать, тому кто им владеет, но картинка получается в любом случае тяжелее кода в десятки раз, т.е. скорость загрузки больше. У кого много денег на раскрутку на это внимания не обращают — ссылками продавливают, ну а нам веб-работягам приходится этот показатель учитывать. И он здорово действует. Я даже маркеры для списков на css пишу, чтоб картинками не перегружать страницы.
Эффект плавного перехода цвета можно реализовать средствами анимации css, или на JavaScript. Я поклонник css. Вот тут на четвёртой картинке солнце встаёт и садится и соответственно меняется цвет неба. При желании можно сделать любой плавный переход любого цвета в любой последовательности и направлении.
Отличная статья!
Спасибо за ражжевку
то что вы тут показали проще в фотошопе сделать и подставить на бэк просто — зачем же ссс тут юзать
но вот вопрос.. давно мечтаю сделать на бекграунде сайта эффект плавного перелива цвета (как на Windows 8 когда строится новый профиль пользователя)
но не статика как в вашей статье.. чтобы цвета переходили из одного в другой динамически
THE BEST!!!
СПАСИБО!!!
Спасибо Вам за помощь в возникшем вопросе, все доступно и понятно! Успешного Вам развития!!!
Рад что помог. Если что — спрашивайте.
Огромное спасибо! Всё доступно и понятно)
И Вас с Новым Годом! Желаю Вам творческих успехов, огромного трафика и всего того чего хочется. Побольше и побыстрее.
Спасибо за статью! Вы молодец! Еще раз СПАСИБО! С уходящим годом!