Smaczki CSS3

Autor: Mateusz Czyżewski, Data: 11/01/2009

Ufam, że większość osób czytających ten wpis miało już styczność z kaskadowymi arkuszami stylów. Jak wiemy język ten powstał po to, aby oddzielić treść od kodu odpowiedzialnego za jego prezentację. Chciałbym przedstawić najciekawsze funkcje wprowadzone w trzeciej edycji tego języka. Paradoksalnie, przez kilka kolejnych lat nie będziemy mogli używać ich do tworzenia komercyjnych projektów dla klientów – nadal bardzo popularną przeglądarką jest niestety Internet Explorer. W czasie, gdy jego konkurenci co kilka miesięcy wypuszczają na rynek kolejne wersje swoich produktów, Microsoft średnio raz w roku dodaje do IE kilka funkcji zapożyczonych od konkurencji i szumnie prezentuje je światu. Im więcej projektów wykonuję, tym szybciej rośnie moja nienawiść do tej firmy. Ich bierność w sprawach standardów sieciowych nie mieści mi się w głowie.

Ale wracając do tematu, zaprezentowane przeze mnie funkcje widoczne będą póki co jedynie w przeglądarkach Firefox, Safari i Chrome. Na szczęście Opera planuje w najbliższym czasie opublikować wersję oznaczoną numerem 10, która według zapowiedzi będzie kompatybilna z 3 wersją arkuszy stylów.

Zaokrąglanie krawędzi

W końcu doczekaliśmy się tej funkcji. Dzięki niej nie będziemy już musieli wstawiać narożników jako obrazki. CSS3 daje nam możliwość zaokrąglania narożników:

1
border-radius: 20px;

Border-radius może być również wykorzystywany do zaokrąglania poszczególnych zakątków, wtedy składnia wygląda następująco:

1
2
3
4
border-radius-topleft: 20px;
border-radius-topright: 20px;
border-radius-bottomleft: 10px;
border-radius-bottomright: 10px;

Przykład zastosowania tego efektu możemy podejrzeć na stronie Twitter.com, a dokładny opis na stronie W3C border-radius.

Cienie

Dzięki CSS3 do tworzenia cieni dla różnych elementów już nie będzie nam potrzebny Photoshop. Polecenie wygląda następująco:

1
box-shadow: 10px 10px 25px #ccc;

Pierwsze dwa atrybuty określają wielkość cieni w odniesieniu do elementu, w tym przypadku, 10 pikseli na osi X i Y. Trzeci atrybut ustawia poziom rozmycia cienia. Na końcu ustawiamy kolor.

Przykład: 24 Ways, więcej o cieniach:  W3C Box Shadow.

Przezroczystość

Nowa odsłona kaskadowych arkuszy stylów daje nam możliwość ustawienia przezroczystości dla każdego elementu. Do tej pory, gdy używaliśmy polecenia filter wszystkie elementy, które znajdowały się wewnątrz tego div`a również otrzymywały taką przezroczystość. Powodowało to nieczytelność znajdujących się wewnątrz elementów, zwłaszcza tekstu. Mam nadzieję, że teraz zostanie to wyeliminowane, choć nie mam 100% pewności, nie przeprowadzałem jeszcze testów. Przykłady:

1
2
3
background: rgba(200, 54, 54, 0.5);
/* lub: */
color: rgba(200, 54, 54, 0.5);

Pierwsze trzy cyfry odnoszą się do czerwonego, zielonego i niebieskiego koloru (jak wiemy w modelu RGBA kolory tworzymy mieszając te 3 barwy), a końcowa wartość odnosi się do kanału alfa, który wytwarza efekt przezroczystości.

Łatwiejszym sposobem jest jednak podanie zwyczajnie koloru, a przezroczystość ustawić osobnym poleceniem:

1
2
color: #000;
opacity: 0.5;

Przykład: 24 Ways, więcej o przezroczystości:  W3C RGBA Color.

Niestandardowe czcionki

Nie zawsze zestaw podstawowych czcionek pasuje do naszego projektu strony internetowej. Dzięki regule @font-face mamy możliwość wywołania interesującej nas czcionki z katalogu online:

1
2
3
4
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Kolejne deklarowanie czcionki odbywa się już normalnie:

1
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Podsumowanie

Ponieważ język CSS3 jest wciąż w fazie rozwoju i funkcje tutaj opisane działają pod niewielką liczbą przeglądarek, nie możemy na razie wykorzystywać ich w projektach komercyjnych. Póki co żaden moduł CSS3 nie uzyskał statusu specyfikacji W3C.

Fragmenty tekstu zaczerpnięto z www.smashingmagazine.com

Komentarze

  1. Tom says:

    Bardzo ładny blog i ciekawy wpis. Nie wiedziałem o wszystkich tych możliwościach. A kiedy pojawi się pierwsza wyszukiwarka wspierająca CSS3?

  2. sparhawk says:

    Te zaokrąglone rogi to mam wrażenie, że są podyktowane modą web 2.0… Ale każde nowe możliwości się przydadzą

  3. Mateusz Czyżewski says:

    Pierwszy raz słyszę, aby wyszukiwarka wspierała język CSS. Nie bardzo rozumiem co masz na myśli. Wyszukiwarka cache`ując stronę pobiera jedynie jej kod html, przy późniejszym wyświetlaniu kopii obrazki i pliki stylów pobierane są z serwera gdzie umieszczona jest dana strona. Interpretacją CSS zajmuje się już przeglądarka.

  4. Mateusz Czyżewski says:

    Tak jak pisałem, większość tych funkcji nie działa jeszcze w przeglądarkach. Efekt widoczny będzie jedynie w przeglądarce Safari 3.1, Firefox 3.1 (aktualnie w fazie beta) i być może Chrome.

  5. antym says:

    Moim zdaniem efekt nie będzie widoczny JEDYNIE w IE.
    Żadna strata 🙂

  6. Mateusz Czyżewski says:

    Nie masz racji, Opera również nie wspiera jeszcze tych rozwiązań. Natomiast mile zaskoczony jestem faktem, że Google Chrome obsługuje już te nowinki.

  7. vojski says:

    Opera większości tych właściwości nie wspiera, wspiera natomiast fajny wynalazek o którym autor nie wspomniał – cieniowanie tekstu przy pomocy text-shadow (w Firefox 3.5, Safari i Chrome też działa). W przypadku Chrome obsługa CSS3jest niemal identyczna jak w Safari – w końcu oba to silnik Webkit… Wspomniana przez autora składnia border-radius pochodzi od Mozilli, w Webkit wygląda ona trochę inaczej (webkitowa jest zbieżna z zaleceniami W3C); na razie nie działa bez przedrostków – odpowiednio -moz-border-radius i -webkit-border-radius, podobnie jest z box-shadow. Nie wiem czy zaokrąglone rogi to moda, ale wprowadzenie ich do CSS3 było świetnym pomysłem, zaoszczędza sporo pracy i pozwala na tworzenie naprawdę fajnych rzeczy. Polecam świetne żródło wiedzy na ten temat – http://www.css3.info

  8. Mateusz Czyżewski says:

    vojski dziękuję Ci za ciekawy komentarz. Ja również uważam, że zaokrąglanie krawędzi za pomocą CSS`a jest świetnym pomysłem. Dla mnie największymi plusami tego rozwiązania jest możliwość szybszego wprowadzania zmian, a także zaprzestanie używania w tym celu grafiki.

Dodaj komentarz:

Kanal RSS - nowosci

Witaj!

Witaj na blogu poświęconym wszystkiemu, co wiąże się ze stronami www. Przeczytasz tutaj o procesie ich tworzenia, pozycjonowaniu, wymianie linków, zarabianiu w programach partnerskich itp.

Odnajdziesz tutaj szablony stworzone w języku HTML dostępne całkowicie za darmo.

Jednym z działów jest moje potrfolio, a więc zbiór najlepszych prac.

Polecam:

atrakcje turystyczne

wyjade.pl - atrakcje, szlaki, wydarzenia

Popularne szablony:

Szablon 4

Szablon 4

Szablon 1

Szablon 1

Szablon 8

Szablon 8

Szablon 5

Szablon 5

Copyright 2007 - 2009 by flankerds.com. Wszystkie prawa zastrzeżone.