css тени для текста в примерах

Cвойство CSS3 text-shadow,  на первый взгляд очень простое, но если проявить немного фантазии, то можно сделать с текстом маленькое чудо.

12 примеров текстов с тенью на простом css: css стили ниже всех примеров. В зависимости от размера шрифта тень может менятся!

Текст №1

<div class="txt1">
<h1>Пример ТЕКСТА 1</h1>
</div>

Текст №2

<div class="txt2">
<h1>Пример ТЕКСТА 2</h1>
</div>

Текст №3

<div class="txt3">
<h1>Пример ТЕКСТА 3</h1>
</div>

Текст №4

<div class="txt4">
<h1>Пример ТЕКСТА 4</h1>
</div>

Текст №5

<div class="txt5">
<h1>Пример ТЕКСТА 5</h1>
</div>

Текст №6

<div class="txt6">
<h1>Пример ТЕКСТА 6</h1>
</div>

Текст №7

<div class="txt7">
<h1>Пример ТЕКСТА 7</h1>
</div>

Текст №8

<div class="txt8">
<h1>Пример ТЕКСТА 8</h1>
</div>

Текст №9

<div class="txt9">
<h1>Пример ТЕКСТА 9</h1>
</div>

Текст №10

<div class="txt10">
<h1>Пример ТЕКСТА 10</h1>
</div>

Текст №11

<div class="txt11">
<h1>Пример ТЕКСТА 11</h1>
</div>

CSS код:

[class*='txt'] h1 {font-size:2.5em;}
.txt1 {background: #222;}
.txt1 h1 {color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}

.txt2 h1 {text-shadow: 3px 3px 0px rgba(0,0,0,0.2);}

.txt3 h1 {text-shadow: 3px 2px 0px #fff, 5px 6px 0px rgba(0,0,0,0.15);}

.txt4 h1 {text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);}

.txt5 h1 {text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.txt6 h1 {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);}

.txt7 {background: #CBCBCB;}			   
.txt7 h1 {background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px; }

.txt8 {background: #9B2F25;}
.txt8 h1 {text-shadow: 0px 0px 6px rgba(255,255,255,0.7);}

.txt9 {background: #6CFAFC;}
.txt9 h1 {text-shadow: -5px 5px 0px #00e6e6,
-8px 8px 0px #01cccc,
-12px 12px 0px #00bdbd;}

.txt10 {background: #6CFAFC;}			 
.txt10 h1 {text-shadow: 0px 8px 5px rgba(0,0,0,0.1),
10px 13px 5px rgba(0,0,0,0.05),
-10px 19px 5px rgba(0,0,0,0.05);}

.txt11 {background: #639653;}	
.txt11 h1 {color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 6px rgba(0,0,0,0.2),
0px -5px 30px rgba(255,255,255,0.3);}