|
Как добавить градиент к тексту с помощью CSS
|
|
| Kosten | Понедельник, 22 Июня 2020, 23:55 | Сообщение 1 |
| Чтобы добавить наложение градиента к текстовому элементу, нам нужно установить три различных свойства CSS для текста, который мы хотим стилизовать.
Как работает цвет градиента текста CSS?
В CSS нет выделенных цветовых свойств градиента текста. Вместо этого мы должны использовать комбинацию свойств для достижения цветового градиента текста. Принцип градиента цвета текста CSS основан на свойстве цвета фона элемента HTML , которое мы будем использовать в качестве маски для текста . Цвет фона элемента HTML можно легко установить на градиент, используя свойство -webkit-linear-gradient В CSS. С парой дополнительных свойств мы замаскируем текст внутри элемента в цвет градиента фона.
Поскольку мы маскируем текст внутри элемента HTML в цвет фона элемента, фон элемента становится прозрачным . Это означает, что элемент HTML, содержащий текст цвета градиента, не может иметь одновременно заданный цвет фона. Если вам нужно создать элементы, содержащие градиентный текст определенного цвета фона (например, кнопки), вам нужно будет обернуть элемент родительским элементом, для которого будет установлен цвет фона. Чтобы узнать больше о градиентном тексте с цветом фона, посмотрите наши продвинутые примеры.
background-image: gradient
background-clip: text
text-fill-color: transparent
Шаг 1: Добавьте градиент в качестве фона
В этом примере мы будем использовать линейный градиент, который можно нарисовать следующим образом:
CSS
Код .gradient-text {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
Чтобы градиент покрывал всю ширину и высоту вашего текстового поля, установите background-size: 100%, что я и сделал в этом примере.
Шаг 2: Обрезка фона для текста
На данный момент у нас есть наш градиент на заднем плане, где текст отображается поверх него.
Следующее, что мы хотим сделать, это настройка background-clip: text. Это сделает только фон, где есть текст. Если вы проверите это, то будет казаться, что ваш градиент полностью исчез, потому что текст по-прежнему отображается, а слой градиента скрыт под ним.
Вот почему мы должны установить text-fill-color для transparent. Это удалит заливку из текста, снова делая градиент видимым.
Наложение градиента текста
See the Pen
Gradient Text CSS by Kocsten (@kocsten)
on CodePen.
Далее:
Шаг 3: Добавление запасных вариантов
Градиенты в виде фоновых изображений, обрезанных поверх текста, поддерживаются не всеми браузерами, поэтому важно добавить запасные варианты. Мы можем сделать это, добавив background-color свойство к тексту.
CSS
Код .gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
Также имейте в виду, что не все градиенты поддерживаются одинаково. Например, в некоторых браузерах конические градиенты не будут отображаться. В этих случаях также возможно добавить линейный градиент как запасной вариант к коническому градиенту.
CSS
Код .gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(#f3ec78, #af4261);
background-image: conic-gradient(#f3ec78, #af4261);
}
В этом примере текст будет иметь конический градиент в качестве наложения. Если это не сработает, он покажет линейный градиент. А в браузерах, где линейные градиенты также не поддерживаются, текст будет отображаться как цвет фона.
Это также означает, что если вы хотите добавить фактический фон к тексту, вам нужно добавить обертку к тексту.
HTML
Код <h1 style="background-color: black;">
<span class="gradient-text">Этот текст будет иметь градиент сверху</span>
</h1>
Далее:
Красивое наложение градиента текста
See the Pen
Gradient Text Overlay by Kocsten (@kocsten)
on CodePen.
Далее идет второй вариант:
Радужная текстовая анимация при наведении
See the Pen
Rainbow text hover animation by Kocsten (@kocsten)
on CodePen.
Далее:
Создать наложение градиента текста
See the Pen
Gradient Text Overlay by Kocsten (@kocsten)
on CodePen.
Если (текстовые) градиенты являются большой частью вашего брендинга, вы можете разделить эту функцию на две части: класс, который отображает ваш градиент как обычный фоновый рисунок, и другой класс для закрепления любого фона в этом тексте.
Градиент:
Код .gradient-brand-primary {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
Отсечение текста:
Код .gradient-text {
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
Это позволяет вам легко делать две вещи:
1. Добавьте один и тот же градиент или шаблон как в текст, так и в качестве фона для обычных элементов.
2. Создавайте различные наложения текста без необходимости повторять свойства отсечения.
На этом все!
| | Страна: (RU) |
| |
| Kosten | Среда, 24 Июня 2020, 00:20 | Сообщение 2 |
|
| Чтобы отобразить градиент для данного шрифта вместо сплошного цвета, вам нужно будет использовать некоторые -webkit-свойства с префиксами старой школы. Эта смесь -webkit- специфического CSS и общего градиентного фона была обнаружена десять лет назад, но остается лучшим способом получить чистый CSS-фон, даже с пользовательскими шрифтами. Обратите внимание, что несмотря на -webkit префикс Firefox по-прежнему правильно отображает градиентный шрифт.
HTML
Код <h2 class="gevadienu-usinug">
ZorNet.Ru — сайт для вебмастера
</h2>
CSS
Код .gevadienu-usinug {
background: linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
С такими сложными шрифтами, как это ни удивительно, у нас есть довольно простой CSS-хак для создания градиентного текста.
| | Страна: (RU) |
| |
| Kosten | Среда, 24 Июня 2020, 00:39 | Сообщение 3 |
|
| Градиентный текст при наведении
Некоторое время я искал, как создать эффект перехода при наведении градиента на текст, но не смог найти решение. Поэтому здесь я использую режим смешивания для отображения текста. Тогда у div позади него будет градиент, где установлен div на width: 0%, затем на hover width: 100%, чтобы он выглядел так, как будто к тексту применен градиент.
HTML
Код <div class="outer"> <div class="bg"> <div class="inner"> <h1>ZorNet.Ru — сайт для вебмастера</h1> </div> </div> </div>
CSS
Код .outer {
padding-top: 120px;
width: 850px;
margin: auto;
display: block;
}
.bg {
text-align: center;
width: 0%;
transition: all 0.6s ease-out;
background: #3ebac6 background: -moz-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ebac6), color-stop(50%, #8b539e), color-stop(100%, #e53782));
background: -webkit-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
background: -o-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
background: -ms-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
background: linear-gradient(to right, #3ebac6 0%, #8b539e 50%, #e53782 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3ebac6', endColorstr='#e53782', GradientType=1);
}
.inner {
display: inline-block;
background-color: white;
mix-blend-mode: screen;
padding: 5px;
width: 850px;
}
h1 {
color: black;
font-size: 50px;
letter-spacing: 5px;
}
.outer:hover .bg {
width: 100%;
}
При использовании этого для различной ширины: no-wrap; на h1 и уберите ширину из внешней и внутренней.
Наведите курсор на демонстраций
| | Страна: (RU) |
| |
| Kosten | Среда, 24 Июня 2020, 00:42 | Сообщение 4 |
|
| Градиентный текстовый штрих CSS
See the Pen
Gradient Text Stroke CSS by Kocsten (@kocsten)
on CodePen.
CSS текстовый градиент цвета
See the Pen
CSS3 text gradient color by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Среда, 24 Июня 2020, 00:59 | Сообщение 5 |
|
| CSS текстовый градиент цвета браузера совместимость
Чтобы создать цветовой градиент текста с помощью CSS, мы должны использовать расширение -webkit свойства. Поэтому цветовые градиенты, применяемые к тексту, должны быть совместимы только с браузерами на основе веб-набора. К счастью, в настоящее время самые популярные браузеры без webkit также поддерживают и отображают текст в градиентном цвете. Цветовые градиенты текста CSS будут правильно отображаться в последних версиях следующих браузеров:
- Хром
- опера
- Fire Fox
- Сафари
Чтобы ваш текст выглядел хорошо, даже если некоторые браузеры не поддерживают CSS-градиенты, рекомендуется также использовать стандартное свойство color: CSS в качестве альтернативного решения.
Как сделать цвет шрифта в градиенте CSS
CSS
Код h1 {
font-size: 45px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Также аналогично все можно поставить под класс.
| | Страна: (RU) |
| |
