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

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

В спецификации 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;
}

Результат

Свойство 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;
}

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

.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;
}

Свойство -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 рассмотрены в статье Свойство text-shadow