Cień tekstu w CSS
31 stycznia 2007
Bardzo ładnym i subtelnym efektem używanym na stronach internetowych jest zaaplikowanie cienia tekstowi, w celu jego wyróżnienia bądź poprawienia kontrastu. Udało mi się przetestować kilka sposobów jego dodania. Każda metoda ma swoje plusy i minusy oraz różni się znacznie od pozostałych. Aby ujednolicić przykłady będziemy operować na zwyczajnym jednopikselowym cieniu rzucanym od góry z lewej.
Czysty CSS
Najlepiej użyć odpowiedniej własności CSS2 - text-shadow. Działa ona na razie tylko na Safari i innych przeglądarkach używających Webkitu (Konqueror, iCab).
text-shadow: 2px 2px 1px #2f6a34;
Pierwsze dwie wartości odpowiadają za odsunięcie cienia w poziomie i pionie (można stosować ujemne wartości i stworzyć np.: świecący tekst). Następna za jego rozmiar, a ostatnia to kolor.
Warto też wiedzieć, że zerowy text-shadow dodany dla jasnego tekstu na ciemnym tle w Safari sprawi, że font będzie cieńszy. Poprawia to widoczność niektórych elementów strony. A zobaczyć jak nasza strona wygląda z zaaplikowanym text-shadow można na BrowsrCamp.
Filtry IE
Internet Explorer został rozszerzony o zestaw filtrów generujące różne efekty. Aby pomyślnie użyć filtru należy zaaplikować elementowi layout. Składnia:
filter: progid:DXImageTransform.Microsoft.NazwaFiltru(opcje)progid:DXImageTransform.Microsoft.NazwaFiltru2(opcje)
Kolejne filtry dodajemy po spacji albo w nowym wierszu, wszystko w obrębie filter.
Co jednak oferują w konteście tekstu? Nic wartościowego - nie chcielibyśmy zaaplikować żadnego z efektów na naszej stronie. Paskudna jakość, tekst staje się rozmyty, a krawędzie postrzępione. Nijak się mają do text-shadow, oto próbki:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#2f6a34, direction=120, strength=1)
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#2f6a34, offX=1, offY=1, positive=true)
Wyglądają identycznie kiepsko, prawda?
Pozycjonowanie duplikatu
Ta metoda wykorzystuje dodatkowy element umieszczony wewnątrz tego, któremu zaaplikujemy cień. Dodać możemy go ręcznie albo przez JavaScript. Preferuję drugie rozwiązanie, bo dzięki temu przenoszę prezentację do warstwy zachowania (a to lepsze niż prezentacja w strukturze). Ponadto jesteśmy w stanie ustawić kolor tekstu w CSS odpowiednio kontrastujący z tłem, a następnie podmienic go w JS i dodać cień niwelujący niedostateczną widoczność.
Potrzebujemy takiego kodu:
<h1 id="pos">Text duplicate<span>Text duplicate</span></h1>
Identyfikator dodałem na potrzeby JavaScriptu:
function applyShadow() {var pos = document.getElementById('pos');var span = document.createElement('span');span.appendChild(document.createTextNode(pos.firstChild.nodeValue));pos.appendChild(span);}
Następnie odpowiedni CSS. Musimy tekst w spanie przesunąć pod oryginał. Pozycjonujemy więc span względem nagłówka z przesunięciem 1px w dół i prawo i dajemy odpowiednie z-index.
h1#pos {position: relative;z-index: 10;}h1#pos span {position: absolute;left: 1px;top: 1px;z-index: -1;}
Efekt:
Zaobserwowałem dziwny błąd na IE (musisz żartować!) w wersji 6 i 7. Otóż jeśli ustawimy letter-spacing w em-ach dla h1 to w zależności od wielkości tekstu, span będzie potrzebował innych wartości odstępu między literami. Da się metodą prób i błędów dograć jedno i drugie, ale o wiele prościej jest zaaplikować layout dla h1.
Generowana zawartość
Sposób prawie identyczny jak poprzedni - jedyny plus to że przenosimy większość modyfikacji na dokumencie do warstwy prezentacji. Jedyny minus to brak wsparcia dla GC przez IE (choć i to można obejść) oraz błędy w Firefoksie. Opera pięknie sobie radzi. HTML:
<h1 id="gc" title="Generated content">Generated content</h1>
Wykorzystujemy dodany atrybut title (znowu - można go dodać w JS i zlikwidować jakiekolwiek zmiany w HTML) zawierający tekst nagłówka w CSS:
h1#gc::before {content: attr(title);position: absolute;margin-top: 1px;margin-left: 1px;z-index: -1;}
Efekt:
Z powyższych testów wynika, że osiągniemy zadowalające rezultaty tylko poprzez powielenie tekstu (ręczne bądź skryptowe), któremu chcemy zaaplikować cień. Możemy jednak zapanować tylko nad jego kolorem i odstępem, efekty rodem z Photoshopa należy zostawić do czasu szerokiego wsparcia dla text-shadow.
A tymczasem Webkit miecie - screen z wszystkich trzech testów. ;-)
Warum 4
31 stycznia 2007, 10:23
mcv 6
31 stycznia 2007, 11:58
Speedy 10
31 stycznia 2007, 13:31
