Wiele teł w CSS3

Opublikowany: 09.11.2011 20:59:00 | Komentarzy 0

Specyfikacja CSS3 (a właściwie nowoczesne przeglądarki) umożliwia teraz zdefiniowanie kilku teł elementowi. Tego bardzo, ale to bardzo brakowało front-end developerow. Teraz zamiast zagnieszczać elementy w sobie, można zdefiniować kilka teł i odpowiednio je wypozycjonować (tudzież ułożyć). Aby móc definiować kilka teł potrzebujemy właściwości background-image zdefiniować kilka teł. Każdą definicję tła oddzielamy przecinkiem. Ogólny wzór można zdefiniować w następujący sposób:

background-image: tło1[, tło2...];

Specyfikacja nie określa maksymalnej liczby teł jakie można przypisać jednemu elementowi. Nie znaczy to, że można pojechać po bandzie i wrzucić pierdyliard :). Z głową i potrzebami.

Definiowanie kilku teł wiąże się jeszcze z definiowaniem kilku atrybutów, które poprostu muszą być zdefiniowane. Bez nich wszystkie tła będą się powtarzać (a nie zawsze tego będziemy chcieli). Tak więc musimy pamiętać jeszcze o:

• background-repeat - sposób powtarzania się tła,
• background-position - pozycja tła,
• background-origin - obszar względem którego tło będzie pozycjonowane.

W praktyce wygląda to następująco:

#element {
    background-image: url("http://jsfiddle.net/img/logo.png"),
        url("http://ycombinator.com/images/y18.gif");
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-origin: content-box, content-box;
    width: 200px;
    height: 200px;
    padding: 20px;
    border: solid 1px #000;
}

Powyższy kod:

• definiuje dwa tła,
• tła się nie powtarzają,
• pierwsze jest wypozycjonowane w lewym górnym rogu zaś drugi w prawym dolnym rogu,
• tła pozycjonowane są względem padding-box.

A wygląda to tak:

Może się zdarzyć tak, że w przypadku dużej (aczkolwiek rozsądnej :P) liczby teł ominiemy lub zapomnimy o jakiejś wartości dla trzech dodatkowych właściwości. Co wtedy się stanie? Przeglądarka wejdzie w "tryb pętli" i będzie automatycznie przypisywać brakujące wartości zaczynając od początku. Spójrz na poniższy przykład:

#element {
    background-image: url("obrazek1.png"),
        url("obrazek2.gif"),
        url("obrazek3.png"),
        url("obrazek4.jpg"),
        url("obrazek5.jpg"),
        url("obrazek6.png");
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat, repeat-y;
    background-origin: content-box, border-box, padding-box;
}

Jak widać, zdefiniowaliśmy sześć teł, zaś wypozycjonowane są tylko 2 z 6 teł. Podobnie jest z właściwością określającą powtarzalność. background-origin posiada zdefiniowane tylko 3 z 6 wartości. Jedym słowem trochę brakuje. Oczywiście wszystkie tła się pojawią. Pytanie tylko w jaki sposób zostaną wyświetlone?

#element {
    background-image: url("obrazek1.png"),
        url("obrazek2.gif"),
        url("obrazek3.png"),
        url("obrazek4.jpg"),
        url("obrazek5.jpg"),
        url("obrazek6.png");
    background-position: 0 0, 100% 100%, 0 0, 100% 100%, 0 0, 100% 100%;
    background-repeat: no-repeat, repeat-y, no-repeat, repeat-y, no-repeat, repeat-y;
    background-origin: content-box, border-box, padding-box, content-box, border-box, padding-box;
}

Życiowy przykład

To teraz czas na bardziej "zaawansowany" przykład. Jest to przykład wzięty z jednego testu na front-end developera w jednej z warszawskich korko. Część testu poszła dobrze, cześć już nie. Efekt był taki, że nie przeszedłem go. To normalka, bo na rozmowach kwalifikacyjnych zawsze dowiadujemy się tego czego nie wiemy :). Tyle słowem wstępu i dygresji :).

Zadanie polegało na pocięciu projektu graficznego i zaimplementowaniu kilku bajerów. To na czym się skupię, to pewien element, który idealnie pasuje do tego wpisu. Tym elementem jest tło. Dość specyficzne tło :).

Chodzi o to tło. Normalnie można wyciąć paseczek o szerokości 2 pikseli i odpowiedniej wysokości i załatwione. A może by to zrobić z wykorzystaniem CSS3? Da się? Jasne, że się da.

Oczywiście wykorzystać tutaj najlepiej kilka teł. Jedno gradientowe, drugie jako obrazek.

background: 
   url("bg.gif"),
   linear-gradient(
   	#fbfbfd 0px, 
   	#8f8db9 158px,  
   	#cd007b 158px,
   	#cd007b 174px,
   	#0098aa 174px,
   	#0098aa 182px,
   	#eb690b 182px, 
   	#eb690b 216px, 
   	#8b2346 216px, 
   	#8b2346 224px, 
   	#90c797 224px, 
   	#90c797 252px, 
   	#f6a400 252px, 
   	#f6a400 266px, 
   	#003882 266px,
   	#003882 285px
   );

Efektem tego kodu będzie tło które zostało pokazane jako wzór. Dla jednych to pewnie przerost formy nad treścią, ale skoro CSS3 daje takie możliwości, to dlaczego by z nich nie korzystać? Na pewno kilka osób może zadać pytanie dlaczego różne kolory zaczynają i kończą się od tego samego miejsca? Odpowiedź jest prosta. Chodzi o to, aby kolory nie przechodziły w siebie w sposób płynny (chodzi o odcienie). Czysty "gradient" (bez nałożenia tła graficznego) wygląda tak:

Całkiem fajnie to wygląda co nie? :) Niech teraz mi ktoś powie, że CSS3 nie ma potencjału.

Tagi: css background-origin css background-repeat css gradienty css background-image