CSS Magic #6. Градиент для текста
Нередко дизайнеры используют градиент для текста, и нам, верстальщикам, приходится все это дело реализовывать. Пока еще не придумано нормальных вариантов сделать градиент для текста, поэтому у нас есть лишь вариант, который поддерживают не все браузеры. Смотрим!
HTML
div class="text">
My gradiented text
div>Самый обычный html-див.
CSS
.text
font-family: sans-serif;
font-size: 50px;
background: linear-gradient(red, yellow);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
>Немного магии. Свойства желательно писать именно в таком порядке — background , background-clip , color . Собственно, основную магию как раз и дает background-clip: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; > Градиент для текста
Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе 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 свойств:
- color: transparent; – задает прозрачный цвет шрифта.
- background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image .
- background-image: linear-gradient или background-image: radial-gradient – задает градиент.
Свойство background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- .