Работа с тенью от текста в 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;
Стикер эффект.