06 lipca 2009
Stylowy tekst przy użyciu text-shadow
Poniższy tekst jest tłumaczeniem artykułu "Stylish text with text-shadow", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Frederic Wenzel. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.
Własność CSS text-shadow robi to, co sugeruje jej nazwa: pozwala utworzyć lekko rozmytą i przesuniętą kopię tekstu, która przypomina prawdziwy cień.
Własność text-shadow została po raz pierwszy wprowadzona w CSS2, ale była wtedy nieodpowiednio zdefiniowana, pominięto ją w CSS2.1. Własność została przywrócona w CSS3 i obecnie wprowadzono ją w Firefoksie 3.5.
Jak to działa
Zgodnie ze specyfikacją CSS3 własność text-shadow może przyjmować następujące wartości:
none | [<shadow>, ] * <shadow>,
<shadow> jest definiowane jako:
[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],
gdzie dwie pierwsze wartości <length> odpowiadają za poziomie i pionowe przesunięcie, zaś trzecia wartość - za opcjonalne rozmycie. Najlepszym sposobem opisania własności są przykłady.
Można utworzyć prosty cień, jak na poniższym przykładzie:
text-shadow: 2px 2px 3px #000;
(Wszystkie przykłady składają się z przykładu na żywo, a następie obrazka przedstawiającego działanie funkcji — można zatem porównać zachowanie własnej przeglądarki z Firefoksem 3.5 w systemie OSX)
Jeśli ktoś woli ostre krawędzie, może zupełnie powstrzymać się od używania rozmycia:
text-shadow: 2px 2px 0 #888;
Tekst z poświatą i wielokrotne cienie
Dzięki elastyczności funkcji możliwości jej zastosowań nie kończą się na powyższych przykładach. Zmieniając wartości przesunięcia, rozmycia i oczywiście koloru, można osiągnąć różne efekty, np. tajemniczą poświatę:
text-shadow: 1px 1px 5px #fff;
lub zwykłe, niewyraźne rozmycie:
text-shadow: 0px 0px 5px #000;
Można też dodać więcej niż jeden cień, co pozwala na uzyskanie efektu “ognia” (na podstawie http://www.css3.info/preview/text-shadow/ css3.info):
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
Liczba definicji text-shadow, którą można dodać jednocześnie w Firefoksie 3.5, jest — w teorii — nieograniczona, chociaż lepiej utrzymywać je w rozsądnych granicach granicach. Jak wszystkie własności CSS, tak i text-shadow można modyfikować w locie przy użyciu JavaScript:
Wykonywanie, dostępność i zgodność z przeglądarkami
Czasy wykorzystywania w sieci obrazków (lub - jeszcze gorzej - Flasha) do uzyskania cienia tekstu są policzone z dwóch powodów:
Po pierwsze - stosowanie tekstu zamiast obrazków przynosi znaczne korzyści. Nieużywanie obrazków oszczędza przepustowość łącza i ogólne koszty połączeń HTTP. Dostępność, zarówno dla osób używających czytników ekranowych, jak i dla wyszukiwarek, jest znacznie poprawiona. Powiększanie strony działa lepiej, ponieważ skalowany jest tekst, nie zaś obrazek przy użyciu interpolacji pikseli.
Po drugie - ta funkcja jest kompatybilna z wieloma przeglądarkami:
- Opera obsługuje text-shadow od wersji 9.5. Wg danych z Mozilla Developer Center Opera 9.x obsługuje do 6 cieni dla jednego elementu.
- Safari ma tę funkcję od wersji 1.1 (a co za tym idzie - inne przeglądarki oparte WebKit związane z tą wersją).
- Internet Explorer nie obsługuje własności text-shadow, jednak ta funkcja upraszcza się poprawnie do zwykłego tekstu. W celu naśladowania w MSIE niektórych efektów text-shadow można użyć jego własnych filtrów ”Shadow” i ”DropShadow”.
- Podobnie jak MSIE, inne, starsze przeglądarki nieobsługujące tej funkcji (włączając w to Firefoksa 3 lub starszego) pokażą zwykły tekst bez żadnych cieni.
Trudnością, o której trzeba wspomnieć, jest ”kolejność rysowania”: o ile Opera 9.x stosuje się do kolejności rysowania CSS2 (to znaczy - pierwszy zdefiniowany cień jest rysowany na dole), to Firerox 3.5 używa kolejności rysowania CSS3 (pierwszy zdefiniowany cień jest na górze). Należy pamiętać o tym używając wielokrotnych cieni.
Podsumowanie
Własność text-shadow jest niewielką, lecz dającą ogromne możliwości, własnością CSS, która prawdobodobnie będzie szeroko zaadoptowana w sieci w niedalekiej przyszłości — obecnie obsługuje ją Firefox 3.5. Dzięki bezproblemowemu pomijaniu jej przez starsze przeglądarki może być bez obaw używana przez twórców stron i z czasem być dostępna dla coraz większej liczby użytkowników.
Na koniec odrobina rozważań: Jak każdą błyskotkę, należy używać jej jak soli do zupy — z umiarem, nie pełną garścią. Jeśli twórcy stron z całego świata przesadzą z jej stosowaniem, własność text-shadow może szybko umrzeć bolesną śmiercią. Byłoby to smutne, gdyby użytkownicy wzdragali się na widok tekstu z cieniem, jak miłośnicy typografii na stronie “Papyrus”, i dlatego trzeba trzymać tę funkcję głęboko w swoim skarbcu.
To powiedziawszy: Wypróbujcie ją!
Dodatkowe zasoby
Dokumentacja
- https://developer.mozilla.org/en/CSS/text-shadow
- http://www.quirksmode.org/css/textshadow.html
- http://www.w3.org/TR/css3-text/#text-shadow
Przykłady
19 komentarzy
W końcu Fx to interpretuje, szkoda że dopiero teraz, ale lepiej później niż wcale.
Btw. świetnie wyszedł motyw "wypróbujcie ją" ;)
Wat. Ale... po co? Po co to komu? Ja jak widze taki wycieniowamy tekst to mi sie przypomina web 0.1 i tlo w latajace slonie.
Dodek - Dla lepszego efektu wizualnego?
Ten efekt ognia, pomimo iż ciekawy techniczne, jest w praktyce zupełnie nieprzydatny i strasznie, hm, "cheesy". A te cienie CSSowe i tak nie wyprą z użytku programów graficznych.
Dodek — w/w efekt ognia jest tylko, aby pokazać możliwości @text-shadow@.
A w ogóle co mają cienie do programów graficznych — każde z nich jest używane do czego innego. Sorry za dubel, za szybki enter.
Chodzi mi o to, że jako zastosowanie tego przychodzą mi na myśl loga czy różne ozdobniki, ale zrobienie tego w programie graficznym jest łatwiejsze i bardziej przenośne.
Łatwiejsze? Wyklepanie obrazka + potem Image replacement jest łatwiejsze niż wstawienie jednej właściwości do arkusza styli? Nie wierzę. Co najwyżej, programy graficzne oferują więcej niż CSS, chociaż dalej uważam, że porównywanie jednych do drugiego nie ma sensu.
Zrobienie "efektu ognia" w programie graficznym jest dużo łatwiejsze i logiczniejsze niż wklepanie paru niewiele mówiących liczb w arkuszu stylów.
Mam wrażenie, że dalej nie rozumiesz, że to tylko przykład możliwości CSSa, a nie instrukcja jak upiększyć nagłówki na swoim blogu.
Doskonale zdaję sobie z tego sprawę, ale jak już powiedziałem w pierwszym komentarzu, nie widzę zastosowania dla tej funkcjonalności.
@Dodek jako np ladny :hover ?
@Dodek
"Zrobienie "efektu ognia" w programie graficznym jest dużo łatwiejsze i logiczniejsze niż wklepanie paru niewiele mówiących liczb w arkuszu stylów."
Dla kogo? Bo dla mnie będzie znacznie szybciej i _prościej_ zrobić to w CSS niż w Photoshopie... Ale ja nie jestem grafikiem. I taka funkcjonalność w CSS znacznie ułatwia/upraszcza sprawę - zwłaszcza jak już wspomniał teamon z efektami hover, active - żadnego użerania się z obrazkami, tylko czysty tekst do obróbki. Dla mnie: ideał :)
``Zrobienie "efektu ognia" w programie graficznym jest dużo łatwiejsze i logiczniejsze niż wklepanie paru niewiele mówiących liczb w arkuszu stylów.``
Pracowałeś gdzieś jako grafik/designer?
"Pani Kaaasiu, a może zmienimy ten kolor na jakiś taki bardziej <słowo które za uja nie kojarzy się z kolorem>?"
Odpalasz Photoshopa, odpalasz projekt, zmieniasz grafikę, wysyłasz do webdesignera a on podmienia obrazek na FTP
vs
Odpalam Zend'a i zmieniam kolor w CSS.
Przykład zastosowania text-shadow można zobaczyć na blogu Peceta (pecet.jogger.pl; w tytule notki).
Albo przykłady użycia subtelnego estetycznego cienia:
* http://neutroncreations.com/
* http://log.maniacalrage.net/
* http://www.realmacsoftware.com/littlesnapper/iphone/
* http://www.svnpack.com/
Dałoby radę włączyć Textile? Byle nie Lite, bo to to nieporozumienie jest (z resztą, jak całe Textile). ;-)
Witam.
Text-shadow według mnie to jedna z najlepszych własności css3. Jeżeli ktoś nie rozumie w jaki sposób może ona ułatwić życie zwykłego webdesignera to najprawdopodobniej nim nie jest. Odnoszenie się do jej przydatności bazując na przykłądzie efektu ognia jest śmieszne, to tylko przykład podany przez autora. Przypuśćmy że robimy strone z menu z 8 elementami każdy z nich z rozwijanym javascriptem menu, do tego strona ma być w 3 języka a projektant np. wymyślił sobie cień 1px 1px. Rozwiązania 1. budujemy menu na obrazkach i robią się zajebiste schody 2. Używamy text shadow w połączeniu z @font-face i możemy już dynamicznie generować menu lecz nie koszte wyglądu. Właśnie takie menu zrobiłem dorzuciłem jeszcze do tego cross-browser box-shadow dla rozwijanych elementów menu i jest pięknie!!!! Troszke wyobraźni ludzie, nie każdy cień wyglądą jak 5px 5px #000 na białym tle!!
świetny art. pozdrawiam! :)