Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов - это некий тренд.
Давайте, для галочки, вспомним, что такое градиент.
Градие́нт (от лат. gradiens, род. падеж gradientis - шагающий, растущий) - вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины {\displaystyle \varphi } \varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении
Градиенты применяются в различных сферах, но нас интересует сфера веб-разработки, где градиенты часто применяются в качестве основного фона сайтов и различных контейнеров, линий, цитат, блоков и даже текста.
Давайте коротко рассмотрим, из чего же состоит классический градиент.
Градиент может быть записан двумя способами:
background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Какую форму записи использовать - решать вам.
В коде, приведенном выше, мы указали три значения свойств background :
Все значения разделяются запятыми, а количество цветов может быть абсолютно любым, от двух до бесконечности. Но, разумеется, в пределах разумного.
Цвет градиента может быть записан любым доступным обозначением:
Вы также можете указывать цвета в процентном соотношении, добавив после цвета % . Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100% .
Вот собственно и все базовые знания, необходимые для применения градиентов в веб-разработке. Но наверняка не все знают, что градиенты можно использовать и в других случая. Ниже о них.
Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background. Давайте рассмотрим на двух примерах:
В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).
Аналогичные действия можно совершать, заменив градиент на ссылку с изображением.
Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use
Такие функции, как linear-gradient() , radial-gradient() , и repeating-linear-gradient() , repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели - паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.
И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.
В итоге вот что у нас получилось,
Результат превосходит все ожидания,
Возьмем обычное изображение
и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа - repeating-linear-gradient
.night-vision-effect {
background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
}
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами . Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter , также для IE9 можно использовать SVG.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
Background: linear-gradient(orangered, gold);
Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Направление можно задавать градусами или ключевыми словами.
Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg - значение по умолчанию; to left = 270deg .
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
Top-left { background: linear-gradient(to top left, purple, crimson, orangered, gold); }
Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg - располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в % , в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара - ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
Light { background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em; } .dark { background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em; }
В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй - определяем цвета градиента и границу между ними, в третьей - задаем положение и размер получившегося изображения. Самая важная часть - размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно:)
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать .
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum , инструментом от Lea Verou .
Помимо обычного linear-gradient можно сделать repeating-linear-gradient - повторяющийся градиент
Примерный код:
Background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em);
К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .
Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти .
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/ . Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Ранее в блоге мы уже рассказывали про и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.
Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia , который является прекрасным примером профессионального использования всех возможностей CSS3.
Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача — потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:
1. Подготовка и контейнер
Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:
* { margin : 0 ; padding : 0 ; border : 0 ; } body { background : #000 ; } |
* { margin: 0; padding: 0; border: 0; } body { background: #000; }
При создании основного контейнера DIV используем произвольные размеры и полное разрешение. Данный четырехугольник представляет собой область наложения градиентов.
В HTML файл пишем код:
Mainblock { background: none; margin: 250px auto; width: 1800px; height: 700px }
2. Слои
Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:
|
Последним в коде расположен текстовый блок. CSS стили при этом следующие:
.mylayer1 { width : 550px ; height : 600px ; float : left ; margin : -15% 0% 0 10% ; transform : skew (45deg , 0deg ) ; } .mylayer2 { width : 400px ; height : 600px ; float : left ; margin : 2% 0% 0% 10% ; transform : skew (45deg , 0deg ) ; } .mylayer3 { width : 270px ; height : 450px ; float : left ; margin : 5% 0% 0% -42% ; transform : skew (-45deg , 0deg ) ; } .mylayer4 { width : 350px ; height : 300px ; float : left ; margin : -22% 0% 0% -10% ; transform : skew (-45deg , 0deg ) ; } |
Mylayer1 { width: 550px; height: 600px; float: left; margin: -15% 0% 0 10%; transform: skew(45deg, 0deg); } .mylayer2 { width: 400px; height: 600px; float: left; margin: 2% 0% 0% 10%; transform: skew(45deg, 0deg); } .mylayer3 { width: 270px; height: 450px; float: left; margin: 5% 0% 0% -42%; transform: skew(-45deg, 0deg); } .mylayer4 { width: 350px; height: 300px; float: left; margin: -22% 0% 0% -10%; transform: skew(-45deg, 0deg); }
Увидеть блоки без фона можно путем добавления в код свойства border.
3. Градиент для фона
Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:
.mylayer1 { background : linear-gradient(to bottom , rgba (229 , 243 , 12 , 0 ) , rgba (243 , 61 , 12 , 0.4 ) , rgba (12 , 99 , 243 , 0 ) ) ; } .mylayer2 { background : linear-gradient(to bottom , rgba (30 , 60 , 55 , 0.2 ) , rgba (75 , 40 , 125 , 0.5 ) , rgba (60 , 20 , 80 , 0.6 ) , rgba (0 , 0 , 0 , 0 ) ) ; } .mylayer3 { background : linear-gradient(to top , rgba (0 , 0 , 0 , 0 ) , rgba (255 , 255 , 255 , 0.3 ) , rgba (255 , 255 , 255 , 0.8 ) ) ; } .mylayer4 { background : linear-gradient(to bottom , rgba (0 , 0 , 0 , 0 ) , rgba (35 , 25 , 65 , 0.5 ) , rgba (140 , 60 , 130 , 0.9 ) ) ; } . |
Mylayer1 { background: linear-gradient(to bottom, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0)); } .mylayer2 { background: linear-gradient(to bottom, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0,0,0)); } .mylayer3 { background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8)); } .mylayer4 { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9)); }.
Вы можете направлять градиент вверх, вниз, влево или вправо, определяя значение цвета с помощью метода rgba(). При этом кроме фона можно определить степень прозрачности блоков.
4. Фоновое изображение
Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон — например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:
body { background : url (http: //мой_сайт/img/dots9.png) repeat fixed center , #000 ; } |
body { background: url(http://мой_сайт/img/dots9.png) repeat fixed center, #000; }
5. Итого
Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):
Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:
В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:
div { -ms-transform: skew (45deg , 5deg ) ; /* for IE 9 */ -webkit-transform: skew (45deg , 5deg ) ; /* for Safari */ transform : skew (45deg , 5deg ) ; } |
div { -ms-transform: skew(45deg, 5deg); /* for IE 9 */ -webkit-transform: skew(45deg, 5deg); /* for Safari */ transform: skew(45deg, 5deg); }
Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.
В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.
Градиент - заполнение выделенной области последовательностью цветовых оттенков с плавными переходами между ними. Градиент используется для отображения плавного перехода между двумя или более указанными цветовыми оттенками. Пример градиента:
Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги - подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.
Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image . Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background .
CSS3 определяет два типа градиентов:
Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.
Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:
Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:
Div { background-image: linear-gradient(black, white); width: 200px; height: 200px; } Попробовать »
При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.
Направление линии градиента может быть определено двумя способами:
Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree - градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова "to top", "to right", "to bottom" или "to left", они представляют собой углы линий градиентов "0deg" "90deg" "180deg" "270deg" соответственно.
Угол можно так же задать с помощью двух ключевых слов, например, to top right - линия градиента направлена в верхний правый угол.
Пример градиента заданного в разных направлениях:
Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to left, black, red); } #two { background-image: linear-gradient(to top left, black, red); } #three { background-image: linear-gradient(65deg, black, yellow); } Попробовать »
Как уже упоминалось, линейный градиент может включать список более чем из двух цветов, разделяемых запятой, браузер будет их равномерно распределять по всей доступной области:
Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to right, red, blue, yellow); } #two { background-image: linear-gradient(to top left, blue, white, blue); } Попробовать »
После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% - конечной.
Div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to top right, blue, white 70%, blue); } #two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);} #three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); } Попробовать »
Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:
Div { margin: 10px; width: 300px; height: 100px; background-color: green; } #one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); } #two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }
CSS-градиент представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента .
Если направление не указано, используется значение по умолчанию — сверху-вниз .
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);
Направление
градиента может быть задано двумя способами:
с помощью угла наклона
в градусах deg , значение которого определяет угол наклона линии внутри элемента.
Div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }
с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.
Div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }
Если направление задано парой ключевых слов, например, to top left , то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
Div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops . Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:
Div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
Div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }
Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
Background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
Div { height: 200px; background: radial-gradient(white, #FFA9A1); }
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .
Div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }
С помощью пары значений, указанных в единицах длины % , em или px , можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.
Div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
Jpg">
В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
Div { height: 200px; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } div { height: 200px; background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); }
Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.
Линейный градиент
Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
Повтор линейного градиента
Background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */
Радиальный градиент
Background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */
Повтор радиального градиента
Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */
За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.
div { height: 453px; background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); background-size: cover; }