источник

Много примеров использования text-shadow

CSS тень текста
[html]<div style="background-color: #8e80a4; border: medium none; color: #f9f5ed; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; text-shadow: 1px 1px 1px #000;">CSS тень текста</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Тень на тёмном фоне
[html]<div style="background-color: #555555; border: medium none; color: black; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; text-shadow: 4px 4px 5px rgb(170, 170, 170);">тень на тёмном фоне</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Фон и текст одного цвета
[html]<div style="background-color: aliceblue; border: medium none; color: aliceblue; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; font-weight: normal; text-shadow: 0.1em 0.1em 0.2em black; ">фон и текст одного цвета</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Затемнение
[html]<div style="background-color: #101921; border: medium none; color: #FFF; font-family: Helvetica,Arial,sans-serif; font-size: 4em; font-weight: normal; text-shadow: 1px 4px 0 #456;">затемнение</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Обтекаемый
[html]<div style="font-size: 4em; color: rgba(102, 0, 102, 0.5); font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6);">обтекаемый</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Жирная тень
[html]<div style="font-size: 4em; text-shadow: 4px 2px black; color: #ece2ca; font-family: Verdana; font-weight: normal;">Жирная тень</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Много оттенков
[html]<div style="border: medium none; color: #101921; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; font-weight: normal; text-shadow: 3px 3px 10px red, -3px -3px 10px yellow;">много оттенков</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Контур
[html]<div style="color: #ddcca3; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; text-shadow: -1px 0pt black, 0pt 1px black, 1px 0pt black, 0pt -1px black;">контур</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Вдавленный на светлом фоне
[html]<div style="color: #ddcca3; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; text-shadow: -1px -1px rgb(102, 102, 102), 1px 1px rgb(255, 255, 255);">вдавленный</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Объёмный
[html]<div style="color: #ddcca3; font-family: Trebuchet MS,Trebuchet,Helvetica,Arial,Verdana,sans-serif; font-size: 4em; text-shadow: 1px 1px 3px rgb(102, 102, 102), -1px -1px 3px rgb(255, 255, 255), 1px 1px rgb(102, 102, 102), -1px -1px rgb(255, 255, 255);">объёмный</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

В стиле ретро
[html]<div style="background-color: #eeeeee; color: #707070; font-family: Times New Roman; font-size: 7em; margin: 0pt auto; text-shadow: 5px 5px 0px rgb(238, 238, 238), 7px 7px 0px rgb(112, 112, 112); text-transform: uppercase;">retro</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Неоновый
[html]<div style="background-color: black; color: white; font-family: Garamond; font-size: 7em; margin: 20px auto; padding: 20px 0pt; text-shadow: 0pt 0pt 10px rgb(255, 255, 255), 0pt 0pt 20px rgb(255, 255, 255), 0pt 0pt 30px rgb(255, 255, 255), 0pt 0pt 40px rgb(255, 0, 222), 0pt 0pt 70px rgb(255, 0, 222), 0pt 0pt 80px rgb(255, 0, 222), 0pt 0pt 100px rgb(255, 0, 222), 0pt 0pt 150px rgb(255, 0, 222); text-transform: uppercase;">neon</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Вдавленный на черном фоне
[html]<div style="background-color: #474747; color: #222222; font-family: Helvetica; font-size: 7em; margin: 20px auto; text-shadow: 0px 2px 3px rgb(102, 102, 102); text-transform: uppercase;">Inset</div>[/html]

Код:
p {
background-color: #474747;
margin: 20px auto;
font-family: Helvetica;
font-size: 7em; 
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;
}

Наложение
[html]<div style="background-color: white; color: rgba(0, 168, 255, 0.5); font-family: Arial; font-size: 7em; margin: 20px auto; text-shadow: 8px 8px 0pt rgba(255, 0, 180, 0.5); text-transform: uppercase;">Arial</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Свечение
[html]<div style="background-color: black; color: white; font-family: Arial; font-size: 200px; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px rgb(254, 252, 201), 10px -10px 30px rgb(254, 236, 133), -20px -20px 40px rgb(255, 174, 52), 20px -40px 50px rgb(236, 118, 12), -20px -60px 60px rgb(205, 70, 6), 0pt -80px 70px rgb(151, 55, 22), 10px -90px 80px rgb(69, 27, 14); text-transform: uppercase;">Fire</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Рекурсия
[html]<div style="background-color: #eeeeee; color: white; font-family: Arial; font-size: 7em; margin: 20px auto; padding: 10px 0pt 50px 35px; text-align: left; text-shadow: 10px 10px 0pt rgb(255, 210, 23), 20px 20px 0pt rgb(90, 199, 255), 30px 30px 0pt rgb(255, 210, 23), 40px 40px 0pt rgb(90, 199, 255); text-transform: uppercase;">Game</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Объемный слоёный
[html]<div style="background-color: #44ccf6; color: #4c6271; font-family: Arial; font-size: 7em; margin: 20px auto; text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;">Слоёный</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Слоёный
[html]<div style="background-color: #f9f5ed; color: #FE6602; font-family: 'Aclonica',serif; font-size: 7em; margin: 20px auto; text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135; ">Слоёный</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Плавный объемный
[html]<div style="background-color: #f58220; color: #fff; font: 7em 'ChunkFiveRegular'; margin: 20px auto; 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);">Такой вариант</div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Теги: text-shadow, css-код, css, css3

Отредактировано Герда (29.11.12 13:40)

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)