Добавьте красивые градиенты на свой сайт или в приложение
Чаще всего 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;
}
Веселое упражнение
Попробуйте использовать вышеупомянутые концепции, чтобы стилизовать панель навигации с градиентом, как показано ниже:
Решение
Решение доступно здесь.
Спасибо за прочтение! Удачного стайлинга!