Свойство CSS text-shadow
В данное время не поддерживается Internet Explorer. Свойство имеет четыре параметра:
text-shadow: X Y амплитуда цвет;
- X — горизонтальное смещение тени к тексту (положительное значение — вправо, отрицательное — влево),
- Y — вертикально смещение тени к тексту (положительное — вниз, отрицательно — вверх),
- амплитуда — чем выше значение, тем больше степень размытия,
- очевидно, цвет тени.
CSS тень текста
p {font-size: 4em; text-shadow: 1px 1px 1px #000; color: #f9f5ed;}
тень на тёмном фоне
p {font-size: 4em; text-shadow:4px 4px 5px #AAAAAA; color:#000;}
фон и текст одного цвета
p {font-size: 4em; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;}
затемнение
p {font-size: 4em; text-shadow: 1px 4px 0 #456; color: #FFF;}
обтекаемый
p {font-size: 4em; text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);}
shpargalkablog.ru
p {font-size: 4em; text-shadow: 4px 2px black; color: #ece2ca;}
Можно добавить две и более тени через запятую:
много оттенков
p {font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;}
контур
p {font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;}
вдавленный
p {font-size: 4em; text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;}
объёмный
p {font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;}
retro
p {background-color: #EEE;
color: #707070;
font-family: Times New Roman;
font-size: 7em;
margin: 0 auto;
text-transform: uppercase;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;}
neon
p {background-color: #000;
padding: 20px 0;
margin: 20px auto;
font-family: Garamond;
font-size: 7em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}
Inset
p {background-color: #474747;
margin: 20px auto;
font-family: Helvetica;
font-size: 7em;
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;}
Arial
p {background-color: #fff;
margin: 20px auto;
font-family: Arial;
font-size: 7em;
text-transform: uppercase;
color: rgba(0,168,255,0.5);
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);}
Fire
p {background-color: #000;
padding:90px 0 0;
margin: 20px auto;
font-family: Arial;
font-size: 200px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;}
Game
p {background-color: #eee;
text-align: left;
padding: 10px 0 50px 35px;
margin: 20px auto;
font-family: Arial;
font-size:7em;
text-transform: uppercase;
color: #fff;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;}
Слоёный
p {color: #4c6271;
font-family: Arial;
font-size: 7em;
margin: 20px auto;
text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;
}
Слоёный
p {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;
}
Такой вариант
p {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);}
С нажатием и ховером
<style type="text/css">
a.text:link, a.text:visited {
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
font: 60px/60px 'ChunkFiveRegular';
display: inline-block;
}
a.text:hover {
text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;text-decoration:none;
}
a.text:active {
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
margin-top: 4px;
line-height: 56px;
color: #dcdcdc;
}</style>
Совсем безумная тень CSS наискосок
<style type="text/css">
.bgrd {width:600px; height:400px; background:#aaa; margin:0 auto; text-align:center;
border-radius:10px;text-indent: 0px;
}
p.skew {
font-family: 'times new roman', serif;
padding:0; margin:200px 0 0 150px;
position:relative;
color:#fff;
font-size: 100px;
text-shadow:
-1px -1px 0 #f8f8f8,
-2px -2px 0 #f0f0f0,
-3px -3px 0 #e8e8e8,
-4px -4px 0 #e0e0e0,
-5px -5px 0 #d8d8d8,
-6px -6px 0 #d0d0d0,
-7px -7px 0 #c8c8c8;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewY(-15deg);
-webkit-transform: skewY(-15deg);
-ms-transform: skewY(-15deg);
-o-transform: skewY(-15deg);
transform: skewY(-15deg);
position: absolute;
z-index: 100;
}
.skew:before {
content:attr(title);
color:transparent;
position:absolute;
left:0; bottom:0;
text-shadow:
0 0 5px rgba(0,0,0,.25);
0 0 10px rgba(0,0,0,.2);
0 0 20px rgba(0,0,0,.15);
0 0 40px rgba(0,0,0,.1);
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
-ms-transform: skewX(60deg);
-o-transform: skewX(60deg);
transform: skewX(60deg);
z-index:-1;
}
</style>
Сложно придумывать варианты применения данного свойства, но всегда можно воспользоваться имеющимися наработками, чтобы сделать сайт более стильным.
Для Internet Explorer — тень через filter
тень для IE
filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);
