Градиент - это плавный переход от одного цвета к другому. В веб-дизайне мы часто сталкиваемся с фоновыми и интерфейсными градиентами и намного реже с текстовыми градиентами. Сегодня разберем, как сделать текст градиентом на чистом CSS , без использования каких-либо графических редакторов. Ведь, чем меньше применяетс...
Градиент - это плавный переход от одного цвета к другому. В веб-дизайне мы часто сталкиваемся с фоновыми и интерфейсными градиентами и намного реже с текстовыми градиентами. Сегодня разберем, как сделать текст градиентом на чистом CSS, без использования каких-либо графических редакторов. Ведь, чем меньше применяется на сайте графики, тем быстрее он загружается.
У нас есть обычный заголовок белого цвета на темном фоне. Поместим наш заголовок в центре, используя технологию flexbox.
// HTML код
<div class="container">
<h1 class="title">
Gradient
</h1>
</div>
// 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;
}
Пропишем линейный градиент для заголовка. Этот градиент плавно перемещается по прямой снизу вверх, от розового цвета к голубому. Для построения красивых градиентов не нужно держать в голове все эти комбинации кода. Сейчас существуют генераторы градиентов, например webgradiets.
.title {
background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
Но, никакого чуда не произошло и градиент применился к фону блока, внутри которого приписан текст.
Как задать градиент для самого заголовка? Существует такое CSS свойство, как background-clip. После применения данного свойства (обязательно с префиксом) со значением text, фон окрасится цвет в цвет заголовка, в нашем случае в белый цвет. Таким образом данное свойство применится только к тесту.
.title {
-webkit-background-clip: text;
}
Почему же заголовок снова стал белым? На самом деле градиент есть, только мы его не видим из-за белого цвета у заголовка. Поменяем цвет заголовка на прозрачный, через специальное свойство text-fill-color (с префиксом -webkit).
.title {
-webkit-text-fill-color: transparent;
}
И последнее, заменим белый цвет на один из цветов градиента на случай, если специфичные градиентные свойства не сработают в других браузерах. Далеко не все браузеры поддерживают эти новшества. Поэтому для корректного отображения цвета текста (максимально приближенного к макету сайта), мы и добавляем дополнительный цвет. На момент написания статьи, свойство text-fill-color не поддерживается только IE11 из числа более-менее современных браузеров.
.title {
color: #fbc2eb;
}
На современных браузерах мы получим текст с градиентом, а на старых браузерах однотонный цвет, наиболее подходящий под фон сайта.
