PROGRAMOWANIE i WEBMASTERKA

Informacje i porady dla programistów i webmasterów. Wersja bardzo beta

Nowości w CSS3

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:

Lorem Ipsum

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’

Lorem Ipsum

Cieniowanie (Box-Shadow)

Lorem Ipsum

<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)

Lorem Ipsum

<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

Jeden komentarz do “Nowości w CSS3”

  1. [...] poprzednim wpisie Nowości w CSS3 przedstawiłem kilka nowych właściwości kolejnej wersji kaskadowych arkuszy stylu, pisałem [...]

Komentuj

*