Piwnica IT... Maciej Koplin: CSS3

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ść.