Вот как применять градиенты в ваших веб-приложениях.
Вы когда-нибудь пытались создавать или применять градиенты в веб-приложении? Ну а если нет, то вы попали по адресу. Эта статья призвана помочь разработчикам интерфейса создавать градиенты следующего уровня с использованием HTML и CSS для своих веб-сайтов.
Градиенты превращают ваш скучный текстовый элемент HTML или фон контейнера во что-то очень веселое и стильное. Это довольно изящный трюк, используемый многими организациями. Если вы мне не верите, зайдите на такие сайты, как Github и Instagram. От применения его к кнопкам призыва к действию до фона вашей текстовой карточки или раскрашивания самого текста — вы можете создавать и применять градиенты практически везде. Поверьте мне! Это добавит много сока на ваш сайт.
Что такое градиент?
Это метод, используемый многими веб-дизайнерами. Если мне нужно описать это в строке, два или более похожих цвета смешиваются, образуя новый цвет.
Типы градиентов
Обычно в CSS есть три типа градиентов, и мы рассмотрим каждый из них один за другим с помощью примеров:
1. Линейный градиент
Как следует из названия, мы разрабатываем линейный градиент как минимум с двумя цветами, которые пересекаются на прямой линии. Он содержит направление и остановки для переходов. Существует несколько способов применения градиентов к вашему веб-элементу.
Синтаксис
Общий синтаксис для создания градиента следующий:
background: linear-gradient( to Direction Color1, Color2);
Значения направления –влево, вверх, вниз, вправо
Значения цвета –шестнадцатеричный код, rgba.
2. Радиальные градиенты
Мы определяем радиальные градиенты с их центром. Два или более цвета выходят из одного центра, образуя круг или эллипс. Поэтому смешение цветов начинается от центра и растет к краям.
Синтаксис
background: radial-gradient(SHAPE SIZE AT POSITION, Color1, Color2);
Значения формы –круг, эллипс
Значения SIZE –центр, дальний угол, угол
3. Конические градиенты
Мы определяем конические градиенты с их центром. Два или более цвета вращаются вокруг центральной точки. Поэтому смешение цветов или переходы вращаются вокруг центра.
Синтаксис
background: conic-gradient(red, orange, yellow, green, blue);
Код
В приведенном ниже примере представлены три наиболее распространенных варианта использования, в которых мы можем применять линейные градиенты к элементам HTML.
- Текст
- Раздел фона
- Фон кнопки
HTML-код
<!-- Text -->
<div>
<text id="textgradient">
Gradient Text In Action
</text>
</div>
<!-- Div Background -->
<div class="background">
<b>
<center>
<Text id="textid">
Gradient Background
</Text>
</center>
</b>
</div>
<!-- Button Background-->
<div>
<Button id="buttonid">
Gradient On a Button
</Button>
</div>
CSS-КОД
#textgradient{
font-size: 55px;
font-weight: bold;
background: -webkit-linear-gradient( 64.5deg, rgba(245,116,185,1) 14.7%, rgba(89,97,223,1) 88.7% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.background{
width:420px;
height:180px;
background-image: linear-gradient( to left top, rgba(245,116,185,1) 14.7%, rgba(89,97,223,1) 88.7% );
}
#buttonid{
margin-top:16px;
font-size:16px;
padding:16px;
color: white;
background-image: linear-gradient( 64.5deg, rgba(245,116,185,1) 14.7%, rgba(89,97,223,1) 88.7% );
}
Код в значительной степени говорит сам за себя. Мы применяем свойство фона к идентификатору или атрибуту класса текстового элемента HTML. Для совместимости с другими браузерами мы используем дополнительные свойства WebKit.
Это все для этого поста. Спасибо, что прочитали мой пост и зашли так далеко.
Если вам понравился этот пост, вы можете прочитать и другие мои посты.
Подпишитесь на Medium, используя мою партнерскую ссылку, чтобы получать удовольствие от всех моих статей, и давайте вместе сделаем этот год годом вашей жизни.
Была ли эта статья полезной для вас? Дайте мне знать в разделе комментариев. Мне бы хотелось узнать ваше мнение о том же.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
