Text-shadow примеры теней для текста


Text-shadow - тень для текста при помощи CSS. Ниже размещены несколько демо-примеров теней для текста с использованием свойства text-shadow, а также указаны исходные значения (параметры) используемые в примерах.
color: #FFFFFF;
background-color: #13C4A5;
Пример текста
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
color: #FFFFFF;
background-color: #3695C1;
Пример текста
text-shadow: 2px 2px 2px #aaa;
color: #696969;
background-color: #C5C5C5;
Пример текста
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
color: #696969;
background-color: #DAD5C2;
Пример текста
text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
color: #696969;
background-color: #FFFFFF;
Пример текста
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #000;
color: #FFFFFF;
background-color: #13C4A5;
Пример текста
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);
color: #999999;
background-color: #414141;
Пример текста
text-shadow: 0px 3px 8px #2a2a2a;
color: #696969;
background-color: #77A1A0;
Пример текста
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
color: #FFFFFF;
background-color: #6CFAFC;
Пример текста
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);
color: #FFFFFF;
background-color: #13C4A5;
Пример текста
text-shadow: -1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000;
color: #222222;
background-color: #414141;
Пример текста
text-shadow: 0px 2px 3px #555;
color: #383838;
background-color: #DAD5C2;
Пример текста
text-shadow: -2px -2px 2px #aaa;
color: #696969;
background-color: #C5C5C5;
Пример текста
text-shadow: 0px 1px 0px #ebebeb;
color: #FFFFFF;
background-color: #629552;
Пример текста
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
color: #333333;
background-color: #222222;
Пример текста
text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
color: #FFFFFF;
background-color: #3695C1;
Пример текста
text-shadow: 3px 3px 0 #aaa;
color: #C5C5C5;
background-color: #C5C5C5;
Пример текста
text-shadow: 1px 1px #fff, -1px -1px #3d3d3d;
color: #4F4F4F;
background-color: #DAD5C2;
Пример текста
text-shadow: 3px 10px 0 #aaa;
color: #2B3827;
background-color: #629552;
Пример текста
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
color: #000000;
background-color: #222222;
Пример текста
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
color: #FFFFFF;
background-color: #13C4A5;
Пример текста
text-shadow: 2px 2px 2px #000;
color: #4F4F4F;
background-color: #FFFFFF;
Пример текста
text-shadow: 2px 2px 0 #aaa;
color: #696969;
background-color: #FFFFFF;
Пример текста
text-shadow: 0 0 5px #000;