Сенки на текст без изображения

Демонстрация на CSS 3 правилата

Текст с плавна сянка

Сянката е разфокусирана, както при ефекта Drop Shadow във Photoshop

/* CSS дефиницияh1.smooth {
margin: auto auto 0 auto;
text-shadow: #333333 0px 1px 4px;
}

Текст без плавна сянка

Сянката е рязка и симулира наслагване на идентични текстове един върху друг

/* CSS дефиницияh1.nsmooth {
margin: auto auto 0 auto;
text-shadow: #363636 2px 2px 1px;
}

Гравиран текст

Сянката се наслагва с отстояние от 1 пиксел под текста-родител.

Подобна техника е използвана в менюто на Apple.

/* CSS дефиницияh1.engrave {
margin: auto auto 0 auto;
text-shadow: #fff 0 1px 0;
}

Гравиран текст 2

Двете сенки се наслагват така, че да симулират вдълбаване на текста във фона.
Това обаче няма да се вижда в по-стари браузъри и текста без сенките ще е крайно нечетивен.

/* CSS дефиницияh1.graved {
margin: auto auto 0 auto;
color:#d1d1d1;
text-shadow: 1px 1px white, -1px -1px #333;
}

Очертан текст

А ако добавим четири сенки, всяка отстояща на 1 пиксел в различна посока спрямо текста,
получаваме ефект, подобен на ефекта Stroke във Photoshop.

/* CSS дефиницияh1.stroke {
margin: auto auto 0 auto;
color:#d1d1d1;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Цветен текст с цветна сянка

CSS позволява да задаваме всякакви цветови стойности на текста и на сянката

/* CSS дефиницияh1.colors {
margin: auto auto 0 auto;
color:#FF6600;
text-shadow: #660000 2px 2px 1px;
}


Няколко сенки за един текст

В този пример CSS наслагва няколко сенки върху текста

/* CSS дефиницияh1.multi {
margin: auto auto 0 auto;
color:#FF6600;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}