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

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

Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью
Необычное превью для «Главной»
необычное превью для главной

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи

Читать полностью
Анимированный логотип на чистом CSS
Анимированный логотип

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

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

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

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

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

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