Podstawy CSS3

css3-wstep-title.jpg

CSS3 to najnowsza wersja kaskadowych styli stosowanych przy kodowaniu projektów stron internetowych. Upowszechnienia tej wersji oczekiwało wielu webdeveloperów na całym świecie, a jest to związane z bardzo ciekawymi rozwiązaniami, które małym wysiłkiem mogą znacząco wpłynąć na jakość i szybkość kodowania stron internetowych. Zapraszam do zapoznania się z podstawowymi funkcjami jak zaokrąglanie rogów, cienie, gradienty, przezroczystość, a także wielokolumnowe teksty na stronie www.

Informacje wstępne

Przede wszystkim, wykorzystywanie CSS3 nie jest zależne od żadnych specjalnych nagłówków, czy oznaczeń jak to miało miejsce np. w HTML5. Po prostu wystarczy zacząć pisać nowe style w tym samym pliku css, który wykorzystywaliśmy do tej pory.

Zanim przejdziemy do opisywania konkretnych funkcji CSS3, należy wiedzieć, iż na chwilę obecną w większości właściwości wymagane jest używanie prefiksów dla konkretnych silników przeglądarek i tak dostępne mamy:

  • -moz- dla Firefox
  • -webkit- dla Chroma i Safari
  • -o- dla Opery
  • -ms- dla Internet Explorer 9

Z praktycznego punktu widzenia najczęściej w przykładach podaje się prefiksy –moz- oraz –webkit-, dla zachowania przyszłej kompatybilności warto również dodawać właściwości bez prefiksów. Poniżej przykład funkcji CSS3 odpowiedzialnych za zaokrąglenie rogów o promieniu 5px:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Poniżej chciałbym przedstawić moim zdaniem najprostsze, ale również najciekawsze właściwości CSS3, które warto wykorzystywać w swoich projektach. Zapraszam również na stronę z przykładami styli CSS3 omawianymi w tym artykule.

Zaokrąglenie rogów

Chyba najbardziej znaną funkcją CSS3 jest zaokrąglanie rogów. W erze web 2.0 na równi z cieniami i gradientami najczęściej wykorzystywany sposób zwiększania jakości projektów graficznych. Do tej pory było to jednak okupione dosyć wysoką ceną kodowania zaokrąglonych elementów. Technik było mnóstwo, ale wszystkie sprawiały pewne mniejsze lub większe problemy. Dzięki CSS3 możemy zaokrąglić rogi naszych elementów przy pomocy prostej definicji:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Możemy dla każdej strony ustalić osobne style poprzez np. kolejne komendy: border-top-right-radius, border-top-left-radius itp.

Dla ułatwienia polecam jednak korzystać ze skróconego zapisu, jest prostszy i przysparza mniej problemów:

-moz-border-radius: 30px 30px 10px 10px;
-webkit-border-radius: 30px 30px 10px 10px;
border-radius: 30px 30px 10px 10px;

Jak wieść niesie na Tweeterze zarówno silniki Gecko (FireFox4) jak i Webkit (Safari, Chrome) oznaczają funkcje border-radius jako zakończoną i tym samym umożliwiają korzystanie z tych funkcji bez prefiksów -moz- oraz -webkit-.

Cień elementów HTML

Kolejną doskonałą i zdecydowanie ułatwiającą życie funkcją jest tworzenie cieni pod elementami HTML. W CSS3 jest dostępna także właściwość cieni pod tekstem, ale moim zdaniem nadaje się ona tylko do nagłówków i tylko w przypadku bardzo subtelnego wykorzystania tego narzędzia. Jeżeli chodzi o dłuższe teksty to jeszcze nie znalazłem przypadku, w którym cienie nie wpływałyby negatywnie na czytelność serwisu, dlatego nie polecam ich stosowania. Wracając jednak do tematu, poniżej przedstawiam podstawową definicję box-shadow:

box-shadow:  [przesuniecie x] [przesuniecie y] [rozmycie] [kolor];

Kod dla przykładu dodanego do tego artykułu wygląda tak:

-webkit-box-shadow: 1px 1px 3px #bbb;
-moz-box-shadow: 1px 1px 3px #bbb;
box-shadow: 1px 1px 3px #bbb;

Gradienty

W tym miejscu pojawiają się już pewne problemy. Jak do tej pory nie została stworzona definicja gradientów bez prefiksów, oraz co gorsza zarówno Mozilla jak i Webkit mają swoją filozofie jak rozwiązać sprawę gradientów w CSS3. Kod jaki jest wykorzystywany w przykładzie wygląda następująco:

background: -moz-linear-gradient(100% 100% 90deg, #E0F0F5, #F2F9FC);
background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#E0F0F5), to(#F2F9FC));

Jego opisywanie uważam za zbyteczne, jeżeli kogoś interesuje szczegóły działania zapraszam do poszczególnych specyfikacji. Ja ze swojej strony polecam korzystać z wygodnych generatorów, które w prosty sposób pomogą wygenerować potrzebny nam kod. Ze swojej strony polecam Ultimate CSS Gradient Generator tworzy świetny kod dla wielu przeglądarek.

Przezroczystość

Właściwie możliwość przezroczystości połączona jest z obsługą w CSS3 kolorów za pomocą rgba (Red, Green, Blue, Alpha) oraz hsla (Hue, Saturation, Lightness, Alpha). Parametr alpha pozwala nam tym sposobem ustawić przezroczystość, a więc dla naszego przykładowego pola wystarczy ustawić:

background:rgba(255,255,255,0.7);

ostatni parametr odpowiada za stopień przenikania koloru w zakresie od 0 do 1.

Kolumny

Ostatnim, ale według mnie rewelacyjnym rozwiązaniem jest bardzo proste tworzenie kolumn w tekście. Mamy możliwość podania szerokości kolumny (column-width), ilości kolumn (column-count), odstęp między kolumnami (column-gap), oraz definicja wyglądu obramowania między kolumnami (column-rule), tak wygląda kod stylu dla kolumn pokazanych w przykładowej stronie:

-moz-column-count:2;
-webkit-column-count:2;
column-count:2;

-moz-column-gap:3%;
-webkit-column-gap:3%;
column-gap:3%;

-moz-column-rule:3px double #AEC7E1;
-webkit-column-rule:3px double #AEC7E1;
column-rule:3px double #AEC7E1;

Co dalej?

Powyższe 5 właściwości to zaledwie podstawy możliwości CSS3. Są one stosunkowo proste, a ich ewentualne pominięcie w starszych przeglądarkach nie wyrządzi żadnych szkód dla działania naszej strony. Oczywiście w CSS3 jest jeszcze wiele ciekawych funkcji jak transitions, wielokrotne tła, border-image i wiele innych. Niektóre opisze w osobnych artykułach, gdyż warto przeznaczyć na nie trochę więcej czasu, inne zachęcam do poznawania we własnym zakresie. Materiałów o CSS3 nie brakuje, zwłaszcza w anglojęzycznej blogosferze panuje teraz swego rodzaju euforia dotycząca CSS3 i na jej fali można przeczytać mnóstwo interesujących artykułów.

DyskusjaKomentarze: 2

  • Jamian 08 lipiec 2012 01:21
    Hay mam pytanie jeśli chcem to jako strone to mam w html oznaczyć plik tego css zapisanego w .php czy css nie wiem sam
    • Krzysztof Bachula 09 lipiec 2012 21:23
      Masz kilka sposobów wstawiania styli CSS do serwisu. Najlepiej odeśle do artykułu http://www.kurshtml.edu.pl/css/wstawianie.html. Polecam wykorzystywanie osobnego pliku dla wszystkich styli CSS, jest to pewnego rodzaju standard.

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2021 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link