Как использовать CSS градиенты в вебе

Как использовать CSS градиенты в вебе

От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.

Смотрите урок на сайте статьи.

Основы градиентов

Раньше градиенты нельзя было использовать без изображений, но CSS развивается, и теперь с помощью стилей очень легко создавать надежные градиенты.

В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:

Мы можем изменить направление, если добавим новый параметр перед цветами:

Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).

Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:

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

Если необходимо, чтобы один цвет занимал больше места, чем другие, то после цвета можно указать процентное значение:

И мы получим:

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

Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.

Радиальный градиент растягивается до родительского блока, поэтому этот прямоугольник заканчивается эллипсоидным градиентом. Градиент можно ограничить, чтобы его форма не зависели от пропорций родителя. Для этого необходимо добавить ключевое слово circle:

Можно указать источник радиального градиента. Например, чтобы он начинался в верхнем левом углу родителя.

Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Реальное применение

Где же можно использовать градиенты таким интересным образом?

1. Перекрывающий баннерный слой

Пример перекрытия, когда градиент слегка прозрачный (с помощью rgba значений) и расположен поверх фото.

Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:

Результат:

2. Градиент на тексте

Градиент на тексте – крутой эффект, но он не полностью поддерживается. Вместо этого мы используем свойство background-clip (и префиксную версию -webkit-background-cli), которое является хаком, но отлично работает.

Сначала берем текст (h1) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:

3. Градиентные рамки

Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:

Как использовать CSS градиенты в вебе

Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.

Результат:

У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.

Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (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

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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