PROGRAMOWANIE i WEBMASTERKA

Przyglądam się ostatnio nieustająco nowemu standardowi kaskadowych arkuszy stylu czyli CSS3. Standard jest cały czas opracowywany i nie wiadomo kiedy będzie gotowy ale nowe wersje przeglądarek już go powoli implementują. W tym artykule zobaczymy co nas czeka, a czeka nas webmasterów naprawdę rewolucja bo CSS3 ułatwi nam pracę znakomicie … co prawda, długa droga jeszcze do lekkiego życia webdesignera bo wszyscy, którzy tworzą strony wiedzą, że trzeba zadbać także o użytkowników archaicznych wersji przeglądarek no ale po jakimś czasie …

Poniżej mały wstęp do nowości w CSS3 z przykładami. Na razie tylko przedstawiam pokaz możliwości nowego standardu (widoczny dla tych, którzy mają przeglądarki z zaimplementowaną obsługą przedstawianych właściwości). W następnych wpisach na tym blogu postaram się zając dokładniej każdą z omawianych, nowych funkcji CSS3.

Co nas czeka w CSS3

Poniżej wykorzystałem przykłady z www.css3.info. Niektóre przykłady są ‘podrasowane’ pod FF 3.6 (obecnie najnowszy), tam gdzie nie działa standardowy CSS3 dodany jest prefix -moz, np. -moz-box-shadow. Ergo, najlepiej oglądać tą stronę pod Fire Fox’em. Uwaga. Większość przykładów nie będzie działać pod IE z wersją 8 włącznie.

Ramki (Borders)

‘Gradientowe’ kolorowe ramki, podajemy kolor dla każdej ‘warstwy’ ramki

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Przykład kolorowej ramki:

Graficzne ramki (border-image)
Jako obramowanie do elementów możemy wykorzystać grafiki. Przykład można znaleźć tu: Border image CSS3

Zaokrąglone ramki (border-radius)

W końcu skończy się męka z popularnym zaokrąglaniem ramek . Poniższy przykład jest trochę oszukany, wykorzystuje prefiksy przeglądarek ‘-moz-border-radius:5px;-webkit-border-radius:5px;…’, w CSS3 powinno działać po prostu ‘border-radius’

Cieniowanie (Box-Shadow)

<div style="border-shadow:10px 10px 0px #909090;-moz-box-shadow: 10px 10px 0px #909090;background:black;color:white;padding:10px;border-radius:5px;-moz-border-radius:5px">Lorem Ipsum</div>

Kolory (colors)

kolory HSL (Hue, Saturation, Luminance) i HSLA

Z nadejściem CSS3 kolory będzie można podawać we współrzędnych HSL czyli Hue, Saturation, Luminance (Barwa,Nasycenie,Luminacja) i HSLA (A jak alpha-przezroczystość)

Przykład:
<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsla(120,100%, 50%, 0.4);"></div>

kolory RGBA

Do istniejącej już w poprzednich wersjach możliwości podawanie koloru we współrzędnych RGB dojdzie możliwość podawania dodawania przezroczystości

<div style="background: rgba(255, 0, 0, 0.2);"></div>

Przezroczystość

Parametr określający przezroczystość stanie się standardem. Do tej pory przeglądarki implementowały go po swojemu.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>

Tekst (Text)

Cieniowanie tekstu (text-shadow)

Bardzo efektowna właściwość. Ten przykład powinien być widoczny pod FF 3.6, Chrome 4.1 i Operą 10.1 (pod IE najnowszym nie działa)

<div style="font-size:20px;text-shadow: 2px 2px 2px #000;">Lorem Ipsum</div>

To na razie tyle nowości, oczywiście podane powyżej przykłady to tylko niewielka część możliwości CSS3 – więcej postaram się pokazać w następnych wpisach. Możecie także spodziewać się rozwinięcia informacji o poszczególnych nowościach CSS3 włącznie z moimi testami, bo jak pisałem na wstępie, przyglądam się temu standardowi bacznie.

Edycja: Część druga przeglądu nowości CSS3 znajduje się tu: Co Nowego w CSS3 cz.2