logo

Эффекты при оформлении текста

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.

В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать.
Свойство -webkit-text-stroke — это сокращенный способ задать параметры свойств -webkit-text-stroke-width — которое определяет ширину границы и -webkit-text-stroke-color — соответственно цвет.

Допустимые значения свойства -webkit-text-stroke-width.

  • Только положительное числовое значение (em, px)
  • medium — граница средней толщины
  • thick — толстая граница
  • thin — тонкая граница

Свойство -webkit-text-stroke-color — определяет цвет границы. Существует более 30 значений для указания цвета. но их пока не будем рассматривать, а зададим цвет привычным способом

Существует еще одно свойство-webkit-text-fill-color — оно определяет цвет заливки для текста. Может принимать такие же значения как и свойство -webkit-text-stroke-color

Данные свойства пока считаются экспериментальными и работают только в браузерах на движке Webkit. Итак:

Напишем 4 строки —


<span class="stroke">Шаблоны CSS3</span>
<span class="stroke_2">Шаблоны CSS3</span>
<span class="stroke_3">Шаблоны CSS3</span>
<span class="stroke_4">Шаблоны CSS3</span>

… и применим к ним свойство -webkit-text-stroke, и не только…


span{
  font-size: 70px;
  font-weight:bold;
  letter-spacing: .1em;
}
.stroke {
  color: #50cbd2;
  -webkit-text-stroke: 1px #000;
}
.stroke_2 {
  color: #03303b;
  -webkit-text-stroke:8px #01aed2;
}
.stroke_3 {
  color: #eee;
  -webkit-text-stroke: 2px #d01515;
}
.stroke_4 {
  color: #444;
  -webkit-text-stroke:2px #15d01c;
  text-shadow: 5px 5px 10px #444;
}

Результат

Шаблоны CSS3
Шаблоны CSS3
Шаблоны CSS3
Шаблоны CSS3

Свойство background-clip

Свойство -webkit-background-clip определяет, как будет распространяться цвет фона.

Допустимые значения свойства -webkit-background-clip

  • padding — фоновый цвет ограничиваться началом границы элемента
  • border — фоновый цвет будет продолжаться под прозрачными участками границы элемента
  • content — фоновый цвет распространяется только на контентную часть элемента
  • text — фоновый цвет будет распространен только на текст элемента

Вот это последнее значение этого свойства совместно со свойством -webkit-text-fill-color мы и применим для нашего текста. Теперь текст приобрел цвета градиента.


.stroke_5{
  background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00,#00ff00, #00ffff, #0000ff, #8b00ff);
  background-image: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
Шаблоны CSS3

А теперь попробуем применить несколько другой градиент.


.stroke_6{
  background-image: -webkit-linear-gradient(83deg, #000, #a5a3a3, #bdbdbe, #151414, #fffbfb, #a59696, #000);
  background-image: linear-gradient( 7deg,#000, #a5a3a3, #bdbdbe, #151414, #fffbfb, #a59696, #000);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #222;
  -webkit-background-clip: text;
}
Шаблоны CSS3

Свойство -webkit-mask-image

Свойство -webkit-mask-image задает изображение, применяемое к элементу в качестве маски.

В качестве маски можно использовать любое изображение, причем прозрачные части маски делают элемент невидимым, а непрозрачные — видимым, полупрозрачные — полупрозрачными в зависимости от прозрачности маски.

В качестве примера применим полупрозрачный градиент.


.stroke_7{
  color: #00b506;
  text-shadow: 1px 1px 1px #000000;
  -webkit-text-stroke:2px #222;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}
Шаблоны CSS3
Для информации!

При адаптивной верстке возможны некоторые нюансы: в частности во втором примере необходимо уменьшить ширину границы до 3-4 пикселей, иначе при маленьких экранах все «плывёт». В пятом и шестом примерах при уменьшении экрана, когда текст уже не вмещается в одну строку и переносится на следующую, то в пятом примере второй строки не видно, а в шестом она видна за счет границы, но заливка градиентом на нем отсутствует. Так что, если позволяет дизайн, уменьшать шрифт, либо каждое слово «раскрашивать» отдельно, как сделано в примере 5. В шестом, для наглядности. ничего не стал изменять для адаптации на мелких гаджетах.

Другие варианты (способы) оформления текста в CSS3 рассмотрены в статье Свойство text-shadow


Эффекты для текста 0

Рекомендую прочитать...

Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Градиент в качестве границы блоков
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Читать полностью
Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.