Nowy sposób: wiele środowisk z CSS3. Jak zrobić wiele obrazów tła CSS

W CSS 2 dodanie dwóch teł do jednego elementu w tym samym czasie jest nierealne, więc musisz zagnieździć jeden element w drugim i ustawić własne dla każdego własne tło nowy rysunek. W przypadku skomplikowanych układów takich załączników można czasem policzyć około tuzina. Wiadomo, że takie nagromadzenie nie prowadzi do niczego dobrego, ale co robić? Okazuje się, że coś jest! W CSS 3 możesz dodać wiele obrazów tła do dowolnego elementu jednocześnie. Bierzemy więc rysunek blokowy (ryc. 1), kroimy go na kawałki i zaczynamy testować w przeglądarkach.

Ryż. 1. Zablokuj witrynę

Dla uproszczenia przyjmę szerokość bloku jako stały rozmiar, a wysokość będzie się różnić w zależności od zawartości. Górna i dolna część są wyraźnie widoczne na rysunku; wyciąłem je w edytorze i złożyłem warstwami w osobnym pliku. Środkową część należy wybrać tak, aby powtarzała się w pionie bez szwów. Projekt ma dobrze zdefiniowany, powtarzający się wzór, więc nie powinno być trudności z jego podkreśleniem. Kopiuję i wklejam do poprzednich fragmentów. Rezultatem będzie taki obraz (ryc. 2).

Ryż. 2. Przygotowane obrazy

W zasadzie możesz zapisać każdy fragment jako osobny plik, ale spritey CSS (tzw. technologia sklejania kilku obrazków w jeden) mają szereg zalet. Po pierwsze, zmniejsza się liczba żądań do serwera ze względu na zmniejszenie liczby plików, a po drugie, zdjęcia ładują się i wyświetlają w sumie szybciej.

Samo tło jest wyświetlane przez właściwość tła, która określa również współrzędne żądanego fragmentu. Parametry każdego tła są wymienione oddzielone przecinkami i w tym przypadku ich kolejność ma znaczenie. Potrzebuję góry i Dolna część bloki nie nakładały się na siebie, więc umieściłem je na pierwszym miejscu (przykład 1).

Przykład 1. Wiele obrazów tła

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Pierwsze tło wyświetla górną granicę bloku, drugie tło - dolne, a trzecie - pionowe krawędzie.

Sprawdzamy w przeglądarkach. Internet Explorera 8 w ogóle nie wyświetlało żadnych zdjęć, inne przeglądarki (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) wyświetlały ramkę poprawnie (rys. 3).

Ryż. 3. Widok ramki w przeglądarce Safari

Korzystanie z wielu teł znacznie ułatwia sytuację programistom, zwłaszcza podczas układania bloków. Została tylko jedna mała rzecz. Konieczne jest, aby przeglądarka IE 6–8 przestała istnieć.

• Instruktaż

Mówiliśmy już o możliwościach modułu CSS3 Tła i Obramowania, przyglądając się pracy z cieniami (box-shadow). Dziś porozmawiamy trochę o kolejnym ciekawa okazja- używanie wielu obrazów w tle.

Skład tła

Istnieje wiele powodów, dla których warto komponować wiele obrazów w tle, z których najważniejsze to:

• oszczędność ruchu na rozmiarze obrazu, jeśli indywidualne obrazyłącznie waży mniej niż obraz ze spłaszczonymi warstwami, oraz
• konieczność niezależnego zachowania poszczególnych warstw np. przy realizacji efektów paralaksy.

Mogą być inne rozsądne powody :)

Klasyczne podejście

Musimy więc umieścić kilka obrazy tła jeden nad drugim. Jak zwykle rozwiązuje się ten problem? To bardzo proste: dla każdego obrazu tła tworzony jest blok, do którego przypisany jest odpowiedni obraz tła. Bloki są albo zagnieżdżane jeden w drugim, albo układane w rzędzie, zgodnie z odpowiednimi zasadami pozycjonowania. Oto prosty przykład:

Blok z klasą „fishing” wewnątrz „syrenka” służy wyłącznie celom demonstracyjnym.

Teraz kilka stylów:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( wysokość:300px; szerokość:480px; pozycja: względna; ) .sample1 .sea ( tło: url(media/sea.png) powtórz-x górny lewy; ) .sample1 .mermaid ( tło: url(media/mermaid.svg) powtórz-x na dole po lewej; ) .sample1 .fish ( tło: url(media/fish.svg) bez powtórzeń; wysokość: 70px; szerokość: 100px; po lewej : 30px; u góry: 90px; pozycja: bezwzględna) .sample1 .fishing ( tło: url(media/fishing.svg) bez powtórzeń w prawym górnym rogu 10px; )

Wynik:

W tym przykładzie obok bloków „tła” znajdują się trzy zagnieżdżone tła i jeden blok z rybami. Teoretycznie ryby można przenosić np za pomocą JavaScriptu lub Przejścia/Animacje CSS3.

Nawiasem mówiąc, w tym przykładzie „.fishing” zastosowano nową składnię pozycjonowania w tle, również zdefiniowaną w CSS3:
tło: url(media/fishing.svg) bez powtarzania w prawym górnym rogu 10 pikseli;
Obecnie jest obsługiwana w IE9+ i Operze 11+, ale nie jest obsługiwana w Firefoksie 10 i Chrome 16. Dlatego użytkownicy dwóch ostatnich przeglądarek nie będą mogli jeszcze złowić ryby.

Wiele środowisk

Z pomocą przychodzi nowa opcja dodana do CSS3 - możliwość zdefiniowania wielu obrazów tła dla jednego elementu. To wygląda tak:

I odpowiednie style:
.sample2 .sea ( wysokość: 300 pikseli; szerokość: 480 pikseli; pozycja: względna; obraz tła: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); pozycja tła: prawy górny 10px, lewy dolny, lewy górny; powtórzenie tła: brak powtórzeń, powtórz-x, powtórz-x ; ) .sample2 .fish ( tło: url("media/fish.svg ") bez powtórzeń; wysokość: 70px; szerokość: 100px; po lewej: 30px; góra: 90px; pozycja: bezwzględna; )
Aby zdefiniować wiele obrazów, należy skorzystać z reguły obrazu tła, wymieniając poszczególne obrazy oddzielone przecinkami. Dodatkowe reguły, także lista, pozwalają ustawić położenie, powtórzenia i inne parametry dla każdego obrazu. Zwróć uwagę na kolejność obrazów na liście: warstwy są wymienione od lewej do prawej, od góry do dołu.

Wynik jest dokładnie taki sam:

Jedna zasada

Jeśli do kolejnych manipulacji nie trzeba dzielić ryby na osobny blok, cały obraz można przepisać jednym prosta zasada:

Style:
.sample3 .sea ( wysokość: 300 pikseli; szerokość: 480 pikseli; pozycja: względna; obraz tła: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); pozycja tła: prawy górny 10px, lewy dolny, 30px 90px, lewy górny; powtórzenie tła: brak powtórzeń, powtórz-x ; )

Nie pokażę zdjęcia wyniku - wierzcie mi, pokrywa się z dwoma powyższymi zdjęciami. Ale zwróć jeszcze raz uwagę na style, szczególnie na „powtórzenie tła” - zgodnie ze specyfikacją, jeśli na końcu brakuje części listy, przeglądarka musi powtórzyć określoną listę wymaganą liczbę razy, aby dopasować liczbę obrazów na liście.

W tym przypadku jest to równoważne temu opisowi:
powtórzenie w tle: brak powtórzeń, powtórz-x, bez powtórzeń, powtórz-x;

Jeszcze krócej

Jeśli pamiętasz CSS 2.1, zdefiniował on możliwość opisywania obrazów tła w skrócona forma. A co powiesz na wiele obrazów? Jest to również możliwe:

Próbka 4 .sea ( wysokość:300px; szerokość:480px; pozycja: względna; tło: url("media/fishing.svg") prawy górny 10px bez powtórzeń, url("media/mermaid.svg") dolny lewy powtórz-x , url("media/fish.svg") 30px 90px bez powtórzeń, url("media/sea.png") powtórz-x )

Pamiętaj jednak, że teraz nie możesz po prostu pominąć wartości (chyba że odpowiadają wartości domyślnej). Nawiasem mówiąc, jeśli chcesz ustawić kolor obrazu tła, musisz to zrobić na ostatniej warstwie.

Dynamiczne obrazy

Jeśli kompozycja jest statyczna lub co najwyżej dynamiczna w zależności od wielkości pojemnika, wówczas wiele tła w oczywisty sposób upraszcza projekt strony. Co jednak w przypadku konieczności pracy z poszczególnymi elementami kompozycji niezależnie od javascriptu (przesuwanie, przewijanie itp.)?

Nawiasem mówiąc, oto przykład z życia - motyw z mniszkiem w Yandex:


Jeśli zajrzysz do kodu, zobaczysz coś takiego:

...

Bloki z klasami „b-fluff-bg”, „b-fluff__cloud” i „b-fluff__item” zawierają nakładające się na siebie obrazy tła. Co więcej, tło z chmurami stale się przewija, a po ekranie latają mlecze.

Czy można to przepisać, używając wielu teł? W zasadzie tak, ale pod warunkiem 1) obsługi tej funkcji w docelowych przeglądarkach i... 2) czytaj dalej;)

Jak dodać dynamikę do wielu teł? W takiej sytuacji wygodne okazuje się, że w reprezentacji wewnętrznej przeglądarka rozdziela poszczególne parametry obrazów tła według odpowiednich reguł. Na przykład dla pozycjonowania istnieje „pozycja tła”, a dla przesunięć wystarczy zmienić tylko tę pozycję. Jednakże użycie wielu obrazów wiąże się z kosztami - ta zasada (i każda podobna) wymaga podania pozycji wszystkich teł zdefiniowanych dla Twojego bloku i nie możesz tego zrobić wybiórczo.

Aby dodać animację do tła naszej ryby, możesz użyć następującego kodu:
$(dokument).ready(function() ( var morze = $(.sample5 .sea"); var rybyX = 30; var rybyY = 90; var rybyX = 0; var rybyY = 0; var syrenaX = 0; var t = 0; funkcja animacjaLoop() ( rybyY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--rybyX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) syrenaX = 0; rybaY = -10 + (10 * Math.cos(t * 0,091)); rybaX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "góra " + rybaY + "px prawa " + rybaX + "px, " + syrenkaX + "px dół" + rybaX + "px " + rybaY + "px, górna lewa"; window.requestAnimFrame(animacjaPętla); ) animacjaPętla(); ));
Gdzie
window.requestAnimFrame = (funkcja() ( zwróć window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkcja(callback) ( window.setTimeout(callback, 1000 / 60 ));

A tak na marginesie, animacje można też zrobić za pomocą Przejść/Animacji CSS3, ale to temat na osobną dyskusję.

Paralaksa i interaktywność

Wreszcie podobne manewry mogą z łatwością dodać efekty paralaksy lub interaktywną interakcję z tłem:

W takich scenariuszach przydatnych jest wiele obrazów tła, ponieważ choć mówimy tylko o tle (a nie o treści), ich użycie pozwala uniknąć zaśmiecania kodu HTML i DOM. Ale wszystko ma swoją cenę: nie mogę się do niej zwrócić poszczególne elementy kompozycje według nazwy, identyfikatora, klasy lub innego parametru. Muszę wyraźnie zapamiętać kolejność elementów w kompozycji w kodzie, a przy każdej zmianie dowolnego parametru dowolnego elementu tak naprawdę muszę skleić linijkę opisującą wartości tego parametru dla wszystkich elementów i zaktualizować ją dla całą kompozycję.

Sea.style.backgroundPosition = "góra " + rybaY + "px prawa " + rybaX + "px, " + syrenkaX + "px dół" + rybaX + "px " + rybaY + "px, górna lewa";

Jestem pewien, że da się to owinąć wygodnym kodem JavaScript, który przejmie wirtualizację relacji z oddzielne warstwy, pozostawiając kod HTML strony tak czysty, jak to możliwe.

A co z kompatybilnością?

Wszystko nowoczesne wersje popularne przeglądarki, w tym IE9+, obsługują wiele obrazów (możesz to sprawdzić na przykład za pomocą caniuse).

Możesz także użyć Modernizr, aby udostępnić przeglądarki, które nie obsługują wielu środowisk alternatywne rozwiązania. Jak napisał Chris Coyier w swoim poście na temat kolejności warstw podczas korzystania z wielu teł, wykonaj coś takiego:

Treść Multiplebgs ( /* Niesamowite wielokrotne deklaracje BG, które wykraczają poza rzeczywistość i bez źródła piskląt */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Jeśli nie masz pewności co do używania JS do udostępniania Kompatybilność wsteczna, możesz po prostu zadeklarować tło dwukrotnie, jednak ma to również swoje wady w postaci możliwych podwójny rozruch zasoby (zależy to od implementacji przetwarzania CSS w konkretnej przeglądarce):

/* wielokrotny powrót bg */ tło: #000 url(...) ...; /* Niesamowite wielokrotne deklaracje BG, które wykraczają poza rzeczywistość i bez źródła piskląt */ tło url(...), url(...), url(...), #000 url(...);

Jeśli zacząłeś już myśleć o systemie Windows 8, pamiętaj, że podczas tworzenia aplikacji w stylu metra możesz używać wielu teł, ponieważ korzysta on z tego samego silnika co IE10.

P.s. Wracając do tematu: nie mogę nie wspomnieć o fenomenalnym artykule na temat zasady cykady.

Tagi: Dodaj tagi

Możesz dodać wiele obrazów tła do jednego elementu jednocześnie za pomocą jednej właściwości tła. Dzięki temu można za pomocą jednego elementu stworzyć złożone tło lub jeden obraz, wyświetlając go wielokrotnie różne ustawienia. Wszystkie obrazy wraz z ich parametrami są wymienione oddzielone przecinkami, przy czym obraz wyświetlany nad pozostałymi obrazami jest wskazany odpowiednio jako pierwszy i ostatni jako obraz najniższy. Przykład 1 pokazuje, jak utworzyć tło z trzech obrazów.

Przykład 1. Trzy tła

Jeśli chcesz osobno ustawić jakąś właściwość stylu dla tła, np. rozmiar tła jak w powyższym przykładzie, wówczas parametry dla każdego tła zostaną wyświetlone oddzielone przecinkami. Wynik ten przykład pokazany na ryc. 1.

Ryż. 1. Tło z trzema obrazami

Poszczególne obrazy tła umożliwiają zmianę ich położenia, a także animację, jak pokazano w przykładzie 2.

Przykład 2: Animowane tło

Zastanówmy się teraz, jak wykorzystać jeden obraz do stworzenia bloku z ramką (ryc. 2). Szerokość bloku jest stała, a wysokość zmienia się w zależności od objętości zawartości bloku.

Ryż. 2. Ręcznie rysowana ramka

Rysunek wyraźnie pokazuje górną i dolną część, które należy wyciąć edytor graficzny i ustaw go poziomo. Środkowa część jest wybrana tak, aby była powtarzana w pionie bez szwów. Obraz ma wyraźny powtarzający się wzór, więc nie powinno być trudności z jego podkreśleniem. Rezultatem będzie przygotowany obraz (ryc. 3). Pole w kratkę wskazuje przezroczystość; pozwala ustawić kolorowe tło wraz z obrazami i łatwo je zmieniać poprzez style.

Ryż. 3. Obraz przygotowany jako tło

Samo tło jest wyświetlane przez właściwość tła, która określa również współrzędne żądanego fragmentu. Parametry każdego tła podane są oddzielone przecinkami i w tym przypadku ma znaczenie ich kolejność. Chcemy, aby góra i dół bloku nie zachodziły na siebie, dlatego umieszczamy je na pierwszym miejscu (przykład 3). Kolor tła jest określany jako ostatni.

Przykład 3. Kilka obrazów tła

Pierwsze tło wyświetla górną granicę bloku, drugie tło - dolne, a trzecie - pionowe krawędzie. Ostatni to kolor widoczny w przezroczystej środkowej części bryły (ryc. 4).

Użycie pseudoelementów CSS 2.1 pozwala uzyskać 3 poziomy tła, 2 obrazy o stałych wymiarach i wiele skomplikowanych pociągnięć dla jednego Element HTML. Ta metoda znacznie rozszerza możliwości projektowania stron internetowych dla wszystkich przeglądarek obsługujących pseudoelementy CSS 2.1 z pozycjonowaniem. Nie jest wymagana obsługa CSS3.

Zasadniczo tworzenie i praca z pseudoelementami CSS (:before i :after) jest podobna do pracy z zagnieżdżonymi elementami HTML w elemencie docelowym. Ale z jedną istotną zaletą - wszystko odbywa się poza semantyką, bez użycia zagnieżdżonych elementów HTML.

Aby utworzyć wiele teł i/lub obrysów, pseudoelementy są przesuwane za treść i do niej dołączane właściwy punkt Element HTML wykorzystujący pozycjonowanie bezwzględne.

Pseudoelement nie zawiera żadnej rzeczywistej treści i jest pozycjonowany bezwzględnie. W ten sposób można go rozciągnąć na dowolny obszar elementu „nadrzędnego” bez wpływu na treść. Aby to zrobić, możesz użyć kombinacji właściwości top , Right , Bottom , left , szerokość i wysokość.

Jakie efekty możesz uzyskać?

Używając tylko jednego elementu, możesz uzyskać paralaksę, wiele teł (zarówno kolorów, jak i obrazów), przycięte obrazy tła, podmianę obrazu, elementy rozwijane z obrazami jako kontur, elastyczne sztuczne kolumny, obrazy wykraczające poza granice elementu, wielokrotne uderzenia i inne popularne efekty, które zazwyczaj wykorzystują znaczniki graficzne i/lub dodatkowe znaczniki HTML.

Na stronach demonstracyjnych można zobaczyć implementację kilku popularnych efektów projektowania stron internetowych przy użyciu tej techniki.

Ponadto możesz użyć zmian stylu dla :hover, aby uzyskać bardziej złożone efekty.

Przykładowy kod: wiele obrazów tła

Korzystając z tej techniki, można odtworzyć efekt paralaksy z wieloma obrazami tła (tak jak w witrynie Silverback), używając tylko jednego elementu HTML.

Element otrzymuje własne tło i wymagane wypełnienie. Względne położenie elementu służy jako punkt odniesienia dla bezwzględnego pozycjonowania pseudoelementów. Dodatnia wartość indeksu z umożliwia dostosowanie położenia pseudoelementów wzdłuż osi z.

#silverback ( pozycja: względna; indeks z: 1; minimalna szerokość: 200 pikseli; minimalna wysokość: 200 pikseli; dopełnienie: 120 pikseli 200 pikseli 50 pikseli; tło: #d3ff99 url(vines-back.png) -10% 0 powtórz-x ;)

Oba pseudoelementy są pozycjonowane bezwzględnie i umieszczane po bokach elementu. Wartość indeksu Z wynosząca -1 umieszcza pseudoelement za warstwą treść. W ten sposób pseudoelementy są umieszczane na tle i konturze elementu, ale cała zawartość pozostaje zaznaczalna i klikalna.

#silverback:przed, #silverback:po ( pozycja:absolutna; indeks Z:-1; góra:0; lewa:0; prawa:0; dół:0; padding-top:100px; )

Każdy pseudoelement ma powtarzający się zestaw obrazów tła. Aby odtworzyć efekt paralaksy, nie potrzebujesz niczego więcej.

Właściwość content umożliwia dodanie obrazu jako wygenerowanej treści. Posiadanie dwóch pseudoelementów pozwala na dodanie 2 dodatkowych obrazów do elementu. Można je z grubsza ustawić w pseudoelementach, korzystając z innych właściwości, takich jak wyrównanie tekstu i dopełnienie.

#silverback:przed (treść:url(gorilla-1.png); padding-left:3%; text-align:left; tło:przezroczysty url(vines-mid.png) 300% 0 powtórz-x; ) #silverback :po (treść:url(gorilla-2.png); padding-right:3%; text-align:right; tło:przezroczysty url(vines-front.png) 70% 0 powtórz-x; )

Przykładowy kod: elastyczne sztuczne kolumny

Innym zastosowaniem opisanej techniki jest tworzenie elastycznych kolumn o jednakowej wysokości bez użycia obrazów lub dodatkowych powiązanych elementów.

Znacznik HTML jest bardzo prosty. Korzystamy z zajęć dla każdego element div zamiast Selektory CSS 2.1, które nie są obsługiwane przez IE6. Jeśli nie ma potrzeby obsługi IE6, można zastosować selektory.

Kontener ma szerokość określoną procentowo, względne położenie oraz dodatnią wartość właściwości indeksu Z. Użycie overflow:hidden umożliwia elementowi zawinięcie zawartości pływających elementów podrzędnych i ukrycie wystających pseudoelementów. Kolor tła określa kolor jednej z kolumn.

#faux ( pozycja: względna; indeks Z: 1; szerokość: 80%; margines: 0 auto; przepełnienie: ukryty; tło: #ffaf00; )

Użycie względnego pozycjonowania elementów potomnych elementu div pozwala kontrolować kolejność kolumn niezależnie od ich wyglądu w oryginalnym układzie.

#faux div ( pozycja: względna; float: lewa; szerokość: 30%; ) # faux .main (po lewej: 35%) # faux .supp1 (po lewej: -28,5%) # faux .supp2 (po lewej: 8,5%)

Pozostałe dwie kolumny tworzone są przy użyciu pseudoelementów z tłem. W razie potrzeby możesz użyć obrazów jako tła.

#faux:przed, #faux:po (treść:""; pozycja:absolutna; indeks Z:-1; góra:0; prawa:0; dół:0; lewa:33,333%; tło:#f9b6ff; ) # faux:po (po lewej:66,667%; tło:#79daff;)

Przykładowy kod: wielokrotny skok

Wiele pociągnięć jest zorganizowanych prawie w ten sam sposób. Jego zastosowanie pozwala na porzucenie obrazów przy jednoczesnym zachowaniu efektu.

Element musi mieć względne położenie i szerokość dopełnienia wystarczającą do zmieszczenia dodatkowego obrysu, który zostanie utworzony przez pseudoelementy.

#borders ( pozycja: względna; indeks Z: 1; dopełnienie: 30 pikseli; obramowanie: 5 pikseli stałych #f00; tło: #ff9600; )

Pseudoelement jest umieszczany w odpowiedniej odległości od krawędzi elementu, umieszczany pod warstwą treści przy użyciu ujemnego indeksu Z i ma odpowiedni obrys i tło.

#borders:before (treść:""; pozycja:absolutna; indeks Z:-1; góra:5px; lewa:5px; prawa:5px; dół:5px; obramowanie:5px solid #ffea00; tło:#4aa929; ) #borders:after (treść:""; pozycja:absolutna; z-index:-1; góra:15px; lewa:15px; prawa:15px; dół:15px; obramowanie:5px solid #00b4ff; tło:#fff; )

Stopniowe ulepszenia i starsze przeglądarki

IE6 i IE7 nie obsługują pseudoelementów CSS 2.1 i ignorują deklaracje all:before i:after. Nie wprowadzą wszystkich ulepszeń, ale zachowają podstawową funkcjonalność.

Uwaga podczas korzystania z przeglądarki Firefox 3.0

Firefox 3.0 obsługuje pseudoelementy CSS 2.1, ale nie obsługuje ich pozycjonowania. Z powodu tej częściowej obsługi efekty wyraźnie zależne od właściwości szerokości lub wysokości pseudoelementów mogą wyglądać okropnie. Nie ma alternatywny sposób dla przeglądarki Firefox 3.0, jeśli użyłeś właściwości szerokości lub wysokości. Czasami pewne ulepszenia można osiągnąć dodając display:block do stylów pseudoelementu.

Przed użyciem technik wymagających pozycjonowania pseudoelementów za pomocą właściwości szerokości lub wysokości należy rozważyć, jak ważna jest obsługa przeglądarki Firefox 3.0 i odsetek użytkowników korzystających z tej przeglądarki.

Ten problem został całkowicie rozwiązany w aplikacjach, które używają pozycjonowania bezwzględnego zamiast właściwości szerokości lub wysokości.

Ulepszenia w CSS3

Wszystkie przykłady zaimplementowane w tym artykule można ulepszyć za pomocą CSS3.

Stosowanie właściwości promienia granicznego, rgba, transformacje i wiele teł CSS3 w połączeniu z pseudoelementami może otworzyć możliwość wdrażania bardziej złożonych efektów. Jednak obecnie nie ma przeglądarek obsługujących animacje CSS3 lub transformacje pseudoelementów.

Przyszłość: pseudoelementy CSS3

Sugerowane ulepszenia pseudoelementów CSS3 (zobacz dokument Moduł treści generowanej i zastępowanej CSS3) obejmują powiązane pseudoelementy (::before::before), wiele pseudoelementów (::after(2)), pseudoelementy zawijające ( : :outside) oraz możliwość wstawiania pseudoelementów dla załadowanych części dokumentu (::alternate).

Takie zmiany otworzą praktycznie nieograniczone możliwości tworzenia wszelkiego rodzaju efektów przy użyciu tylko jednego elementu i zestawu pseudoelementów.

Dzisiaj będziemy pracować nad obrazami tła, które ustawia się za pomocą właściwości tła i jej dodatkowych wartości. Rozważmy parę praktyczne przykłady w realizacji ustawienia kilku teł dla tego samego elementu.

Może to być przydatne w wielu przypadkach i momentach. Zwłaszcza użycie pseudoelementów w tym przypadku, ponieważ są one bardzo elastyczne pod względem parametrów.

Wiele obrazów tła

Aby nie tworzyć bloku wewnątrz bloku, najłatwiej jest dodać jedną linię reguł do głównego elementu i uzyskać w ten sposób pożądany rezultat. Możemy uznać tę opcję za lakoniczną, zwłaszcza że eliminuje ona potrzebę ponownego wchodzenia w nią źródło. Wszystko zostanie wykonane przy użyciu samego CSS.

Blockimg( tło: url("img/img2.png"),/*najwyższe tło, a następnie kolejno*/ url("img/img3.png"), url("img/img1.jpg"); pozycja tła: 370px na środku, 120px 150px, na środku;/*pozycja obrazów*/ powtórzenie tła: brak powtórzeń;/*powtórz obraz*/ kolor tła: #444;/*jeśli potrzebny jest kolor tła*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margines: 100px auto 15px; szerokość: 700px; minimalna wysokość: 300px; (tło: url("img/img2.png") bez powtórzeń 370px na środku, url("img/img3.png") bez powtórzeń 120px 150px, url("img/img1.jpg") bez powtórzeń na środku; margines: 100px automatycznie 15px; :700px;

Wyjaśnienie. Ustaw element obraz tła, wskazując ścieżkę do jego lokalizacji. Oddzieleni przecinkami otrzymujemy możliwość wprowadzenia znacznie większej liczby teł, co widać w powyższym kodzie. Kolejność ich numeracji określa, który obraz będzie na wierzchu pozostałych. Oznacza to, że pierwsze tło jest wyższe niż wszystkie pozostałe, a następnie sekwencja przebiega według zasady zwykłego edytora graficznego.

Wskazano następny Dodatkowe opcje poprzez poszczególne właściwości: pozycję, powtórzenie, rozmiar, jeśli to konieczne, a następnie kolor. Należy również pamiętać, że wszystkie parametry są zapisywane oddzielone przecinkami, w tej samej kolejności, co numer obrazu.

I jeszcze jeden szczegół. Cały kod można skrócić, używając tylko jednej ogólnej właściwości, tła. W przykładzie kodu znajduje się druga opcja, która pokazuje, jak to się robi.

Obraz tła poprzez pseudoelement

Nie zapomnij także o opcje alternatywne jako takie są pseudoelementami przed i po. Ich zastosowanie ma pozytywną zaletę – obraz można wysunąć poza krawędź elementu, dzięki czemu nie znika on na krawędzi, ale znajduje się na niej. Ta technika przyda się, jeśli chcesz stworzyć coś w rodzaju efektu 3D.

Blockimg( tło: url("img/img1.jpg") bez powtórzeń;/*tło elementu*/ pozycja: względna;/*obszar pozycjonowania*/ margines: 200 pikseli auto 15 pikseli; rozmiar pudełka: obramowanie; dopełnienie: 25 pikseli; szerokość: 700 pikseli; minimalna wysokość: 300 pikseli; ) .blockimg::before( tło: url("img/img1.png") bez powtarzania w środku; na dole: 0; treść: ""; wysokość: 295 pikseli; po lewej: 0; pozycja: absolutna;/*pozycjonowanie absolutne*/ po prawej: 0;

Wyjaśnienie. W rzeczywistości wszystko jest bardzo proste. Tło dla głównego elementu ustawiamy w zwykły sposób. Następny jest klucz właściwość pozycji: względny; , który określa obszar przesuwania innego elementu znajdującego się w elemencie głównym i mającego właściwość position:absolute; .

Zamiast innego elementu, choć formalnie stanowi on oddzielny obszar, używamy pseudoelementu. Nadajemy mu pozycję absolutną i ustawiamy w miejscu, które potrzebujemy.