От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.
Смотрите урок на сайте статьи.
Основы градиентов
Раньше градиенты нельзя было использовать без изображений, но CSS развивается, и теперь с помощью стилей очень легко создавать надежные градиенты.
В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:
|
1 2 3 |
.box { background: linear-gradient(#000046, #1cb5e0); } |
По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:
Мы можем изменить направление, если добавим новый параметр перед цветами:
|
1 2 3 |
.box { background: linear-gradient(to right, #000046, #1cb5e0); } |
Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).
Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:
|
1 2 3 |
.box { background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan); } |
В этом случае все 4 цвета займут равную площадь, создавая плавный и сбалансированный градиент.
Если необходимо, чтобы один цвет занимал больше места, чем другие, то после цвета можно указать процентное значение:
|
1 2 3 |
.box { background: linear-gradient(to right, #f05053 80%, #e1eec3); } |
И мы получим:
Радиальные градиенты
Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.
|
1 2 3 |
.box { background: radial-gradient(#fdbb2d, #22c1c3); } |
Радиальный градиент растягивается до родительского блока, поэтому этот прямоугольник заканчивается эллипсоидным градиентом. Градиент можно ограничить, чтобы его форма не зависели от пропорций родителя. Для этого необходимо добавить ключевое слово circle:
|
1 2 3 |
.box { background: radial-gradient(circle, #fdbb2d, #22c1c3); } |
Можно указать источник радиального градиента. Например, чтобы он начинался в верхнем левом углу родителя.
|
1 2 3 |
.box { background: radial-gradient(circle at top left, #fdbb2d, #22c1c3); } |
Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.
Реальное применение
Где же можно использовать градиенты таким интересным образом?
1. Перекрывающий баннерный слой
Пример перекрытия, когда градиент слегка прозрачный (с помощью rgba значений) и расположен поверх фото.
Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:
|
1 2 3 |
.hero { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url(//bg.jpg); } |
Результат:
2. Градиент на тексте
Градиент на тексте – крутой эффект, но он не полностью поддерживается. Вместо этого мы используем свойство background-clip (и префиксную версию -webkit-background-cli), которое является хаком, но отлично работает.
Сначала берем текст (h1) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:
|
1 2 3 4 5 6 7 8 |
h1 { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; } |
3. Градиентные рамки
Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:
Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.
|
1 2 3 4 5 |
.card1 { border: 5px solid transparent; border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d); border-image-slice: 1; } |
Результат:
У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.
Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас):
|
1 2 3 4 5 6 7 8 |
.card2::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; } |
Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div.
Далее (фух, в этот раз много шагов) мы добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.
Наконец, применяем нашего друга background-clip к родителю, но в этот раз со значением padding-box. Так div будет залит до края рамки, но не далее.
Последний способ не совсем рамка, но эффект похож.
Есть и третий способ, на box-shadow. Советую посмотреть Border-gradient mixin от John Grishin на сайте CodePen.
Заключение
Вот и все! Этот пример CSS градиентов показал вам, с чего начать, а также, как использовать градиенты в вебе. Если видели другие креативные способы применения в сети, оставляйте их в комментариях.
Автор: Adi Purdila
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
