Немного о HTML5 и CSS3

Заметки о HTML5, CSS3 и связанных с ними api

Ошибка в тексте? Выделите и нажмите Cntr+Enter!

Работа с тенью от текста в 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;

Стикер эффект.

Hosted by uCoz