SOCJAL
Do góry

CSS3 w praktyce

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

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Więcej w Internet Maker

  • Jak szybko i łatwo stworzyć stronę mobilną

    W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w...

    Mateusz Chorążewicz14/11/2014
  • Strona na WordPressie? Grunt to dobry hosting

    WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów....

    Mateusz Chorążewicz14/11/2014
  • Jak zabezpieczyć swoje zdjęcia w chmurze

    Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez...

    Mateusz Chorążewicz02/09/2014
  • Jak usunąć historię swojej aktywności z Facebooka?

    Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów...

    Mateusz Chorążewicz03/01/2014
  • Pozbądź się spamu z pluginem MotionCAPTCHA

    Obecnie captcha jest jednym z najlepszych sposobów na zatrzymanie spamu. W niniejszym artykule przestawię troszkę inną jej odmianę, niż zazwyczaj możemy...

    Martyna Kilian22/08/2012
ZASUBSKRYBUJ NAS I DOSTAWAJ INFORMACJE O ISTOTNYCH NOWOŚCIACH I KONKURSACH!