ГлавнаяОрганизация свадьбыПрименение градиента для создания фона. CSS: Линейный градиент для фона. Объединение градиентов CSS в режиме Background Blend Mode
Применение градиента для создания фона. CSS: Линейный градиент для фона. Объединение градиентов CSS в режиме Background Blend Mode
CSS-градиент
представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
Рис. 1. Линия градиента, начальная и конечная точки и угол градиента
Линейный градиент
создается с помощью двух и более цветов, для которых задано направление, или линия градиента
.
Если направление не указано, используется значение по умолчанию — сверху-вниз
.
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
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% — конечная точка, например:
Радиальный градиент
отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
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);
}
С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.
Мяч
div {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}
Кнопка
.wrap {
height: 200px;
padding: 50px 0;
background: #cccccc;
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
}
Почтовая марка
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
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%); /* Стандартный синтаксис */
5. Комбинация градиента и фонового изображения
За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.
Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов - это некий тренд.
Что такое градиент?
Давайте, для галочки, вспомним, что такое градиент.
Градие́нт (от лат. gradiens, род. падеж gradientis - шагающий, растущий) - вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины {\displaystyle \varphi } \varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении
Градиенты применяются в различных сферах, но нас интересует сфера веб-разработки, где градиенты часто применяются в качестве основного фона сайтов и различных контейнеров, линий, цитат, блоков и даже текста.
Форма записи градиентов в css
Давайте коротко рассмотрим, из чего же состоит классический градиент.
В коде, приведенном выше, мы указали три значения
свойств background
:
1. То, каким будет градиент - linear-gradient
- в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [<угол> | to <позиция>]
, где угол измеряется в deg
, то есть - градус, или вторым способом - указанием позиции от и до
. Например, to top
, to right
, to bottom left
и т.д.
Значение цвета #******
, которым будет начинаться и заканчиваться градиент.
Все значения разделяются запятыми, а количество цветов может быть абсолютно любым, от двух до бесконечности. Но, разумеется, в пределах разумного.
Написание цвета градиентов
Цвет градиента может быть записан любым доступным обозначением:
Hex Color Code - #000000 или сокращением #000;
RGB Color Code - rgb(0, 0, 0);
Color Name - black;
HSL Color Code - hsl(0, 0%, 0%);
Вы также можете указывать цвета в процентном соотношении, добавив после цвета %
. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%
.
Вот собственно и все базовые знания, необходимые для применения градиентов в веб-разработке. Но наверняка не все знают, что градиенты можно использовать и в других случая. Ниже о них.
Градиенты с изображениями
Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background. Давайте рассмотрим на двух примерах:
В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).
Градиент для текста
-webkit-text-fill-color в сочетании с -webkit-background-clip
Примеры:
Аналогичные действия можно совершать, заменив градиент на ссылку с изображением.
Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use
Объединение градиентов CSS в режиме Background Blend Mode
Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:
background-blend-mode
, для смешивания фоновых изображений, градиентов и цветов фона
mix-blend-mode
, для смешивания элементов над другими элементами и, наконец,
isolation
, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.
Давайте немного поговорим о первом.
Такие функции, как linear-gradient()
, radial-gradient()
, и repeating-linear-gradient()
, repeating-radial-gradient()
и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou
продемонстрировала впечатляющие модели - паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.
Спектральный фон
Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background {
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
}
И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.
Создаем плед на css
Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background {
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50% ),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50% ),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50% ), white;
}
В итоге вот что у нас получилось,
Фон сайта с кружочками
Как насчет еще одного, на этот раз с радиальным градиентом:
.circles-background {
background:
radial-gradient(
khaki 40px,
transparent 0,
transparent 100% ),
radial-gradient(
skyblue 40px,
transparent 0,
transparent 100% ),
radial-gradient(
pink 40px,
transparent 0,
transparent 100% ), snow;
background-blend-mode: multiply;
background-size: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
}
Результат превосходит все ожидания,
Эффект ночного видения
Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения.
Возьмем обычное изображение
и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа - 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;
}
Раньше я использовал для украшения страниц моего сайта
подстилающий фон имеющий некоторый контраст по отношению к фону страницы. сейчас
мне захотелось сделать страницы моего сайта более динамичными. Это позволяет
сделать градиентный подстилающий фон. Но как его сделать?
К сожалению, из имеющихся рекомендаций одни не работали, другие работали только
в отдельных браузерах, а другие были громоздки.
Ниже дано подробное описание. Думаю, при необходимости, Вы сможете это повторить
и украсить свой сайт.
Равномерный фон можно легко задать с помощью атрибутовтега "body
", как в нем самом,
так и в таблице стилей.
При использовании для форматировании страниц - таблиц, последние будут
находиться над фоном. А внутри них фот может быть другим, поскольку его можно
определить в свойствах таблицы (тега table
и
сопутствующих ему tbody
, td
,
th
и др). Этот прием расширяет оформительские
возможности при создании страниц.
Но еще красивее когда фон имеет градиент.
Тогда при прокрутке длинных страниц сформированных с помощью таблиц имеющих
размер немного меньше экрана, обрамление вокруг них будет менять цвет при
прокрутке. Создается эффект динамичности страницы.
Старое и простое решение
Но похоже мы забыли простое и заложенное во все современные браузеры решение.
Существует хорошо всем известный тег -
.
Он осуществляет логическое разделение документа, создавая фрагменты внутри
него.
В соответствии со стандартом HTML
3.2 он
предназначен для "задания части страницы или фрагмента текста". Все что лежит
между открывающим и закрывающим элементами этого тега, воспринимается браузером
как один объект. Тег
не форматирует текст, а
только помечает его часть. Вместе с атрибутом "class"
и"style
" , он может задать
параметры теста, только той части документа которая лежит внутри тега
.
Главная особенность тега
то, что он имеет
гибкое позиционирование на странице и он работает со слоями. В
Dynamic HTML
это называют 2,5 мерное пространство.
Но теперь по существу.
Привожу фрагмент кода:
Разбор данного фрагмента:
После тега "body"
следует первый тег
"div"
- открывающий,
которыйописывает подстилающий слой и содержит в своем составе свойство рассматриваемого тега
"style"
с атрибутами:
Position:absolute;
-
абсолютное позиционирование в окне с координатами:
- top:0; left:0; width:100%;
height:100%;
- вверху и слева отступ =0, размер поля 100% по ширине и
высоте (здесь возможны варианты),
Visibility:visible
- дает
команду сделать данный тег div
видимым,
Z-index:-1
- определяет
положение тега div
в так называемом 2,5 мерном
пространстве страницы, как самый нижний.
Следует обратить внимание на атрибут z-index
который, в данном случае, определяет положения участка страницы описанное данным
тегом на -1 слое (здесь может быть любое значение меньшее значений следующих
слоев). Просто для меня подстилающий слой ассоциируется с отрицательным
измерением, и это более наглядно.
Далее следует ссылка на фоновую картинку с градиентом, шириной 2 пикселя и
высотой 500 (у меня в данном случае, хотя может быть и меньше)
растянутый на высоту Вашей страницы.
Следующий тег
"div"
дан для примера организации шапки страницы с помощь этого
тега. Он имеет размеры по ширине страницы, высотой 200 px
и окрашен в указанный цвет.
Влад Мержевич
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image
или универсальное свойство background
, как показано в примере 1.
Пример 1. Градиент
Градиент
Здесь обсценная идиома традиционно начинает прозаический
образ, но языковая игра не приводит к активно-диалогическому пониманию.
Результат данного примера показан на рис. 1.
Рис. 1. Линейный градиент для абзаца
В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.
Для записи позиции вначале пишется to
, а затем добавляются ключевые слова top
, bottom
и left
, right
, а также их сочетания. Порядок слов не важен, можно написать to left top
или to top left
. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
Табл. 1. Типы градиента
Позиция
Описание
Вид
to top
0deg
Снизу вверх.
to left
270deg
Справа налево.
to bottom
180deg
Сверху вниз.
to right
90deg
Слева направо.
to top left
От правого нижнего угла к левому верхнему.
to top right
От левого нижнего угла к правому верхнему.
to bottom left
От правого верхнего угла к левому нижнему.
to bottom right
От левого верхнего угла к правому нижнему.
Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
Для значения top left
и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.
Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent
), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.
Пример 2. Полупрозрачные цвета
HTML5
CSS3
IE 9
IE 10
Cr
Op
Sa
Fx
Градиент
Генезис свободного стиха, несмотря на внешние воздействия,
отталкивает словесный метаязык.
Результат данного примера показан на рис. 2.
Рис. 2. Градиент с полупрозрачными цветами
Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100%
означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.
Пример 3. Градиентная кнопка
HTML5
CSS3
IE 9
IE 10
Cr
Op
Sa
Fx
Кнопка
Результат данного примера показан на рис. 3.
Рис. 3. Градиентная кнопка
За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.
Пример 4. Однотонные полоски
HTML5
CSS3
IE 9
IE 10
Cr
Op
Sa
Fx
Горизонтальные полоски
Типичная европейская буржуазность и добропорядочность
изящно иллюстрирует официальный язык.
Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.
Рис. 4. Фон из горизонтальных полосок
Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.
На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки
, используя CSS
стили.
Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS
, если есть Photoshop
?
На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента
, а на втором – используется градиент. Что смотрится интереснее по дизайну?
Первый вариант
Второй вариант
Ответ очевиден. В первом варианте, из-за более широкой палитры цветов, тяжелее читается текст, да и зрительное восприятие неправильно расставляет акценты. Мы смотрим на верхушки деревьев, но вряд ли это главный посыл дизайнера.
Во втором варианте градиенты используются и в качестве тонирующего слоя, убираются резкие цветовые переходы, задний фон никак не отвлекает от текста.
Демонстрация
.
Photoshop или CSS?
Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop
, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif
файле или градиенты верстать на CSS
?
Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS
уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.
Переходим к написанию кода примера и как всегда начинаем с разметки.
HTML разметка
Тег header
будет служить контейнером для фоновой картинки, а тег div
с классом header_box
– контейнером для двух заголовков.
The Forest
where nature and people
CSS код
В теге header
опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2
. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.
Кроме стилизации текста, в теге header
лежит наш градиент вместе с фоновой картинкой. Свойство cover
растягивает картинку на всю ширину и высоту хедера.
Background-size: cover;
Градиент поверх картинки
Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.
Итак, у нас линейный градиент (linear-gradient)
, тянущийся снизу вверх (to top
), от светлого-зеленого оттенка к темно-зеленому (rgba
и цифры).
Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.
Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.
Height: 95vh;
Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path
. Пара цифр обозначает координаты X
и Y
, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE
и Edge
.
Рис. 1. Линия градиента, начальная и конечная точки и угол градиента
