Работа с тенью от текста в CSS3
синтаксис:
text-shadow: <сдвиг_x> <сдвиг_y> <радиус размытия>* <цвет>*, [<сдвиг_x> <сдвиг_y> <радиус размытия>* <цвет>*]
* не обязательные параметры
<сдвиг_x> - сдвиг тени по горизонтали, т.е. по оси х. Отрицательные значения сдвигают влево. Возможно использовать любые
допустимые в CSS обозначения величин.
<сдвиг_y> - сдвиг тени по вертикали, т.е. по оси у. Отрицательные значения сдвигают вверх. Возможно использовать любые
допустимые в CSS обозначения величин.
<радиус размытия> - величина размытия тени. Возможно использовать любые
допустимые в CSS обозначения величин.
<цвет> - цвет тени.
Пример простой тени.
text-shadow: 5px 5px 0 #959595;
Пример простой тени.
text-shadow: 0.05em 0.05em 0 #959595;
Пример простой тени.
text-shadow: 0.1cm 0.1cm 0 #959595;
Пример простой тени.
text-shadow: 1mm 1mm 0 #959595;
Пример тени с размытием.
text-shadow: 5px 5px 7px #959595;
Пример тени с размытием.
color: #f2f2f2; text-shadow: 5px 5px 3px #414141;
Текст с несколькими тенями.
text-shadow: 5px -10px 0 #959595, -15px -15px 0 black;
3D эффект
3D эффект
color: #f2f2f2;
text-shadow:
1px 1px black,
2px 2px #959595,
3px 3px #959595,
4px 4px #959595,
5px 5px #959595,
6px 6px #959595,
7px 7px #959595,
8px 8px #959595;
Добавим чуть-чуть размытия у двух самых последних теней
3D эффект
color: #f2f2f2;
text-shadow:
1px 1px black,
2px 2px #959595,
3px 3px #959595,
4px 4px #959595,
5px 5px #959595,
6px 6px #959595,
7px 7px 2px #959595,
8px 8px 3px #959595;
Эффект свечения
Текст с эффектом свечения.
background:black;
text-shadow:
0 0 5px #FFFFA0,
0 0 10px #FFFF4D,
0 0 15px #FFFF41,
0 0 20px #FFFF2A,
0 0 25px #FFFF2B,
0 0 30px #FEFE00,
0 0 35px #F7F700;
Контурный текст
Идея создания контурного текста очень проста: отбрасываем тень от текста во все четыре стороны.
Контурный текст.
color: #f2f2f2;
text-shadow:
-1px 0 #000,
0 1px #000,
1px 0 #000,
0 -1px #000;
Я считаю, что лучше использовать относительные величины, которые дают хороший результат при изменении размеров шрифта. И использовать не 4, а все 8 сторон для отбрасывания тени
Контурный текст.
color: #f2f2f2;
text-shadow:
-0.01em 0 #000,
0 0.01em #000,
-0.01em 0.01em #000,
0.01em 0 #000,
0 -0.01em #000,
0.01em 0.01em #000,
0.01em -0.01em #000,
-0.01em -0.01em #000;
Стикер эффект.