Добавьте красивые градиенты на свой сайт или в приложение

Чаще всего linear-gradient или radial-gradient используются для добавления градиентного фона. Но знаете ли вы, что мы можем создавать яркие тексты, подчеркивать их, добавлять разделители разделов и стилизовать кнопки, используя градиент?

Лучшим примером является граница градиента, которая появляется вокруг профиля пользователя в историях Instagram.

Вы даже можете создать такой сайт, как мое портфолио, используя различные стили градиента.

TL;DR

Вы можете сослаться на стили, описанные в этой статье, реализованные с помощью React и Sass, здесь.

Основы

В этой статье мы должны создать базовый градиентный фон для украшения элементов. Итак, давайте освежим основы:

Чтобы создать базовый градиент, мы используем методы linear-gradient или radial-gradient, чтобы передать несколько цветов и направление, в котором вы предпочитаете, чтобы цвета текли. Я буду использовать linear-gradient с цветами #fc0142 и #FBD786, чтобы перетекать вправо.

background: linear-gradient(to right, #fc0142, #FBD786);

Мы получаем:

У нас есть более продвинутая настройка, доступная для количества переданных цветов и направления. Вы можете обратиться к официальной документации для получения дополнительной информации.

Градиентный текст

После создания фона, чтобы закрепить фон на тексте, мы используем два магических свойства:

  • background-clip: text;: это закрасит фон в нашем тексте
  • text-fill-color: transparent;: при этом будет удален установленный по умолчанию цвет текста (в большинстве случаев черный), что позволит нам увидеть созданный нами градиентный фон.

Примечание. text-fill-color еще не стандартизирован; следовательно, нам нужно использовать его с расширением -webkit-.

Без этих свойств текст и фон просто перекрывались бы.

Наряду с несколькими стилями:

//HTML
<div class="title"> TITLE </div>
//CSS
.title {
 display:inline-block;
 font-size: 150px;
 background: linear-gradient(to right, #fc0142, #FBD786);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Ta-da!

Градиентное подчеркивание

Для этого нам нужно некоторое понимание псевдоэлементов и классов в CSS. Сначала посмотрим на стили:

//HTML
<div class="gradUnderline">Subtitle</div>
//CSS
.gradUnderline{
 position: relative;
 display: inline;
}
.gradUnderline::after{
 content: ""; 
 position: absolute;
 left: 0; 
 bottom: 0px;
 background: linear-gradient(to right, #fc0142, #FBD786);
 height: 3px;
 width:100%;
}

Подробности

  • ::after: псевдоэлемент, который добавляет содержимое в конец выбранного элемента. В нашем случае мы создаем строку сразу после текста, заключенного в элемент, содержащий класс gradUnderline.
  • content: текст или изображение, добавленное к content, появляется после элемента, содержащего класс gradUnderline. Поскольку нам нужно только добавить строку, мы оставляем это поле пустым. Это удивительное свойство широко используется при реализации всплывающих подсказок.
  • position: используется для определения того, где элемент должен появиться на экране. При использовании absolute для элемента в макете страницы не создается пространство - он как бы вылетает и пролетает над документом. Он соединен с relative в родительском элементе, чтобы установить его положение на странице с помощью таких значений, как top, right, bottom и left. Здесь мы устанавливаем left и bottom на 0, чтобы строка располагалась внизу и начиналась слева от текста. Подробнее см. Здесь.

Вы также можете добавить переход для лучшего эффекта.

Кнопка градиента

Это самый простой в создании элемент. Просто задайте стиль для свойства кнопки background с помощью метода linear-gradient.

//HTML
<button class="gradBtn" type="text"> HELLOOOOOO!! </button>
//CSS
.gradBtn{
  background: linear-gradient(to right, #fc0142, #FBD786);
  /* additional style */
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  letter-spacing: 1px;margin: 25px 0;
  padding: 0 45px !important;color: $text-btn !important;
  border: none !important;
  box-shadow: none;
}

Веселое упражнение

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

Решение

Решение доступно здесь.

Спасибо за прочтение! Удачного стайлинга!