Lukáš Havrlant se ve svém článku zabývá stínováním nadpisů. Jeho řešení je jistě funkční, ovšem přináší jeden zásadní problém - vše začne haprovat při vypnutých stylech (popř. při vypnutém javascriptu). Dovolil jsem si zkusit to trošku jinak.
Při níže uvedeném řešení jsem vycházel z faktu, že MSIE podporuje svou vlastní css vlastnost filter, zatímco ostatní prohlížeče zase mají implementované pokročilejší vlastnosti CSS typu before a content. Ostatně podívejte se na ukázku. Měla by fungovat v MSIE, Firefoxu i Opeře.
h1 {
position: relative;
text-align:center;
}
h1 .text {
filter: dropshadow(color=#cccccc, offx=2, offy=2);
position: absolute;
_position:static;
top:-2px;
left:-2px;
width:100%;
display:block;
}
h1 .shadow:before {
display:block;
content:attr(title);
color:#ccc;
}
...
<h1><span class="text">Nadpis</span><span title="Nadpis"
class="shadow"></span></h1>
...
Jak je vidět, ani toto řešení není bez much. Text nadpisu sice neopakujeme přímo v obsahu spanu (tzn. přímo v textu se neobjeví), ale zopakovat ho přece jen musíme alespoň v atributu title, jehož obsah je použit v pseudotřídě :before. To znamená, že to není úplně sto-pro ideální řešení, nicméně lepší mě nenapadlo, takže se můžete snažit dál pánové.
Přečtěte si také
- Jednoduché stínování textu
- Kaskádové styly (toto je opravdu archivní kousek, nicméně Jirka Kosek byl asi první, koho něco podobného napadlo - před více než 8 lety!)
Díky 
