13 października 2010

CSS3 - Kolejne przykłady

W ostatnim poście nawiązałem do nowego standardu kaskadowych arkuszy stylów CSS3. Dziś chciałbym wam przedstawić kolejne zagadnienia związane z trzecią wersją arkuszy. Na wstępie poruszę kwestię nowych modeli barw. Następnie pokażę, jak w prosty sposób zdefiniować i wykorzystać niestandardowe fonty w dokumentach HTML. Na zakończenie zaprezentuję zastosowanie właściwości tła w CSS3.

Na dobry początek wykonamy pojemnik, który posłuży nam w poniższych przykładach.
CSS:
div {
     background-color: #e55;
     color: #fff;
     height: 70px;
     width: 300px;
     text-align: center;
     border: 3px solid #fff;
     font-family: tahoma;
     padding: 5px;
}



Zastosowanie modelu RGBA
RGBA jest rozszerzeniem modelu RGB, który oprócz standardowych składowych R – red, G – green i B – blue, zawiera stopień przezroczystości oznaczony literą A – alpha channel.

W CSS3 stopień przezroczystości przyjmuje wartości z zakresu od 0 do 1. Wartość 0 – pełna przezroczystość, 1 – brak przezroczystości, np.: .50 – element jest nieprzezroczysty w 50%.
CSS:
.rgb_a {
        background-color: rgba(100,125,153,.5);
}

HTML:
<div class="rgb_a">Tło RGBA i przezroczystości 50%</div>

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



Zastosowanie modelu HSL
HSL to model, w którym każda z barw opisana jest w przestrzeni trójwymiarowej.  Model składa się z trzech współrzędnych:
H (Hue) – barwa z przedziału 0 – 360º,
S (Saturation) – nasycenie od 0 do 100%,
L (Lightness) – światło białe od 0 do 100%.
CSS:
.hs_l {
       background-color: hsl(240,100%,50%);
}

HTML:
<div class="hs_l">Tło HSL</div>

Uzyskany efekt:
Jak widać otrzymaliśmy barwę identyczną do składowych RGB o wartości R=0,G=0,B=255. Model barw HSL jest podobny do modelu HSV, którego dziś nie będę szczegółowo opisywał. Przykładowo, jeżeli ustawimy nasycenie L=0% otrzymamy kolor czarny, a gdy L=100% -  kolor biały.

Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Zastosowanie modelu HSLA
HSLA jest rozszerzeniem modelu HSL, który został wzbogacony o stopień przezroczystości oznaczony literą A – alpha channel. Jak wspomniano powyżej wartość 0 – pełna przezroczystość, 1 – brak przezroczystości.
CSS:
.hsl_a {
        background-color: hsla(120,100%,50%,.4);
}

HTML:
<div class="hsl_a">Tło HSLA i przezroczystości 40%</div>

Efekt:
Stosując powyższy kod, otrzymaliśmy barwę identyczną do składowych RGB o wartości: R=0,G=255,B=0 i przezroczystości 60%.

Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Niestandardowe fonty
Niejednokrotnie początkujący deweloperzy zastanawiali się, jak wykorzystać niestandardowe czcionki w dokumentach HTML. Wiele firm i instytucji używa własnych fontów w dokumentach i listach, więc czemu nie wykorzystać ich na stronie www? Dzięki CSS3 możemy zdefiniować i dowolnie wykorzystać czcionki Open-Type (.otf) i True-Type (.ttf).
CSS:
@font-face {
            font-family: "nowy_font";
            src: url(xtrusion.ttf);
}
.fonty {
        font-family: nowy_font;
        font-size: 40px;
}

HTML:
<p class="fonty">Moja nowa czcionka.</p>
W pierwszym kroku zadeklarowałem czcionkę w dokumencie CSS, wskazując źródło i nazwę. W kroku drugim utworzyłem klasę „fonty”, w której wykorzystałem wcześniej zadeklarowaną czcionkę „nowy_font”.

Otrzymany efekt:
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Właściwość „background-size” - rozmiar graficznego tła
Dzięki właściwości „background-size” jesteśmy w stanie określić rozmiar i układ tła dowolnego elementu. Właściwość może przyjąć wartości względne i bezwzględne oraz: „auto”, „cover”, „contain”.

a) wartości względne i bezwzględne
Stosując wartości bezwzględnie, np. „background-size: 20% 50%”, ustalimy rozmiar graficznego tła na 20% wzdłuż osi X i 50% wzdłuż osi Y. Wartości względne zachowują się w identyczny sposób.
CSS:
.tlo {
      background-image: url(tloa.jpg);
      background-size: 20px 50px;
      -moz-background-size: 20px 50px;
      -o-background-size: 20px 50px;
      -webkit-background-size: 20px 50px;
      -khtml-background-size: 20px 50px;
}

HTML:
<div class="tlo">Tło X-20%, Y-50%</div>

b) wartość – „auto”
Szerokość i wysokość zostanie automatycznie dopasowana do obszaru elementu.
CSS:
.tlo1 {
       background-image: url(tloa.jpg);
       background-size: auto;
       -moz-background-size: auto;
       -o-background-size: auto;
       -webkit-background-size: auto;
       -khtml-background-size: auto;
}

HTML:
<div class="tlo1">auto</div>

c) wartość – „cover”
Wartość zachowuje proporcje najkrótszego boku i pokrywa cały obszar elementu.
CSS:
.tlo2 {
       background-image: url(tloa.jpg);
       background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       -webkit-background-size: cover;
       -khtml-background-size: cover;
}

HTML:
<div class="tlo2">cover</div>


d) wartość – „contain”
„Contain” zachowuje proporcje najdłuższego boku i pokrywa cały obszar elementu.
CSS:
.tlo3 {
       background-image: url(tloa.jpg);
       background-size: contain;
       -moz-background-size: contain;
       -o-background-size: contain;
       -webkit-background-size: contain;
       -khtml-background-size: contain;
}

HTML:
<div class="tlo3">contain</div>
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.



Właściwość „background-clip” - tło przyległe do obramowania
Właściwość „background-clip” pozwala kontrolować zachowanie tła względem obramowania elementu.

a) Wartość „padding-box” ustawi tło pod obramowaniem.
CSS:
.clip {
       background-image: url(tlo1.jpg);
       border: dotted 5px #000;
       background-clip: padding-box;
       -moz-background-clip: padding;
       -webkit-background-clip: padding;
}

HTML:
<div class="clip">padding-box</div>


b) Wartość „border-box” nie ustawi tła pod obramowaniem.
CSS:
.clip1 {
        background-image: url(tlo1.jpg);
        border: dotted 5px #000;
        background-clip: border-box;
        -moz-background-clip: border;
        -webkit-background-clip: border; 
}

HTML:
<div class="clip1">border-box</div>
Działa w najnowszych przeglądarkach: Firefox, Safari, Chrome, Opera.

Reasumując przedstawione powyżej przykłady, pragnę zwrócić uwagę na obsługę CSS3 w przeglądarkach internetowych. Od ostatniego czasu zauważyłem dość istotny postęp w rozwoju przeglądarek: Firefox, Safari, Chrome i Opera. Na końcu stawki wciąż pozostanie Internet Explorer, jednak jak donoszą twórcy IE, najnowsza wersja przeglądarki będzie obsługiwać CSS3.

A na zakończenie powyższe przykłady: css3.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ść.