Эффекты Текста

Для всех примеров код разметки HTML должен быть одинаковым кроме 3D текст. В примерах Эффекты Текста будет меняться только код CSS.

Оглавление:
  1. Синтаксис
  2. Красочный Стиль
  3. Двойной Стиль Шрифта
  4. Неоновое Свечение
  5. Вставка Эффекта
  6. Начальный этап
  7. Текст с фоном
  8. 3D текст
  9. Тиснение
  10. Текст 3D
  11. Тень для текста с анимацией

HTML

<div id="style">
CSS3 Эффект Текста
</div>

Синтаксис

text-shadow:(x-offset) (y-offset) (blur-radius) (color)
X-Offset: Положение тени по оси x.
Y-Offset: Положение тени по оси y.
Blur-radius: Радиус размытия.
Color: Цвет тени.
к меню ↑

Красочный Стиль

CSS3 Эффект Текста
.style {
text-shadow: 0 6px 4px #85c226,
	    -3px -5px 4px #fe2192,
	     3px -5px 4px #f7c200;
}
к меню ↑

Двойной Стиль Шрифта

CSS3 Эффект Текста
.style{
        text-shadow:0px -15px 0 #fe2192;
}
к меню ↑

Неоновое Свечение

CSS3 Эффект Текста
.style {
 text-shadow: 0 0 7px #1E90FF;
 background:#000000;
 color: #1E90FF;
}
к меню ↑

Вставка Эффекта

CSS3 Эффект Текста
.style {
  background: #CCCCCC;
  color: #CCCCCC;
  text-shadow: -1px -1px 3px #666666,
  1px 1px 3px #FFFFFF;
}
к меню ↑

Начальный этап

CSS3 Эффект Текста
.style {
  background: #CCCCCC;
  color: #CCCCCC;
  text-shadow: 1px 1px 3px #666666,
  -1px -1px 3px #FFFFFF;
}
к меню ↑

Текст с фоном

Здесь мы будем использовать прозрачные изображения для создания Текстовых Эффектов. Нам просто нужно вставить пустой span/span внутри тега div с id.

Для прозрачных изображений фона, будет использоваться тег span. Положение элемента span поверх текста с помощью свойств z-index, чтобы придать ему новый облик.

HTML

<div id="style">
 <span>CSS3 Эффект Текста</span>
</div>
к меню ↑

3D текст

Раньше тень для текста были в CSS2, но единственный браузер который поддерживает это свойство был Safari.

Если говорить про сегодня, почти все браузеры поддерживают text-shadow (тень для текста), кроме Internet Explorer 9 в нём не работает свойство text-shadow.

Для таких браузеров есть плагин jQuery Тени для IE CSS, который сделает тень для текста, полностью совместимыми с Internet Explorer 7,8,9.

htmlhook.ru

Код HTML, написанный ниже располагается внутри тега body.

<div id="wrapper-demo">
 <h1>htmlhook.ru</h1>

Это хорошо работает в браузерах Firefox, Opera, Safari и Chrome, но не работает с Internet Explorer 9!</div>

Код CSS3 добавит заголовку и параграфу много теней, чтобы был эффект 3D.

#wrapper-demo h1 {
 font:normal 60pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

#wrapper-demo p{
 font:normal 40pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}
к меню ↑

Тиснение

К сожалению в настоящее время поддерживается только в WebKit/Blink-браузерами.

Тиснение

.shadow-stamp {
   background-color: #333;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: rgba(255,255,255,0.5) 2px 3px 6px;
}
к меню ↑

Текст 3D

.shadow-3d {
 text-shadow: 0 1px #808d93,
     -1px 0 #cdd2d5,
     -1px 2px #808d93,
     -2px 1px #cdd2d5,
     -2px 3px #808d93,
     -3px 2px #cdd2d5,
     -3px 4px #808d93,
     -4px 3px #cdd2d5,
     -4px 5px #808d93,
     -5px 4px #cdd2d5,
     -5px 6px #808d93,
     -6px 5px #cdd2d5,
     -6px 7px #808d93,
     -7px 6px #cdd2d5,
     -7px 8px #808d93,
     -8px 7px #cdd2d5;
}

Текст 3D

к меню ↑

Тень для текста с анимацией

Не забывайте, что text-shadow, может быть даже с анимацией с помощью CSS-анимации — в следующем примере создается стек, где формы букв окрашенные в различные цвета, которые находятся в постоянном движении.

Анимация тени

.shadow-anime {
color: yellow;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0,0,0,0.7),
10px 10px 1px red,
11px 11px 2px rgba(0,0,0,0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0,0,0,0.7);
-webkit-animation: text-snake 1s infinite alternate;
-moz-animation: text-snake 1s infinite alternate;
-ms-animation: text-snake 1s infinite alternate;
animation: text-snake 1s infinite alternate;
}

@keyframes text-snake {
from {
text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0,0,0,0.7),
10px 10px 1px red,
11px 11px 2px rgba(0,0,0,0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0,0,0,0.7);
}
to {
text-shadow: -1px 1px 2px rgba(0,0,0,0.7),
-5px 5px 1px orange,
-6px 6px 2px rgba(0,0,0,0.7),
-10px 10px 1px red,
-11px 11px 2px rgba(0,0,0,0.7),
-15px 15px 1px purple,
-16px 16px 2px rgba(0,0,0,0.7);
}
}

Инструмент создать тень для текста.