Как сделать градиент текста в 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
Главная СтатьиГрадиентная заливка текста средствами CSS
Поделиться в соцсетях:
Градиентный текст становится все более популярным элементом в веб-разработке. Раньше для реализации градиентного текста использовали статические изображения, однако теперь это можно легко сделать с помощью CSS.
В примере ниже создадим несколько текстовых элементов на темном фоне и средствами CSS добавим им градиентную заливку:
Как работает градиентный текст
Градиентный текст создается с помощью нестандартного набора нескольких свойств CSS, некоторые из которые имеют вендорный префикс -webkit- . А поскольку большинство браузеров в основном основаны на Хроме, градиентный текст имеет довольно широкую поддержку во всех современных веб-браузерах. Браузеры, не поддерживающие данные правила, их просто проигнорируют.
Набор свойств для градиентного текста:
.text
background-image — задаем градиент, который хотим применить к тексту
-webkit-text-fill-color — делаем цвет текста прозрачным
-webkit-background-clip — обрезает фоновое изображение по контуру текста. Таким образом фон будет только в том месте, где находится текст
-webkit-box-decoration-break — свойство, позволяющее градиенту распространяться на несколько строк
Градиент для текста
Чтобы применить градиентную заливку цвета для текста, сперва нужно сделать градиент для фона:
.text-gradient < // color: linear-gradient(to right, #e30e3c, #028e4a); // так не работает background: linear-gradient(to right, #e30e3c, #028e4a); >Затем нужно обрезать фон, используя текст в качестве обтравочной маски, и скрыть этот текст:
.text-gradient
.text-gradient < // для старых браузеров просто цвет текста (IE11-) color: #028e4a; // для современнных бопузеров - градиент @supports (--css: variables) < background: linear-gradient(to right, #e30e3c, #028e4a); color: transparent; -webkit-background-clip: text; background-clip: text; >>Такой способ позволяет применять заливку цвета градиентом для отдельных слов или нескольких строк текста. Вот пример:
Текст с CSS градиентом
Что делать, если дизайнер нарисовал текст заголовка с красивой градиентной заливкой? Обычно такой текст делается картинкой.
Получаем результат максимально похожий на дизайн, но сильно проигрываем в гибкости. Как хочется все-таки сделать надпись текстом… Возможно ли это? Иногда, да.
Вот такие рисунки вполне можно кроссбраузерно сделать текстом:
Все это чистый CSS без Javascript и Flash. Можно использовать любой шрифт и изменять его размер. Как это делается?
Все очень просто. Нам понадобится картинка — 1-пиксельный PNG-градиент с альфа-прозрачностью. Все что нужно — поместить ее над текстом:
Для размещения градиента понадобится пустой
CSS Gradient Text
Ключевой момент — h1 < position: relative > и h1 span
h1 < font: bold 330%/100% Georgia, "Century Schoolbook L", Serif;; position: relative; color: #464646; >h1 span
- IE 7-8
- Firefox 3+
- Opera 9.5-10
- Safari 4
- Chrome
А что с IE6?
Картинка-градиент наверняка будет в формате png24.
Поэтому, если ты все еще поддерживаешь IE6 (мои соболезнования…), то можно использовать прием PNG и прозрачность в IE6.
Используем JQuery (для любителей семантики)
Если тебе мешает жить пустой тег в заголовке, можно использовать JavaScript, который будет динамически добавлять этот тег. Вот пример использования JQuery:
Используем before (тоже для любителей семантики)
Update. Чтобы избавится от левого спана, можно юзать псевдоэлемент before:
h1:before
Только не забудь, что такое решение требует еще лекарства для IE6-7.
Текстуры
Область применения приема не ограничивается градиентом. Если сильно постараться, можно применить этот трюк с фоновыми текстурами. Смотри, вот пример шаблона зебры. Так что, будь креативным!
Ограничения:
- Этот прием подходит только для элементов со сплошным цветом фона. Цвета градиента (PNG изображения) должны быть того же цвета, как фон.
- Если текст будет в несколько строк, он может выйти за пределы картинки-градиента. Это нужно учитывать (например, растягивать span и репитить картинку).
Материал
- CSS Gradient Text Effect
По теме
- Градиент: CSS3 против CSS2 + картинка
- Контур для текста на CSS
- Эффект отражения текста на CSS
- Тень для текста (кроссбраузерное решение)
- Нестандартное подчеркивание
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения