Przydatne techniki CSS3

CSS3, wraz z HTML5, szybko zapowiada się na jedną z najciekawszych i najbardziej użytecznych technologii Web w roku 2011. W tym artykule wyjaśnię niektóre z nowych technik graficznych i bogatych właściwości dostępnych w CSS3. Dowiesz się, co może być zatwierdzona jako część końcowej specyfikacji, co nadal jest w toku i jak radzić sobie z niezgodnością w różnych przeglądarkach i brakiem wsparcia w starszych. Gotowi? No to jedziemy.

Wprowadzenie do CSS3

CSS3 jest zbiorem modułów, które rozszerzają poprzednią specyfikację CSS2, które wszyscy znamy i kochamy. Większość efektów graficznych omówionych w tym artykule pochodzą z modułów Tło i Borders. Istnieje wiele innych dodatków w CSS3, z których niektóre są bardziej zorientowane na układ, inne pozwalające na wiele sposobów radzenia sobie ze stylizacją treści, które dotychczas wymagały generowania kodu HTML lub JavaScript po stronie serwera, .

Ważną rzeczą do zapamiętania jest to, że CSS3 nadal jest rozwijane, więc tylko dlatego, niektóre z najnowszych wersji przeglądarek obsługują te funkcje.

Elementy grafiki

Zniknął denerwujący problem wiążący się z  koniecznością zapisywania dziesiątek specjalnie przygotowanych obrazów do tworzenia buttonów lub innych elementów graficznych na stronach WWW.  Także styl obramowania został rozwiązany wraz z CSS3.  Teraz dowolnie możemy korzystać z nowych właściwości kaskadowych arkuszy stylów do których należą:

Cienie

Jako projektant stron internetowych dopiero zaczynam się przyzwyczajać do faktu, że można łatwo dodawać cienie pod tekstem i elementami grafiki. Co prawda Internet Explorer nie obsługuje jeszcze właściwość text-shadow, ale Safari i Firefox od pewnego czasu dobrze sobie z tym radzą. Naprawdę ekscytujące jest że teraz można dodać drop-cienie do pól i kontrolować je za pomocą właściwości box-shadow. Składnia box-shadow wygląda tak samo jak text-shadow, które opisuje poniżej.

Gradienty

Wow! To wszystko w CSS, nie wymaga obrazów. Tak więc zdajesz sobie sprawę, jak szybko rozwijają się standardy tworzenia aplikacji webowych, w rzeczywistości nie tylko CSS3 określa standard składni dla gradientu, obecnie jest on podzielony na rózne standardy np. dla WebKit (Safari, Chrome, itp.) oraz inne wykorzystywane przez Gecko (Firefox).

Obramowanie z zaokrąglonymi rogami

CSS umożliwiło kilku różnych stylów obramowania (podwójne, wklejka, kropkowana, itp.) od pewnego czasu, ale teraz z CSS3 mamy możliwość dodawania promienia granicy do niektórych lub wszystkich kątów. Tak, zaokrąglone narożniki są obecnie możliwe bez uciekania się do szaleństw JavaScript lub obrazów! . Jest  dość skomplikowaną technika, więc odłoże tę dyskusję na inny czas. Możesz przeczytać więcej na temat specyfikacji na stronach W3C.