Как сделать цвет текста градиентом css
Перейти к содержимому

Как сделать цвет текста градиентом css

  • автор:

Градиент у текста | CSS

Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.

Картинка прозрачна в тех местах, где нет текста

Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).

Разноцветный градиент

Переливающееся слово

 .dva < background: linear-gradient(green, red); >.dva h1 Переливающееся слово

Картинка как фон у текста

Изображение внутри буквы

 .dva < background: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) 100% 50%; background-size: cover; >.dva h1 Изображение внутри буквы

Внимание: примечателен пример из комментария 11 после статьи.

Градиент у текста для остальных браузеров

Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.

 .dva < position: relative; >.dva:after 
Образец

Заполняющийся текст

 .dva < position: relative; >.dva:after < content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%; background-size: 100% 100%; >.dva:hover:after 
Образец

Пробегающий по буквам блик

На мой вкус, лучше анимацией сделать как у Сбербанка.

 .dva < position: relative; >.dva:after < content: ""; position: absolute; top: 0; left: -2em; width: 100%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%; background-size: 2em 100%; transform: skewX(-50deg); >.dva:hover:after 
Образец

Градиент для текста на CSS

Градиент для текста на CSS

Градиент — это плавный переход от одного цвета к другому. В веб-дизайне мы часто сталкиваемся с фоновыми и интерфейсными градиентами и намного реже с текстовыми градиентами. Сегодня мы разберем, как сделать текст градиентом на чистом CSS, без использования каких-либо графических редакторов. Ведь, чем меньше применяется на сайте графики, тем быстрее он загружается.

У нас есть обычный заголовок белого цвета на темном фоне. Поместим наш заголовок в центре, используя технологию flexbox.

// HTML код

Gradient

// CSS код
.container width: 100%;
height: 100vh;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:#0E2431;
>

.title font-family: sans-serif;
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
color: white;
>

Градиент для текста на CSS.

Пропишем линейный градиент для заголовка. Этот градиент плавно перемещается по прямой снизу вверх, от розового цвета к голубому. Для построения красивых градиентов не нужно держать в голове все эти комбинации кода. Сейчас существуют генераторы градиентов, например webgradiets.

.title background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
>

Но, никакого чуда не произошло и градиент применился к фону блока, внутри которого приписан текст.

Градиент для текста на CSS.

Как задать градиент для самого заголовка? Существует такое CSS свойство, как background-clip. После применения данного свойства (обязательно с префиксом) со значением text, фон окрасится цвет в цвет заголовка, в нашем случае в белый цвет. Таким образом данное свойство применится только к тесту.

.title -webkit-background-clip: text;
>

Градиент для текста на CSS.

Почему же заголовок снова стал белым? На самом деле градиент есть, только мы его не видим из-за белого цвета у заголовка. Поменяем цвет заголовка на прозрачный, через специальное свойство text-fill-color (с префиксом -webkit).

.title -webkit-text-fill-color: transparent;
>

Градиент для текста на CSS.

И последнее, заменим белый цвет на один из цветов градиента на случай, если специфичные градиентные свойства не сработают в других браузерах. Далеко не все браузеры поддерживают эти новшества. Поэтому для корректного отображения цвета текста (максимально приближенного к макету сайта), мы и добавляем дополнительный цвет. На момент написания статьи, свойство text-fill-color не поддерживается только IE11 из числа более-менее современных браузеров.

На современных браузерах мы получим текст с градиентом, а на старых браузерах однотонный цвет, наиболее подходящий под фон сайта.

Смотрите пример на CodePen

Создано 26.10.2020 10:31:38

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Градиент для текста

    Чтобы применить градиентную заливку цвета для текста, сперва нужно сделать градиент для фона:

    .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, градиентный текст в CSS | CSS Text Gradients

    Главная СтатьиГрадиентная заливка текста средствами CSS
    Поделиться в соцсетях:

    Градиентный текст становится все более популярным элементом в веб-разработке. Раньше для реализации градиентного текста использовали статические изображения, однако теперь это можно легко сделать с помощью CSS.

    В примере ниже создадим несколько текстовых элементов на темном фоне и средствами CSS добавим им градиентную заливку:

    Как работает градиентный текст

    Градиентный текст создается с помощью нестандартного набора нескольких свойств CSS, некоторые из которые имеют вендорный префикс -webkit- . А поскольку большинство браузеров в основном основаны на Хроме, градиентный текст имеет довольно широкую поддержку во всех современных веб-браузерах. Браузеры, не поддерживающие данные правила, их просто проигнорируют.

    Набор свойств для градиентного текста:

    .text

    background-image — задаем градиент, который хотим применить к тексту

    -webkit-text-fill-color — делаем цвет текста прозрачным

    -webkit-background-clip — обрезает фоновое изображение по контуру текста. Таким образом фон будет только в том месте, где находится текст

    -webkit-box-decoration-break — свойство, позволяющее градиенту распространяться на несколько строк

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *