Chyba każdy web developer przyzna mi rację, że po zadomowieniu się na dobre CSS3 i HTML5 na stronach www, rozpocznie się nowy rozdział w tworzeniu nowoczesnych witryn internetowych. Dostaniemy do dyspozycji masę narzędzi, które pozwolą nam tworzyć strony bardziej atrakcyjne, a zarazem szybsze. Dzięki CSS3 będziemy mogli tworzyć efekty, które wcześniej można było osiągnąć jedynie poprzez umieszczenie na stronie elementów graficznych. Oczywiście nie jestem przeciwnikiem takich rozwiązań, jednak wykonanie efektów wizualnych za pomocą kaskadowych arkuszy stylów (CSS) znacznie zwiększy wydajność strony.

Niektórzy z Was w tym momencie na pewno zadają sobie pytanie – „Dlaczego ten gość pisze o tych rzeczach w czasie przyszłym, skoro znaczniki CSS3 i HTML5 obsługują już niektóre przeglądarki?”

Zgadza się, z tym, że „przyjaciel” każdego web developera – Internet Explorer w tej chwili (w wersji 8), nie obsługuje w ogóle CSS3. Więc tak naprawdę wprowadzenie czystego CSS3 nie jest możliwe. Miejmy nadzieję, że IE9 faktycznie będzie tak rewelacyjny jak przedstawia to Microsoft i nareszcie dogoni inne przeglądarki pod względem „interpretacji standardów” CSS.

W tym artykule przedstawię nowe selektory, które pojawiają się w CSS3. Dodam też „wspomagacze” , które pozwolą wyświetlić dany efekt na wersjach przeglądarek, które nie wspierają trzeciej wersji CSS. Podświetlone linie kodu to definicja stylów arkuszy w trzeciej wersji. OK do dzieła, bo się trochę za bardzo rozpisałem na wstępie

Przykłady poszczególnych selektorów będę prezentował na tym biednym boksie :

Box Shadow

box-shadow – dodaje cień do dowolnego „klocka” na stronie

#box{

-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
box-shadow: 0px 0px 10px #bbb;

}

Pierwsze dwa atrybuty selektorów określają przesunięcie cienia względem elementu w osi X oraz Y. Trzeci to stopień rozmycia cienia, a ostatni to jego kolor.

Border Radius:

border-radius – pozwala zaokrąglić rogi danego elementu witryny

#box{

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

}

Atrybut, który podajemy określa stopień zaokrąglenia rogów elementu.

Outline:

outline – dodaje drugą ramkę do naszego elementu

#box{
outline: 1px solid #ffffff;
}

Atrybuty, które podajemy są identyczne jak w przypadku zwykłej ramki. Pierwszy to rozmiar, drugi typ i ostatni to kolor.

Gradients:

Selektor ten dodaje gradient do dowolnego elementu strony www.

#box{
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(0,224,7)),
    color-stop(1, rgb(0,171,11))
);
background-image: -moz-linear-gradient(
center bottom,
 rgb(0,224,7) 0%,
 rgb(0,171,11) 100%
);
}

Polecam ten artykuł, pozwoli zrozumieć jak dokładnie działają gradienty.

Text Shadow:

text-shadow – dzięki niemu możemy dodać cień pod tekstem

#box{
text-shadow: 1px 1px 1px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}

Atrybuty, które przekazujemy są identyczne jak w przypadku cienia pod elementami witryny. Pierwsze dwa atrybuty selektorów określają przesunięcie cienia względem elementu w osi X oraz Y. Trzeci to stopień rozmycia cienia, a ostatni to jego kolor.

@Font Face:

Chyba jeden z najbardziej wyczekiwanych selektorów. Pozwala zamieścić na stronie dowolną czcionkę. Moje osobiste zdanie na ten temat – NARESZCIE!!!

@font-face
{
	font-family: Journal;
	src: url('journal.ttf');
}
#box { font-family: Journal, sans-serif; }

Aby użyć czcionki na stronie należy wykonać dwa kroki. Po pierwsze poprzez znacznik @font-face wczytujemy nową czcionkę. Pierwszy selektor określa jej nazwę (unikalna i w zasadzie dowolna, wymyślona przez nas). W drugim selektorze podajemy ścieżkę do pliku z czcionką.
Następnie w miejscu, gdzie chcemy użyć nowej czcionki wywołujemy ją tak jak zwykle, podając jej nazwę.

Transform:

CSS3 daje nam możliwość dowolnej manipulacji elementami na stronie.

#box{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}

W przykładzie przedstawiłem jedynie możliwość obracania elementem. Więcej na temat tego selektora i jego możliwości możesz przeczytać TUTAJ.

Multiple Columns:

Selektor pozwala na ułożenie tekstu w dowolną ilość kolumn. Dodatkowo możemy ustalić odległości pomiędzy kolumnami.

#box{
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

RGBA:

Selektor pozwala ustalić kolor elementu lub czcionki za pomocą schematu kolorów RGB, dodatkowo w ostatnim atrybucie określamy przezroczystość elementu.

#box{
background-color: rgba(203, 55, 203, 0.5);
color: rgba(203, 55, 203, 0.5);
}

HSLA:

Selektor działa identycznie jak powyższy, z tym, że zamiast wartości składowych kolorów wyrażonych w liczbach podaje się ich zawartość procentową.

Selectors:

Selektory w CSS3 to dłuższy temat do rozważań i zasługują na oddzielny temat. Postaram się w najbliższym czasie takowy zmontować. Tym czasem zapraszam ciekawych do zapoznania się z TYM POSTEM.

Reflections:

Polecam ten artykuł.

Jako podsumowanie artykułu poniżej znajdziecie tabelę, która przedstawia zestawienie selektorów oraz popularnych przeglądarek.

	Chrome		Firefox		Opera		Safari	Internet Explorer
	5	4	3.6	3	10	10.5	4	6	7	8	9
RGBA
HSLA
Multiple Backgrounds
Border Image
Border Radius
Box Shadow
Opacity
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS Transforms
CSS Transforms 3D
CSS Transitions
CSS FontFace