Градиент для текста
Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе 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
Как сделать градиент текста в css
Для создания текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Рассмотрим один из способов как это можно сделать:
Исходный HTML файл:
Используем градиент для текста
h1 /* настройки самого шрифта, размер, начертание, верхний регистр всех символов */ font-size: 100px; font-weigth: bold; font-family: sans-serif; text-transform: uppercase; /* линейный градиент, слева на право, 3 цвета */ background-image: linear-gradient(to right, #4158D0 0%, #C850C0 46%, #FFCC70 100%); /* обрезаем фон по тексту */ -webkit-background-clip: text; /* меняет цвет текста заголовка на прозрачный что бы можно было увидеть градиент*/ -webkit-text-fill-color: transparent; > Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью следующих CSS свойств:
- color: transparent; – задает прозрачный цвет шрифта.
- background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image .
- background-image: linear-gradient или background-image: radial-gradient – задает градиент.
Свойство background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- .
Как сделать текст градиентом — простой CSS-трюк
C помощью двух свойств можно сделать градиентом любой текст на странице. А ещё заливка меняется в зависимости от ширины экрана!
Прежде чем разбираться, как сделать текст градиентом, посмотрим на результат. Вот что мы получим в итоге:
See the Pen CSS Gradient text effect by Pochemuta (@pochemuta) on CodePen.
Для удобства настроим внешний вид и поведение родительского элемента.
body
Затем стилизуем сам заголовок:
На всякий случай прописываем запасной цвет — background-color: #2AA5A0. Даже если градиент не сработает, текст не потеряется на фоне.
Вот так выглядит промежуточный результат:
Градиент есть, градиентного текста пока нет
Теперь добавляем немного магии, чтобы получить градиентный текст:
Осталось понять, что происходит:
- свойство -webkit-background-clip: text оставляет градиент только под текстом;
- свойство -webkit-text-fill-color: transparent делает цвет текста прозрачным.
Фактически текст не становится градиентным. Однако через него теперь виден градиент, то есть задачу мы решили.
Вот ещё пример того, как можно использовать те же свойства. Раскомментируйте text-shadow, поменяйте radial-gradient на linear-gradient — эффекты будут заметно отличаться.
See the Pen CSS Gradient text effect-shadow by Pochemuta (@pochemuta) on CodePen.
Поддерживаются все современные браузеры. Исключение — Internet Explorer. Но пользоваться -webkit-text-fill-color нужно с осторожностью. Это нестандартное свойство, поведение которого может измениться в будущем.
Поддержка выглядит неплохо, но есть нюансы
Больше интересных материалов:
- CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
- Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
- Как стать фронтенд-разработчиком в 2021 году: дорожная карта