Доброго времени суток всем, кто обожает узнавать необычные и новые возможности css. Эта публикация как раз для вас. И я вам гарантирую, она будет очень интересной и полезной. Сегодня я расскажу, как можно создать градиент текста css-средствами.
В этой статье я постарался собрать как можно больше интересных эффектов и способов оформления текстового контента. Поэтому после прочтения статьи ваш веб-ресурс может сильно преобразиться в лучшую сторону и выглядеть современнее. Все-все, приступаем к делу!
Ах, какие цвета, какой стиль!
Я решил начать с самого простого. С появлением нового стандарта css3 возможности стилевых таблиц значительно расширились. Теперь стало легче управлять градиентами и применять их непосредственно к тексту. Это смотрится очень эффектно.
В инструментах как html, так и css нет независимого элемента, который бы отвечал за градиент. Поэтому переход цветов происходит за счет использования такого параметра, как
linear-gradient
, который применяют или к background или конкретно к background- image.
С помощью данного элемента можно создавать переходы из нескольких цветов, а также указывать, под каким углом будет отображаться градиент.
Порядок определения значений выглядит так:
linear-gradient (угол наклона или позиция, цвет 1, …,цвет n)
Что касается первого параметра, то его можно задавать как в градусах (например, 88deg), так и специальными словами, которые называются ключевыми.
Угол можно описать положительным или отрицательным числом.
Что касается ключевых слов, то чтобы установить позицию перелива цветов, нужно вначале написать to, а после добавить указание или стороны блока (к примеру, to right), или одного из углов (to bottom right).
В первом примере я хочу показать, как будет выглядеть описанный способ создания градиента. Напоминаю, что запустить код вы можете через «Блокнот» или через онлайн-редактор.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример 1</title>
<style>
.grad {
background: linear-gradient(185deg, #551A8B, #E066FF,#FF3E96, #FF0000);
font-size: 95px;
text-align: center;
}
</style>
</head>
<body>
<p class="grad">Текстовый контент с градиентом.</p>
</body>
</html> |
Как вы видите, в этой программе градиент расположен за текстом как фон. А нам нужно применить данное форматирование к самому предложению. В этом помогут несколько дополнительных строк.
Добавьте в код после text-align: center; строки:
-webkit-background-clip: text;
color: transparent;
Вот теперь цветовой переход применился к самому тексту. Такое свойство работает во многих современных браузерах, однако до определенных версий могут возникнуть проблемы. Так что не пугайтесь.
А давай поменяемся местами
Ранее я показывал множество способов отображения фоновых изображений. Теперь же мы фоновую картинку применим к символам.
Для этого нужно использовать тот же способ написания программного кода, только вместо описания градиента стоит указать url фотографии. Желательно выбрать изображение с мелким рисунком, что были заметны детали, а не только цвета.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример 2</title>
<style>
.grad {
background: url(https://wilko.ru/wp-content/uploads/2014/01/colors.jpg);
background-size: 7%;
-webkit-background-clip: text;
font-size: 95px;
text-align: center;
color: transparent;
}
</style>
</head>
<body>
<p class="grad">Текстовый контент с большим количеством роз.</p>
</body>
</html> |
Добавим немного блеска!
Перед тем как я начал писать данную публикацию, в моей голове сгенерировалось множество идей о том, какие именно эффекты я опишу. Два из трех выбранных способа видоизменения текста я уже привел. И теперь пришло время анимации.
С ее помощью я хочу показать, как реализовать отблеск слов. Поэтому в третьем примере при наведении на контент, на последнем появится анимированный блик.
Для его создания потребуются знания о свойстве linear- gradient, которое мы разобрали выше, о псевдоэлементах и конечно же об анимациях.
О псевдоэлементах я кое-что рассказывал в статье, связанной с двойными рамками и приводил несколько хороших примеров. Поэтому для повышения скиллов советую почитать.
А пока скажу, что псевдоэлементы нужны для форматирования той области элементов, для которой в дереве документа не существует каких-либо селекторов или определений. В современных правилах для объявления таких параметров стоит использовать двойное двоеточие, потому что символ «:» используется для псевдоклассов.
В программном коде я использую его для того, чтобы после наведения отобразился пробегающий блеск на буквах.
Также я воспользовался свойствами transform и transition.
Первое свойство отвечает за способ трансформации в данном случае дополнительного эффекта, а второе – за стиль перехода от начального состояния к конечному.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример 3</title>
<style>
.grad {
font-size: 59px;
position: relative;
text-align: center;
color:red;
}
.grad:after {
content: "";
position: absolute;
background: linear-gradient(to left, rgba(254,254,254,.0), rgba(254,254,254,.8), rgba(254,254,254,.0)) no-repeat -100px;
transform: skewX(-33deg);
left: -100px;
top: 0;
width: 99%;
height: 99%;
background-size: 100px 100%;
}
.grad:hover::after {
transition: 1.5s linear;
background-position: 100% 0%;
}
</style>
</head>
<body>
<p class="grad">Контент</p>
</body>
</html> |
Теперь вы можете экспериментировать над способами отображения веб-контента, совершенствовать полученную информацию и пополнять ее новыми фишками. Жду ваших заявок на подписку. Пока-пока!
С уважением, Роман Чуешов
