Градиентный текст
Для создания эффектных текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Ниже рассмотрим два способа добавления градиента к тексту, а также их плюсы и минусы.
Использование mix-blend-mode
Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.
Перед применением этого метода текст надо обернуть в какой-нибудь элемент (
, , , и др.) и установить для него родителя. Мы сделаем такую структуру: в качестве родителя; для текста.
Градиентный текст
Теперь для устанавливаем желаемый градиент через свойство background , а для ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).
Пример 1. Свойство mix-blend-mode
Градиентный текст Градиентный текст
Результат данного примера показан на рис. 1.
Рис. 1. Градиентный текст
Минусы
- Метод годится только для белого фона веб-страницы, в остальных случаях градиент будет виден не только на тексте.
- К тексту добавляется дополнительный родительский элемент.
- Не поддерживается в браузерах IE и Edge. Однако в связи с переходом Edge на движок Chromium скоро начнёт поддерживать.
Плюсы
- Градиентом легко управлять через стили.
- Вместо градиента можно подставить изображение, заменив linear-gradient на значение url(image/bg.png) .
Использование -webkit-background-clip
Нестандартное свойство -webkit-background-clip со значением text позволяет установить цвет фона, в том числе градиент или картинку, только для текста. Градиент теперь применяем непосредственно к текстовому элементу ( в нашем случае) и включаем свойство -webkit-background-clip , а также -webkit-text-fill-color со значением transparent .
-webkit-text-fill-color нужен для того, чтобы убрать исходный цвет у самого текста, без этого свойства метод работать не будет (пример 2).
Пример 2. Свойство -webkit-background-clip
Градиентный текст Градиентный текст
Результат данного примера показан на рис. 2.
Рис. 2. Градиентный текст
Минусы
- Мы используем нестандартные свойства, работу которых никто не гарантирует в будущем.
- Не поддерживается браузером IE.
Плюсы
- Градиентом легко управлять через стили.
- Вместо градиента можно подставить изображение, заменив linear-gradient на значение url(image/bg.png) .
- Поддерживается браузером Edge.
- Метод годится для любого фона веб-страницы.
- Не используются дополнительные элементы.
Таким образом, для фона веб-страницы, отличного от белого, подходит исключительно второй метод. Если же у вас белый цвет фона, то лучше использовать первый метод, поскольку в нём применяются стандартные свойства, которые будут поддерживаться браузерами и в дальнейшем.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Позиционирование элементов
- Как добавить иконку сайта в адресную строку браузера?
- Ссылки
Как сделать переливающийся текст в html
Вы можете использовать свойство CSS background-clip и background-image в сочетании с linear-gradient , чтобы создать переливающийся текст в HTML.
Например, следующий код создаст текст, который переливается от красного до синего цвета:
h1 background: linear-gradient(to right, red, blue); -webkit-background-clip: text; background-clip: text; color: transparent; > Переливающийся текст
Здесь мы установили фоновое изображение как линейный градиент, который идет от красного до синего цвета с помощью linear-gradient . Затем мы применили свойство background-clip к тексту, чтобы оно совпадало с фоном и стало переливаться в соответствии с ним. Свойство color было установлено на transparent , чтобы сделать текст невидимым и позволить фону показаться внутри текста.
Обратите внимание, что это свойство не поддерживается во всех браузерах. На сайте Can I use можно проверить реализовано ли данное свойство в конкретном браузере.
Переливающийся текст на CSS
Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.
HTML:
CSS:
font-size : 40px ;
line-height : 50px ;
font-family : Verdana, sans-serif ;
font-weight : 900 ;
position : relative ;
background : white ;
overflow : hidden ;
text-transform : uppercase ;
text-align : center ;
.pouring:before <
position : absolute ;
filter : blur ( 10px ) ;
width : 100% ;
height : 100% ;
mix-blend-mode : screen ;
background-image : repeating-linear-gradient ( -45deg, transparent, transparent 1em, #BFE2FF 1em, #337AB7 50% ) , repeating-linear-gradient ( 45deg, #337AB7, #337AB7 1em, #FFF 1em, #BFE2FF 50% ) ;
background-size : 3em 3em, 2em 2em ;
animation-name : ani ;
animation-duration : 10s ;
animation-timing-function : linear ;
animation-iteration-count : infinite ;
animation-direction : alternate ;
@keyframes ani <
background-position : 0 0 ;
background-position : 100% 0 ;
@media (max-width:690px) <
Нравится 6
В закладки
- Опубликовано: 02.09.2019
- Рубрики: Тексты, ссылки и кнопки — простые решения
- Метки: CSS
- 34858 просмотров
Смотрите также:
Заголовок, перекрывающий блок с рамкой
Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS
SVG фильтры для создания эффекта дрожания
SVG фильтры, которые заставляют дрожать любые элементы сайта
Кнопка Play / Pause
Анимированная кнопка воспроизведения / паузы на jQuery
Добавить комментарий:
Ваш комментарий отправлен!
Комментарии:
Константин: 29.08.2023 в 23:01
а можно ли сразу несколько цветов сделать или только две
Alexander: 30.08.2023 в 10:41
Поменяйте repeating-linear-gradient
Мастурбек: 24.09.2022 в 21:52
Если фон не черный или белый, а задается по хекс коду (#151719, например), не получается сделать цвет фона текста таким же, как цвет фона самой страницы. Как пофиксить?
Alexander: 27.09.2022 в 10:50
Текст ставим белый, а mix-blend-mode — multiply
Жасмин: 31.01.2022 в 23:32
Я вас люблю.Спасибо Вам за все!❤
Vladimir: 13.12.2021 в 11:14
Здравствуйте
А как сделать чтобы фон было видео?
И на нем данный CSS код с переливающимся текстом
Alexander: 13.12.2021 в 11:19
Общий контейнер ставится в relative, а текст накладывается через absolute;
Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.
Женя: 09.01.2021 в 16:32
Как сделать фон прозрачный вообще только текст чтобы был
Alexander: 09.01.2021 в 17:29
Не понял, какой фон?
Сейчас фон блока — белый, фон текста переливается.
Наталья: 02.09.2020 в 17:01
а если фон не белый?? Черный фон не получается сделать..
Alexander: 02.09.2020 в 17:25
Заменяем / добавляем
.pouring < background: #000; color: #fff; >.pouring:before
Градиент для текста
Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.
Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.
Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством
-webkit-text-fill-color: transparent , которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.
Пример 1. Градиентный текст
Градиентный текст
@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic); .gradient-text