7 września 2010

Rzut oka na CSS3.

Czy pamiętacie czasy, kiedy witryny internetowe tworzyło się tylko i wyłącznie przy pomocy HTML-a lub innych „wizjonerskich” narzędzi? Z uśmiechem na twarzy śmiało można powiedzieć, że ewolucja webdevelopingu postępuje w dość szybkim tempie, a co za tym idzie - zmieniają się rozwiązania i technologie. Cóż, tak to już bywa…

Dziś chciałbym wam przedstawić ciekawe rozwiązania kaskadowych arkuszy stylu poziomu trzeciego, w skrócie - CSS3. Na początku warto wspomnieć, że nad CSS-em trzecim wciąż trwają prace i nie został w pełni ukończony.
CSS3 to przede wszystkim wygoda, ale również problem z obsługą stylów w przeglądarkach internetowych. Najnowsze popularne przeglądarki, takie jak: Firefox, Chrome, Safari czy Opera nie powinny mieć trudności z obsługą CSS3. Jedynym mankamentem dla deweloperów pozostaje od dłuższego czasu Internet Explorer. Jak dotąd, żadna z wersji IE nie wspiera w zadowalający sposób CSS3. Sytuacja ma ulec zmianie wraz z pojawieniem się najnowszej, dziewiątej wersji IE. Na razie sporo „gimnastyki” dostarcza deweloperom stosowanie alternatywnych rozwiązań. Zatem zacznijmy:

Na początek zróbmy pojemnik, którym będziemy się posługiwać w dzisiejszym poście.
CSS:
div {
     background-color: #e55;
     color: #fff;
     height: 57px;
     width: 300px;
     text-align: center;
     border: 3px solid #fff;
     font-family: tahoma;

     padding: 5px;
}



Przezroczystość – opacity:
Aby uzyskać przezroczystość naszego pojemnika, zdefiniuję trzy klasy, w których wykorzystam właściwość opacity z różnymi wartościami. Opacity przyjmuje wartości z zakresu od 0 do 1. Wartość 0 – pełna przezroczystość, 1 – brak przezroczystości np. opacity:.60 – element jest nieprzezroczysty w 60%.
CSS:
.p10 {opacity: .1;}
.p50 {opacity: .50;}
.p70 {opacity: .70;}


Następnie użyję powyższych klas w pojemnikach.
HTML:
<div class="p10">Ten element jest nieprzezroczysty w 10%</div>
<div class="p50">Ten element jest nieprzezroczysty w 50%</div>
<div class="p70">Ten element jest nieprzezroczysty w 70%</div>


Otrzymałem następujący efekt:
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Zachowanie tekstu, gdy szerokość znacznika jest krótsza od wyrazu – word-wrap:
Wyobraźmy sobie sytuację, w której mamy pojemnik o określonej szerokości. Do tego pojemnika chcemy umieścić np. adres internetowy, jednak jak się później okazuje, tekst nie mieści się w pojemniku. Z pomocą przychodzi word-wrap. Jak to działa? Domyślnie właściwość word-wrap przyjmuje wartość normal. Poniżej efekt naszego pojemnika:
A teraz dodam do pojemnika klasę zawierającą właściwość word-wrap z parametrem break-word:
CSS:
.zawin {word-wrap: break-word;}

HTML:
<div class="zawin">Bardzo_długie_słowo,_które_teraz_mieści_się_w_moim_pojemniku.</div>

I uzyskamy następujący efekt:
Działa we wszystkich przeglądarkach.


Transformacje dwuwymiarowe – transform
Transform, czyli transformacje. W CSS3 to bardzo dobre narzędzie do niestandardowej zmiany stanu elementu. Dzisiaj opiszę następujące funkcje transformacji:
a) rotate (rotacja),
b) scale (skalowanie),
c) skew (pochylenie),
d) translate (przesunięcie).

Ad a) Rotacja – rotate
Korzystając z wcześniej już zdefiniowanego pojemnika dodam do niego klasę zawierającą styl rotacji. Jak łatwo zauważyć wartość funkcji rotate jest podawana w stopniach.
CSS:
.obroc {
       -moz-transform: rotate(90deg);
       -webkit-transform: rotate(90deg)
       -o-transform: rotate(90deg);
       transform: rotate(90deg);

}

HTML:
<div class="obroc">Obrócę pojemnik o 90 stopni!</div>

Uzyskaliśmy następujący efekt:



Ad b) Skalowanie – scale
Ok, co powiecie, aby nasz pojemnik dodatkowo powiększyć przy użyciu funkcji scale? Funkcja scale może przyjmować następujące wartości:
- scale(wartość) – funkcja proporcjonalnie przeskaluje element,
- scale(wartoscX,wartoscY) – funkcja przeskaluje element według podanych proporcji osi X i Y.
HTML:
<div class="skaluj">Przeskaluję pojemnik!</div>

CSS:
.skaluj {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);

}

Powiększyliśmy pojemnik o 20% w osi X i Y.
lub
CSS:
.skaluj {
        -moz-transform: scale(1.2,1.3);
        -webkit-transform: scale(1.2,1.3);
        -o-transform: scale(1.2,1.3);
        transform: scale(1.2,1.3);

}

Powiększyliśmy pojemnik o 20% wzdłuż osi X i o 30% wzdłuż osi Y.
Jeżeli chcemy pomniejszyć element stosujemy wartości z zakresu (0 – 0.9) np. wartość 0.5 pomniejszy element o połowę.


Ad c) Pochylenie – skew
Teraz pochylmy nasz pojemnik przy pomocy funkcji skew. Funkcja skew, podobnie jak scale może przyjmować następujące wartości:
- skew(wartość) – kąt pochylenia w stopniach osi X,
- skew(wartoscX,wartoscY) – kąt pochylenia w stopniach osi X i Y.
HTML:
<div class="pochyl">Pochylę pojemnik!</div>

CSS:
.pochyl {
        -moz-transform: skew(15deg);
        -webkit-transform: skew(15deg);
        -o-transform: skew(15deg);
        transform: skew(15deg);

}

Pojemnik został pochylony o 15 stopni wzdłuż osi X.
lub
CSS
.pochyl {
        -moz-transform: skew(15deg, 20deg);
        -webkit-transform: skew(15deg, 20deg);
        -o-transform: skew(15deg, 20deg);
        transform: skew(15deg, 20deg);

}

Pojemnik został pochylony o 15 stopni wzdłuż osi X i 20 stopni wzdłuż osi Y.



Ad d) Przesunięcie – translate:
A na koniec zobaczmy jak działa przesunięcie przy pomocy funkcji translate.
Translate podobnie jak inne funkcje, może przyjmować następujące wartości:
- translate(wartość) – przesunięcie wzdłuż osi X o zadaną wartość,
- translate(wartoscX,wartoscY) – przesunięcie wzdłuż osi X i Y o zadane wartości.
HTML:
<div class="przesun">Przesunę pojemnik!</div>

CSS:
.przesun {
         -moz-transform: translate(15px);
         -webkit-transform: translate(15px);
         -o-transform: translate(15px);
         transform: translate(15px);

}

Pojemnik został przesunięty o 15px w prawo wzdłuż osi X.
lub
CSS:
.przesun {
         -moz-transform: translate(15px, 20px);
         -webkit-transform: translate(15px, 20px);
         -o-transform: translate(15px, 20px);
         transform: translate(15px, 20px);

}

Pojemnik został przesunięty o 15px w prawo wzdłuż osi X i 20px w dół wzdłuż osi Y.
Stosując wartości ujemne, przesuniemy element w lewo lub w górę.

Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Zaokrąglone krawędzie - border-radius:
Bardzo ciekawym rozwiązaniem zastosowanym w CSS3 jest zaokrąglanie krawędzi. W dość prosty sposób jesteśmy w stanie zaokrąglić dowolną krawędź elementu w przykładowy sposób:
HTML:
<div class="okrag">Zaokrąglone krawędzie w CSS3</div>

A teraz dopiszemy fragment CSS odpowiedzialny za zaokrąglenie wszystkich rogów pojemnika.
CSS:
.okrag {
       -moz-border-radius: 45px;
       -webkit-border-radius: 45px;
       border-radius: 45px;

}

Tak oto za pomocą border-radius otrzymaliśmy poniższy efekt:

W kolejnym kroku przedstawię, jak zaokrąglić wybraną krawędź / krawędzie pojemnika.
CSS:
.okrag {
       -moz-border-radius-topleft: 55px;  
       -webkit-border-top-left-radius: 55px;   
       border-top-left-radius: 55px;

}

Otrzymamy następujący efekt:
Jak widać z powyższego kodu CSS, właściwość border-top-left-radius zaokrągliła nam lewą górną krawędź pojemnika, w podobny sposób jesteśmy wstanie zaokrąglić dowolną krawędź elementu.

Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Cienie – text-shadow i shadow
Właściwość text-shadow pozwala na dodanie cienia dla dowolnego tekstu.
HTML:
<p class="cien">Czas na cień!</p>

CSS:
p.cien {text-shadow: #ABC 20px -12px 2px;}


Pierwsza wartość określa kolor cienia, druga przesunięcie w lewo (wartości dodatnie) lub prawo (wartości ujemne). Trzecia wartość określa przesunięcie w dół (wartości dodatnie) lub w górę (wartości ujemne). Ostatnia wartość to promień rozmycia cienia tekstu.

W podobny sposób działa właściwość shadow, którą można zastosować np. do cieni pojemników.
HTML:
<div class="cienie">Czas na cień!</div>

CSS: .cienie {
        -moz-box-shadow: #011 12px 11px 5px;
        -webkit-box-shadow: #011 12px 11px 5px;
        box-shadow: #011 12px 11px 5px;

}
Przedstawione powyżej zastosowania działają w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.


Wypełnienie gradientem - linear-gradient.
Jeszcze niedawno, aby wykonać prosty przycisk na stronę internetową, byliśmy zmuszeni korzystać z gotowych obrazków lub nagimnastykować się z pojemnikami. Dziś chciałbym przedstawić prosty sposób realizacji tła gradientowego w CSS3. Przedstawiony poniżej przykład działa tylko i wyłącznie w najnowszej wersji przeglądarki Firefox.

Tworzymy pojemnik, który będziemy chcieli wypełnić gradientem:
HTML:
<div class="gradient">Mój gradient!</div>
A teraz dopiszmy fragment, który realizuje tło gradientu liniowego.

CSS:
.gradient {background: -moz-linear-gradient(45deg, #F00, #0F0);}
Uzyskamy poniższy efekt:
Pierwsza wartość kodu CSS określa kierunek wypełnienia gradientu w stopniach. Druga i kolejne wartości określają kolory wypełnienia - kolorów może być wiele.

Dodatkowo możemy ustawić ilość zajmowanego w elemencie koloru:
CSS:
.gradient {background: -moz-linear-gradient(45deg, #F00 90%, #00F);}

Druga wartość ustawia kolor #F00 na 90% objętości elementu.



Podsumowując, pragnę zwrócić uwagę na możliwości, jakie daje najnowsza wersja CSS, ale również na problemy, z jakimi borykają się deweloperzy. Świat przeglądarek internetowych rozwija się w bardzo szybkim tempie. Miejmy więc nadzieję, że nie trzeba będzie długo czekać, aż większość przeglądarek spełni najnowszy standard CSS3.

A na zakończenie powyższe przykłady css.zip.
Nie ponoszę odpowiedzialności za błędy i następstwa powstałe wskutek działania programu i kodu. Pobierasz i użytkujesz na własną odpowiedzialność.