CSS3 – view into the future

Krzysiek Furtak Ogólne 6 Comments

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

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Box Shadow

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

[css highlight=”5″]

#box{

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

}

[/css]

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.

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Border Radius:

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

[css highlight=”5″]

#box{

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

}

[/css]

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

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Outline:

outline – dodaje drugą ramkę do naszego elementu

[css highlight=”2″] #box{
outline: 1px solid #ffffff;
}
[/css]

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

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Gradients:

Selektor ten dodaje gradient do dowolnego elementu strony www.

[css] #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%
);
}
[/css]

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

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Text Shadow:

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

[css highlight=”2″] #box{
text-shadow: 1px 1px 1px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
[/css]

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.

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

@Font Face:

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

[css] @font-face
{
font-family: Journal;
src: url(‚journal.ttf’);
}
#box { font-family: Journal, sans-serif; }
[/css]

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ę.

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Transform:

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

[css] #box{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
[/css]

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.

Przykład nagłówka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis suscipit augue, id hendrerit magna cursus a.

Multiple Columns:

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

[css highlight=”6,7″] #box{
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
[/css]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget orci nec lacus auctor tempus vitae sagittis augue. Phasellus vitae eros quam, non aliquet sapien. Sed ut justo vitae augue sagittis consequat. Nulla iaculis tempor pulvinar. Donec gravida gravida accumsan. Cras placerat mollis orci placerat dapibus. Cras nec blandit neque. Vivamus congue nulla at massa sollicitudin vel rutrum libero pharetra. Suspendisse sollicitudin ullamcorper laoreet. Donec libero nulla, sagittis vitae posuere sit amet, tincidunt et libero. Cras pellentesque sodales dui. Nullam pharetra cursus justo sit amet ultrices. Ut eleifend fringilla purus, eu dictum nunc semper quis.

RGBA:

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

[css highlight=”2,3″] #box{
background-color: rgba(203, 55, 203, 0.5);
color: rgba(203, 55, 203, 0.5);
}
[/css]

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