Как сделать градиент текста в 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-трюк
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 году: дорожная карта
Градиент для текста
Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе 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
Текст с градиентом и тенью
Доброго всем времени суток господа Есть такая штука градиент тексту, и тень. Легко нагуглить и применить. Только вот применить 2 этих решения сразу — лично для меня оказалось проблемой. Есть так же другой глюк, скажем решение..
Текст ..на ура работает в хроме, вот в файерфокс’е — нет (остальное — не важно) Использовал ли кто такую конструкцию? Может ли кто поделиться? p.s. самому изначально хотелось найти решение, в котором градиент поверх цвета (ну там для IE всяких)
Отслеживать
задан 7 фев 2014 в 7:32
1,928 10 10 золотых знаков 54 54 серебряных знака 104 104 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
К сожалению, такое реализуемо на данный момент только в Chrome и Safari.
Если допустимо использование javascript, то вот решение:
Или еще вариант: используйте в качестве фона предварительно подготовленные картинки с текстом, поверх которых располагайте прозрачный текст, чтобы его можно было скопировать.