W tutorialu wykonamy odcisk pieczęci. Ma on na celu praktyczne pokazanie nowości, które pojawiły się w CSS3.
W jednym z artykułów opisaliśmy najciekawsze {link_wew 6625}nowości w CSS3{/link_wew}. Spróbujmy wykorzystać je w praktyce do stworzenia utrzymanego w stylu grunge napisu imitującego odcisk pieczęci. Oczywiście końcowy efekt będzie w pełni funkcjonalnym tekstem, który można zaznaczyć, skopiować czy w łatwy sposób edytować.
Obsługiwane funkcje
CSS3 nie został jeszcze ustandaryzowany i przeglądarki traktują go bardzo różnie (patrz: ostatnia grafika). Najwięcej funkcji wdrożono w programach opartych o WebKit (Safari, Chrome), a znaczna część jest obsługiwana przez Firefoksa. Opera radzi sobie gorzej, a Internet Explorer w ogóle nie wykorzystuje możliwości CSS3. Z tego powodu nie należy stosować własności CSS3 w miejscach, w których wygląd jest ważny, w szczególności w komercyjnych projektach.
1. Niestandardowy font
Dzięki fenomenalnemu font-face możemy dołączyć do strony własne pliki z nowymi czcionkami, których użytkownik nie miał na swoim komputerze. W załączonym przykładzie odpowiada za to fragment oznaczony jako „dolaczanie fontu”.
Od teraz możemy ustalić w stylu dowolnego elementu rodzinę tekstu za pomocą standardowego atrybutu font-family. Wybieramy grungeowy font vtks distress.
2. Zaokrąglone rogi
Aby tekst przypominał pieczęć otoczymy go ramką. Standardowo ustalamy jej grubość, kolor i rodzaj. Za pomocą własności border-radius ustalamy promień skrętu. To wszystko! Nie potrzeba żadnej grafiki.
Obecnie konieczne jest poprzedzenie nazwy własności przedrostkami -moz i -webkit w zależności od wykorzystywanego silnika. Będzie to dotyczyło również innych własności, co do których nie ma pewności, że zostaną zaakceptowane (patrz przykładowy plik). Na razie musimy więc dublować fragmenty kodu. Zrzuty przedstawiają stronę wyrenderowaną przez WebKit.
3. Dodatkowe tła
CSS3 daje możliwość dodania wielu niezależnych teł do jednego elementu. Podajemy je po przecinku, a każde może zachowywać się w inny sposób: jedno będzie powtarzać się w poziomie, drugie znajdzie się tylko u góry itp.
My wykorzystamy dwa tła do „pobrudzenia” pieczątki (powtarzające się tło) i dodania plamy w prawym dolnym rogu. Niestety obecnie ten efekt działa tylko pod przeglądarkami opartymi o WebKit.
4. Wstawiamy cień
W celu uwypuklenia liter i ozdobników dodajemy lekki cień. Dzięki własnościom text-shadow i box-shadow jest to wyjątkowo proste. Warto zauważyć, że podczas renderowania strony półprzezroczysty cień zostanie nałożony na elementy tła, ale nie musi przykrywać ich w stu procentach.
5. Obracamy pieczątkę
Chyba nikomu nigdy nie udało się równo przybić pieczątki. Zapewne z tego powodu w nowym CSS-ie dodano możliwość obrócenia dowolnego elementu. Służy do tego własność transform z typem rotate. W nawiasie podajemy o ile stopni (deg) ma być obrócony element.
Najlepsze jest to, że zachowuje on wszystkie właściwości: można go kliknąć lub zaznaczyć tekst!
Mamy nadzieję, że ten tutorial pomoże zrozumieć zasadę działania nowych funkcji CSS-a. Jeszcze raz podkreślamy, że nie wszystkie prezentowane własności są obsługiwane przez wszystkie przeglądarki. W związku z tym należy tak dobrać style, żeby były jedynie ozdobą, a treść była czytelna również na starszych przeglądarkach. Na nich strony będą po prostu brzydsze.
Możesz pobrać przykład opisany w artykule
