Много примеров использования 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)
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.