Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Делаем градиент текста css стилями, а также переливающийся текст для акцентрирования внимания

Доброго времени суток всем, кто обожает узнавать необычные и новые возможности 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(http://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, которое мы разобрали выше, о псевдоэлементах и конечно же об анимациях.

О псевдоэлементах я кое-что рассказывал в статье, связанной с двойными рамками и приводил несколько хороших примеров. Поэтому для повышения скиллов советую почитать.

А пока скажу, что псевдоэлементы нужны для форматирования той области элементов, для которой в дереве документа не существует каких-либо селекторов или определений. В современных правилах для объявления таких параметров стоит использовать двойное двоеточие, потому что символ «:» используется для псевдоклассов.

Блеск текста css

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

Также я воспользовался свойствами 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>

Теперь вы можете экспериментировать над способами отображения веб-контента, совершенствовать полученную информацию и пополнять ее новыми фишками. Жду ваших заявок на подписку. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 101 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: