Nieuwe manier: meerdere achtergronden op CSS3

Ik gebruik vier doorschijnende PNG-afbeeldingen om de ruimteachtergrond te creëren die op de Moon-site wordt gebruikt. Ze zijn allemaal gelaagd bovenop het lichaamselement, de een op de ander, om een ​​gevoel van ruimte te creëren wanneer de gebruiker het formaat van het browservenster aanpast.

In afb. 5.03 toont alle gebruikte afbeeldingen:

1) stofwolken (clouds.png);

2) blauw-roze verloop (space-bg.png);

3) sterrenlaag (stars-1.png);

4) nog een laag willekeurig verspreide sterren(sterren-2.png).

Rijst. 5.03. Vier doorschijnende PNG-achtergrondafbeeldingen die zich op de achtergrond van de website met de maan bevinden

Meerdere achtergrondsyntaxis

Het plaatsen van deze vier afbeeldingen als achtergrond van het body-element is heel eenvoudig met behulp van de nieuwe CSS3-syntaxis:

lichaam (achtergrond:

D. Siderholm. "CSS3 voor webontwerpers"

De vier afbeeldingen zijn gelaagd (wolken onderaan, sterren bovenaan) in een door komma's gescheiden lijst (merk op dat de lijst begint met de afbeelding die 'het dichtst' bij de gebruiker staat). Elke afbeelding wordt horizontaal gedupliceerd en op verschillende horizontale posities ingesteld (met behulp van positieve en negatieve waarden), zodat elke laag met zijn eigen snelheid beweegt naarmate het formaat van het browservenster wordt gewijzigd. Ten slotte wordt hun positie op de pagina vastgelegd met behulp van de waarde fixed .

De bijna zwarte kleur #1a1a1a wordt helemaal aan het einde toegevoegd als een aparte achtergrondkleurregel.

Dat is alles (Fig. 5.04). Het is geweldig dat we het zonder onnodige markeringen hebben kunnen doen. Al deze afbeeldingen worden weergegeven in het body-element, zodat ze achter de pagina-inhoud komen te staan, maar we hoefden ze niet in extra hulplagen te wikkelen.

Rijst. 5.04. Vier PNG-afbeeldingen zijn op elkaar gelaagd, net als het donker grijze kleur achtergrond

Browser-ondersteuning

Zoals vermeld in het eerste hoofdstuk worden meerdere achtergronden ondersteund in Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ en IE9 Beta. Ze zijn dus vergelijkbaar met veel van de andere CSS-eigenschappen die we in dit boek hebben gebruikt.

We hebben ervoor gekozen om deze geweldige CSS3-functie te gebruiken in een niet-kritisch deel van het ontwerp vanwege imperfecte ondersteuning: om de achtergrond van de pagina te verbeteren, om een ​​nieuwe interactie te creëren bij het wijzigen van de grootte van het venster - een parallax-effect voor degenen die het kunnen ervaren.

Terugval voor alle browsers

Browsers die nog geen meerdere achtergronden ondersteunen, negeren de eigenschap background volledig. Daarom hebben we de eigenschap backgroundcolor afzonderlijk gedefinieerd.

D. Siderholm. "CSS3 voor webontwerpers"

In afb. 5.05 laat zien hoe de site er in IE7 uitziet: meerdere achtergronden worden genegeerd en alleen de opgegeven donkergrijze achtergrond wordt weergegeven achtergrond eigendom-kleur .

Rijst. 5.05. IE7 negeert een eigenschap die meerdere achtergronden definieert en toont alleen de donkergrijze achtergrond die is opgegeven door de eigenschap background-color

Natuurlijk werkt alles zoals verwacht, maar het feit dat de volumetrische achtergrond verloren gaat, is niet goed. De oplossing is om eerst één enkele fallback-achtergrond in te stellen - voor browsers (zoals IE7 en 8) die niet meerdere achtergronden ondersteunen. U kunt deze eigenschap vervolgens opnieuw declareren - deze keer met meerdere achtergronden (IE negeert deze).

achtergrond: url(../img/space-bg.png) repeat-x vast -80% 0;achtergrond:

url(../img/stars-1.png) herhaal-x vast -130% 0, url(../img/stars-2.png) herhaal-x vast 40% 0, url(../img/ space-bg.png) herhaal-x vast -80% 0, url(../img/clouds.png) herhaal-x vast 100% 0; achtergrondkleur: #1a1a1a;

Voor een terugval op één afbeelding kunt u een van de afbeeldingen kiezen die in de meervoudige advertentie worden gebruikt, of u kunt verder gaan en één afbeelding maken die alle vier de afbeeldingen combineert.

Voor de Moon-site heb ik besloten space-bg.png te gebruiken - een kleurverloop (Fig. 5.06), waardoor een achtergrondoptie zonder sterren en wolken wordt weergegeven in browsers die nog niet meerdere achtergronden ondersteunen. Zeer geschikt.

D. Siderholm. "CSS3 voor webontwerpers"

Rijst. 5.06. Dankzij het fallback-beeld op de achtergrond in IE7 is het ruimtegevoel gedeeltelijk hersteld

U kunt er meerdere tegelijk aan één element toevoegen achtergrondafbeeldingen via de enkele achtergrondeigenschap. Hierdoor kun je rondkomen met één element om te creëren complexe achtergrond of één foto, waarbij deze meerdere keren wordt weergegeven verschillende instellingen. Alle afbeeldingen met hun parameters worden weergegeven, gescheiden door komma's, waarbij de afbeelding die boven de andere afbeeldingen wordt weergegeven als eerste wordt aangegeven, en de onderste dus als laatste. Voorbeeld 1 laat zien hoe u een achtergrond met drie afbeeldingen maakt.

Voorbeeld 1. Drie achtergronden

Als u afzonderlijk een stijleigenschap voor de achtergrond moet instellen, zoals background-size zoals in het bovenstaande voorbeeld, dan worden de parameters voor elke achtergrond weergegeven, gescheiden door komma's. Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Achtergrond met drie afbeeldingen

Met individuele achtergrondafbeeldingen kunt u hun positie wijzigen en ze ook animeren, zoals weergegeven in voorbeeld 2.

Voorbeeld 2. Geanimeerde achtergrond

Laten we nu bekijken hoe we één afbeelding kunnen gebruiken om een ​​blok met een frame te maken (Fig. 2). De breedte van het blok staat vast en de hoogte varieert afhankelijk van het volume van de inhoud van het blok.

Rijst. 2. Handgetekend kader

De figuur toont duidelijk de bovenste en onderste delen die moeten worden uitgesneden grafische editor en plaats deze horizontaal. Het middelste gedeelte is zo geselecteerd dat het verticaal wordt herhaald zonder naden. De afbeelding heeft een uitgesproken herhalend patroon, dus het zou geen probleem moeten zijn om deze te markeren. Het resultaat is een voorbereid beeld (Fig. 3). Het geruite veld geeft transparantie aan; u kunt samen met afbeeldingen een gekleurde achtergrond instellen en deze eenvoudig wijzigen via stijlen.

Rijst. 3. Afbeelding voorbereid voor de achtergrond

De achtergrond zelf wordt weergegeven door de eigenschap background, die ook de coördinaten specificeert het gewenste fragment. De parameters van elke achtergrond worden weergegeven, gescheiden door komma's en in in dit geval hun volgorde is belangrijk. We willen dat de boven- en onderkant van het blok elkaar niet overlappen, dus plaatsen we ze eerst (voorbeeld 3). De achtergrondkleur wordt als laatste opgegeven.

Voorbeeld 3. Verschillende achtergrondafbeeldingen

De eerste achtergrond geeft de bovenrand van het blok weer, de tweede achtergrond - de onderkant en de derde - de verticale randen. De laatste is de kleur die zichtbaar is in het transparante centrale deel van het blok (Fig. 4).

• Handleiding

We hebben de mogelijkheden van de CSS3 Achtergronden en Randen-module al besproken, waarbij we hebben gekeken naar het werken met schaduwen (box-shadow). Vandaag zullen we het iets over een ander hebben interessante kans- meerdere afbeeldingen op de achtergrond gebruiken.

Achtergrondcompositie

Er zijn veel redenen waarom u überhaupt meerdere afbeeldingen op de achtergrond zou willen samenstellen, waarvan de belangrijkste zijn:

• verkeersbesparing op afbeeldingsgrootte als individuele afbeeldingen weegt in totaal minder dan een afbeelding met afgeplatte lagen, en
• de behoefte aan onafhankelijk gedrag van individuele lagen, bijvoorbeeld bij het implementeren van parallaxeffecten.

Er kunnen andere redelijke redenen zijn :)

Klassieke aanpak

We moeten dus verschillende achtergrondafbeeldingen op elkaar plaatsen. Hoe wordt dit probleem meestal opgelost? Het is heel eenvoudig: voor elke achtergrondafbeelding wordt een blok gemaakt waaraan de bijbehorende achtergrondafbeelding wordt toegewezen. Blokken worden in elkaar genest of op een rij geplaatst met de juiste positioneringsregels. Hier is een eenvoudig voorbeeld:

Een blok met de klasse "vissen" in "zeemeermin" is uitsluitend bedoeld voor demonstratiedoeleinden.

Nu enkele stijlen:
.sample1 .sea, .sample1 .zeemeermin, .sample1 .fishing ( hoogte:300px; breedte:480px; positie: relatief; ) .sample1 .sea ( achtergrond: url(media/sea.png) repeat-x linksboven; ) .sample1 .mermaid ( achtergrond: url(media/mermaid.svg) repeat-x linksonder; ) .sample1 .fish ( achtergrond: url(media/fish.svg) no-repeat; hoogte:70px; breedte:100px; links : 30px; bovenaan: 90px; positie: absoluut ) .sample1 .fishing (achtergrond: url(media/fishing.svg) no-repeat rechtsboven 10px; )

Resultaat:

IN in dit voorbeeld drie geneste achtergronden en één blok met vissen naast de “achtergrond”-blokken. In theorie kunnen vissen bijvoorbeeld verplaatst worden met met behulp van JavaScript of CSS3-overgangen/animaties.

Overigens gebruikt dit voorbeeld voor ".fishing" de nieuwe syntaxis voor achtergrondpositionering, ook gedefinieerd in CSS3:
achtergrond: url(media/fishing.svg) no-repeat rechtsboven 10px;
Op dit moment het wordt ondersteund in IE9+ en Opera 11+, maar niet in Firefox 10 en Chrome 16. Gebruikers van de laatste twee browsers zullen de vis dus nog niet kunnen vangen.

Meerdere achtergronden

Komt te hulp nieuwe optie, toegevoegd aan CSS3, is de mogelijkheid om meerdere achtergrondafbeeldingen voor één element te definiëren. Het ziet er zo uit:

En de bijbehorende stijlen:
.sample2 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrondafbeelding: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); achtergrondpositie: rechtsboven 10px, linksonder, linksboven; achtergrondherhaling: niet herhalen, herhaal-x, herhaal-x ; ) .sample2 .fish ( achtergrond: url("media/fish.svg ") geen herhaling; hoogte:70px; breedte:100px; links: 30px; boven: 90px; positie: absoluut; )
Als u meerdere afbeeldingen wilt definiëren, moet u de regel voor achtergrondafbeeldingen gebruiken, waarbij de afzonderlijke afbeeldingen worden vermeld, gescheiden door komma's. Aanvullende regels, ook als lijst, kunt u voor elke afbeelding de positionering, herhalingen en andere parameters instellen. Let op de volgorde waarin de afbeeldingen worden weergegeven: lagen worden weergegeven van links naar rechts, van boven naar beneden.

Het resultaat is precies hetzelfde:

Eén regel

Als de vis niet in een apart blok hoeft te worden gescheiden voor daaropvolgende manipulaties, kan de hele afbeelding met één blok worden herschreven eenvoudige regel:

Stijlen:
.sample3 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrondafbeelding: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); achtergrondpositie: rechtsboven 10px, linksonder, 30px 90px, linksboven; achtergrondherhaling: niet-herhaling, herhaal-x ; )

Ik zal geen foto van het resultaat laten zien - geloof me, het valt samen met de twee foto's hierboven. Maar let opnieuw op de stijlen, vooral op "achtergrondherhaling" - als een deel van de lijst aan het einde volgens de specificatie ontbreekt, moet de browser de opgegeven lijst het vereiste aantal keren herhalen om overeen te komen met het aantal afbeeldingen in de lijst.

In dit geval is het gelijk aan deze beschrijving:
achtergrondherhaling: geen herhaling, herhaling-x, geen-herhaling, herhaal-x;

Nog korter

Als je je CSS 2.1 herinnert, definieerde het de mogelijkheid om achtergrondafbeeldingen in een korte vorm te beschrijven. Hoe zit het met meerdere afbeeldingen? Dit is ook mogelijk:

Sample4 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrond: url("media/fishing.svg") rechtsboven 10px niet-herhaling, url("media/mermaid.svg") linksonder repeat-x , url("media/fish.svg") 30px 90px niet-herhaling, url("media/sea.png") repeat-x )

Maar houd er rekening mee dat je nu niet zomaar waarden kunt overslaan (tenzij ze overeenkomen met de standaardwaarde). Als je overigens de kleur van de achtergrondafbeelding wilt instellen, moet dit in de allerlaatste laag gebeuren.

Dynamische beelden

Als de compositie afhankelijk van de grootte van de container hooguit statisch of dynamisch is, vereenvoudigen meerdere achtergronden uiteraard het paginaontwerp. Maar wat als u onafhankelijk van JavaScript met individuele elementen van de compositie moet werken (verplaatsen, scrollen, enz.)?

Trouwens, hier is een voorbeeld uit het leven - een thema met een paardenbloem in Yandex:


Als je de code bekijkt, zie je zoiets als dit:

...

Blokken met de klassen "b-fluff-bg", "b-fluff__cloud" en "b-fluff__item" bevatten achtergrondafbeeldingen die elkaar overlappen. Bovendien scrollt de achtergrond met wolken voortdurend en vliegen paardenbloemen over het scherm.

Kan dit herschreven worden met meerdere achtergronden? In principe wel, maar onder voorbehoud van 1) ondersteuning voor deze functie in de doelbrowsers en... 2) lees verder;)

Hoe voeg je dynamiek toe aan meerdere achtergronden? In een dergelijke situatie blijkt het handig te zijn dat de browser in de interne weergave de individuele parameters van de achtergrondafbeeldingen volgens de juiste regels verdeelt. Voor positionering is er bijvoorbeeld “achtergrondpositie”, en voor verschuivingen is het voldoende om alleen dit te veranderen. Er zijn echter kosten verbonden aan het gebruik van meerdere afbeeldingen. Deze regel (en soortgelijke regels) vereist dat u de positie vermeldt voor alle achtergronden die voor uw blok zijn gedefinieerd, en u kunt dit niet selectief doen.

Om animatie aan onze visachtergrond toe te voegen, kunt u de volgende code gebruiken:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var zeemeerminX = 0; var t = 0; functie animatieLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) zeemeerminX = 0; visY = -10 + (10 * Math.cos(t * 0,091)); visX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "boven" + visY + "px rechts" + visX + "px, " + zeemeerminX + "px onder," + vissenX + "px " + vissenY + "px, linksboven"; venster.requestAnimFrame(animationLoop); ) animatieLoop(); ));
Waar
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000/60 ));

En trouwens, animaties kunnen ook worden gemaakt met CSS3 Transitions/Animations, maar dit is een onderwerp voor een aparte discussie.

Parallax en interactiviteit

Ten slotte kunnen soortgelijke manoeuvres gemakkelijk parallaxeffecten of interactieve interactie met de achtergrond toevoegen:

Meerdere achtergrondafbeeldingen zijn nuttig in dergelijke scenario's, want hoewel we het alleen over de achtergrond hebben (en niet over de inhoud), kunnen we door het gebruik ervan voorkomen dat de html-code en DOM worden vervuilt. Maar alles heeft een prijs: daar kan ik niet omheen individuele elementen composities op naam, id, klasse of een andere parameter. Ik moet expliciet de volgorde van de elementen in de compositie in de code onthouden, en voor elke wijziging in een parameter van een element moet ik in feite een regel aan elkaar lijmen die de waarden van deze parameter voor alle elementen beschrijft en deze bijwerken voor de gehele compositie.

Sea.style.backgroundPosition = "boven" + visY + "px rechts" + visX + "px, " + zeemeerminX + "px onder," + vissenX + "px " + vissenY + "px, linksboven";

Ik ben er zeker van dat dit kan worden verpakt in handige javascript-code, die zorgt voor de virtualisatie van relaties met individuele lagen, terwijl de html-code van de pagina zo schoon mogelijk blijft.

Hoe zit het met de compatibiliteit?

Alle moderne versies populaire browsers, inclusief IE9+, ondersteunen meerdere afbeeldingen (u kunt dit bijvoorbeeld controleren met caniuse).

U kunt Modernizr ook gebruiken om browsers aan te bieden die niet meerdere achtergronden ondersteunen alternatieve oplossingen. Zoals Chris Coyier in zijn bericht schreef over de laagvolgorde bij het gebruik van meerdere achtergronden, doe je zoiets als dit:

Multiplebgs body ( /* Geweldige meerdere BG-declaraties die de realiteit overstijgen en onzuivere kuikens */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Als u twijfelt over het gebruik van JS om te bieden achterwaartse compatibiliteit, je kunt de achtergrond gewoon twee keer opgeven, maar dit heeft ook zijn nadelen in de vorm van mogelijk dubbele laars middelen (dit is afhankelijk van de uitvoering css-verwerking in een specifieke browser):

/* meerdere bg-fallback */ achtergrond: #000 url(...) ...; /* Geweldige meerdere BG-declaraties die de realiteit overstijgen en onuitputtelijke kuikens */ achtergrond-url(...), url(...), url(...), #000 url(...);

Als u al aan Windows 8 denkt, houd er dan rekening mee dat u meerdere achtergronden kunt gebruiken bij het ontwikkelen van applicaties in metrostijl, omdat deze dezelfde engine gebruikt als IE10.

P.s. On-topic: ik kan het niet laten om het fenomenale artikel over het cicadeprincipe te onthouden.

Tags: tags toevoegen

Door CSS 2.1 pseudo-elementen te gebruiken, kunt u 3 niveaus voor de achtergrond, 2 afbeeldingen met een vast formaat en meerdere complexe streken voor één hebben HTML-element. Deze methode breidt de ontwerpmogelijkheden van webpagina's aanzienlijk uit voor alle browsers die CSS 2.1 pseudo-elementen met positionering ondersteunen. Geen CSS3-ondersteuning vereist.

In wezen is het maken en werken met CSS-pseudo-elementen (:before en:after) vergelijkbaar met de manier waarop u werkt met geneste HTML-elementen binnen een doelelement. Maar met één belangrijk voordeel: alles gebeurt buiten de semantiek, zonder gebruik te maken van geneste HTML-elementen.

Om meerdere achtergronden en/of streken te creëren, worden pseudo-elementen achter de inhoud geplaatst en eraan vastgemaakt het juiste punt HTML-element met absolute positionering.

Het pseudo-element bevat geen echte inhoud en is absoluut gepositioneerd. Op deze manier kan het over elk gebied van het "bovenliggende" element worden uitgerekt zonder de inhoud te beïnvloeden. Om dit te doen, kunt u een combinatie van de eigenschappen top , right , bottom , left , width en height gebruiken.

Welke effecten kun je bereiken?

Met slechts één element kunt u parallax, meerdere achtergronden (zowel kleuren als afbeeldingen), bijgesneden achtergrondafbeeldingen, afbeeldingsvervanging, uitbreidbare elementen met afbeeldingen als streken, flexibele kunstmatige kolommen, afbeeldingen die buiten de grenzen van het element uitsteken, meerdere streken en andere populaire effecten die doorgaans afbeeldingstags en/of extra HTML-opmaak gebruiken.

Op de demopagina's kunt u de implementatie zien van verschillende populaire webpagina-ontwerpeffecten met behulp van deze techniek.

Bovendien kunt u stijlwijzigingen voor :hover gebruiken om complexere effecten te bereiken.

Voorbeeldcode: meerdere achtergrondafbeeldingen

Met deze techniek kunt u het parallaxeffect reproduceren met meerdere achtergrondafbeeldingen (zoals gebruikt op de Silverback-site), met slechts één HTML-element.

Het element krijgt een eigen achtergrond en vereiste opvulling. De relatieve positionering van een element fungeert als referentiepunt voor de absolute positionering van pseudo-elementen. Met een positieve z-indexwaarde kunt u de positie van pseudo-elementen langs de z-as aanpassen.

#silverback ( positie: relatief; z-index:1; min-breedte:200px; min-hoogte:200px; vulling:120px 200px 50px; achtergrond:#d3ff99 url(vines-back.png) -10% 0 herhaling-x ;)

Beide pseudo-elementen worden absoluut gepositioneerd en aan de zijkanten van het element geplaatst. Betekenis z-index gelijk-1 plaatst het pseudo-element achter de laag inhoud. Op deze manier worden pseudo-elementen bovenop de achtergrond en omtrek van het element geplaatst, maar blijft alle inhoud selecteerbaar en gevoelig voor muisklikken.

#silverback:voor, #silverback:na ( positie:absoluut; z-index:-1; boven:0; links:0; rechts:0; onder:0; opvulling-boven:100px; )

Elk pseudo-element heeft een herhalende reeks achtergrondafbeeldingen. Om het parallaxeffect te reproduceren heb je verder niets nodig.

Met de eigenschap content kunt u een afbeelding toevoegen als gegenereerde inhoud. Als u twee pseudo-elementen heeft, kunt u twee extra afbeeldingen aan het element toevoegen. Ze kunnen grofweg in pseudo-elementen worden gepositioneerd met behulp van andere eigenschappen, zoals tekstuitlijning en opvulling.

#silverback:before ( inhoud:url(gorilla-1.png); opvulling-links:3%; tekst-uitlijning:links; achtergrond:transparante url(vines-mid.png) 300% 0 repeat-x; ) #silverback :after ( inhoud:url(gorilla-2.png); opvulling-rechts:3%; tekst-uitlijning:rechts; achtergrond:transparante url(vines-front.png) 70% 0 herhaling-x; )

Voorbeeldcode: flexibele kunstmatige kolommen

Een andere toepassing van de beschreven techniek is het creëren van flexibele kolommen gelijke hoogte zonder het gebruik van afbeeldingen of aanvullende gerelateerde elementen.

De HTML-opmaak is heel eenvoudig. Wij gebruiken lessen voor iedereen div-element in plaats van CSS-kiezers 2.1, die niet worden ondersteund door IE6. Als er geen noodzaak is om IE6 te ondersteunen, kunnen selectors worden gebruikt.

De container heeft een breedte die is opgegeven als een percentage, relatieve positionering en een positieve z-index-eigenschapswaarde. Door overflow:hidden te gebruiken, kan een element de inhoud van zijn zwevende kinderen omsluiten en overlopende pseudo-elementen verbergen. De achtergrondkleur bepaalt de kleur voor een van de kolommen.

#faux ( positie:relatief; z-index:1; breedte:80%; marge:0 auto; overflow:verborgen; achtergrond:#ffaf00; )

Door de relatieve positionering van de onderliggende elementen van een div te gebruiken, kunt u de volgorde van de kolommen bepalen, ongeacht hoe ze in de oorspronkelijke lay-out verschijnen.

#faux div ( positie: relatief; float:left; breedte:30%; ) #faux .main (links:35%) #faux .supp1 (links:-28,5%) #faux .supp2 (links:8,5%)

De andere twee kolommen zijn gemaakt met behulp van pseudo-elementen met achtergronden. Indien nodig kunt u afbeeldingen als achtergrond gebruiken.

#faux:voor, #faux:na ( inhoud:""; positie:absoluut; z-index:-1; boven:0; rechts:0; onder:0; links:33,333%; achtergrond:#f9b6ff; ) # faux:after (links:66,667%; achtergrond:#79daff; )

Voorbeeldcode: meerdere slagen

Meerdere slagen zijn op vrijwel dezelfde manier georganiseerd. Door het gebruik ervan kunt u afbeeldingen achterwege laten terwijl het effect behouden blijft.

Het element moet een relatieve positionering en opvulbreedte hebben die voldoende is om de extra lijn te bevatten die door de pseudo-elementen wordt gecreëerd.

#borders ( positie: relatief; z-index:1; opvulling:30px; rand:5px effen #f00; achtergrond:#ff9600; )

Het pseudo-element wordt op de juiste afstand van de rand van het element geplaatst, onder de inhoudslaag geplaatst met behulp van een negatieve z-index en krijgt de lijn en achtergrond die het nodig heeft.

#borders:before ( inhoud:""; positie:absoluut; z-index:-1; boven:5px; links:5px; rechts:5px; onder:5px; rand:5px effen #ffea00; achtergrond:#4aa929; ) #borders:after ( inhoud:""; positie:absoluut; z-index:-1; boven:15px; links:15px; rechts:15px; onder:15px; rand:5px effen #00b4ff; achtergrond:#fff; )

Progressieve verbeteringen en oudere browsers

IE6 en IE7 ondersteunen geen CSS 2.1 pseudo-elementen en negeren de declaraties all:before en:after. Ze brengen niet alle verbeteringen met zich mee, maar behouden de kernfunctionaliteit.

Let op bij gebruik van Firefox 3.0

Firefox 3.0 ondersteunt CSS 2.1 pseudo-elementen, maar ondersteunt hun positionering niet. Vanwege deze gedeeltelijke ondersteuning kunnen effecten die expliciet afhankelijk zijn van de breedte- of hoogte-eigenschappen van de pseudo-elementen er verschrikkelijk uitzien. Er is geen Alternatieve manier voor Firefox 3.0 als u de eigenschappen width of height gebruikte. Soms kunnen enkele verbeteringen worden bereikt door display:block toe te voegen aan de pseudo-elementstijlen.

Voordat u technieken gebruikt waarbij pseudo-elementen moeten worden gepositioneerd met behulp van de eigenschappen width of height, moet u bedenken hoe belangrijk het is om Firefox 3.0 te ondersteunen en hoeveel procent van uw gebruikers die browser gebruikt.

Dit probleem is volledig opgelost in toepassingen die absolute positionering, in plaats van de eigenschappen width of height.

Verbeteringen met CSS3

Alle voorbeelden die in dit artikel zijn geïmplementeerd, kunnen worden verbeterd met behulp van CSS3.

Het gebruik van de border-radius rgba transformeert eigenschappen en meerdere CSS3-achtergronden in combinatie met pseudo-elementen kan de mogelijkheid openen om complexere effecten te implementeren. Er zijn momenteel echter geen browsers die CSS3-animaties of transformaties voor pseudo-elementen ondersteunen.

De toekomst: CSS3 pseudo-elementen

Voorgestelde verbeteringen aan CSS3-pseudo-elementen (zie het CSS3 Generated and Replaced Content Module-document) omvatten gebonden pseudo-elementen (::before::before), meerdere pseudo-elementen (::after(2)), omhullende pseudo-elementen ( ::outside) en de mogelijkheid om pseudo-elementen in te voegen voor geladen delen van het document (::alternate).

Dergelijke veranderingen zullen praktisch zichtbaar worden onbeperkte mogelijkheden om allerlei effecten te creëren met slechts één element en een reeks pseudo-elementen.

In CSS 2 is het onmogelijk om tegelijkertijd twee achtergronden aan één element toe te voegen, dus moet je het ene element in het andere nesten en elk element een eigen achtergrondafbeelding geven. Voor complexe lay-outs kunnen dergelijke bijlagen soms op ongeveer een dozijn worden geteld. Het is duidelijk dat zo'n opeenstapeling niet tot iets goeds leidt, maar wat te doen? Er blijkt iets te zijn! In CSS 3 kunt u meerdere achtergrondafbeeldingen tegelijkertijd aan elk element toevoegen. We nemen dus de bloktekening (Fig. 1), snijden deze in stukken en beginnen deze in browsers te testen.

Rijst. 1. Blokkeer voor de site

Voor de eenvoud neem ik de breedte van het blok vaste maat, en de hoogte zal uitrekken, afhankelijk van de inhoud. Het boven- en ondergedeelte zijn duidelijk zichtbaar in de tekening; ik heb ze uitgeknipt in de editor en in lagen gevouwen in een apart bestand. Het middengedeelte moet zo worden gekozen dat het zich verticaal herhaalt zonder naden. Het ontwerp heeft een goed gedefinieerd herhalend patroon, dus het zou geen probleem moeten zijn om dit te benadrukken. Ik kopieer en plak naar de vorige fragmenten. Het resultaat zal een foto als deze zijn (Fig. 2).

Rijst. 2. Voorbereide afbeeldingen

In principe kunt u elk fragment opslaan als apart bestand, maar CSS-sprites (de zogenaamde technologie waarbij meerdere afbeeldingen in één worden gelijmd) hebben een aantal voordelen. Ten eerste wordt het aantal verzoeken aan de server verminderd door de vermindering van het aantal bestanden en ten tweede worden de afbeeldingen in totaal sneller geladen en weergegeven.

De achtergrond zelf wordt weergegeven door de eigenschap background, die ook de coördinaten van het gewenste fragment specificeert. De parameters van elke achtergrond worden gescheiden door komma's weergegeven, en in dit geval is hun volgorde van belang. Ik wil dat de boven- en onderkant van het blok elkaar niet overlappen, dus plaats ik ze eerst (voorbeeld 1).

Voorbeeld 1. Meerdere achtergrondafbeeldingen

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

De eerste achtergrond geeft de bovenrand van het blok weer, de tweede achtergrond - de onderkant en de derde - de verticale randen.

We checken browsers in. Internet Explorer 8 gaf helemaal geen afbeeldingen weer, andere browsers (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) gaven het frame correct weer (Fig. 3).

Rijst. 3. Frameweergave in Safari-browser

Het gebruik van meerdere achtergronden maakt de situatie veel eenvoudiger voor ontwikkelaars, vooral bij het opmaken van blokken. Er is nog maar één klein dingetje over. Het is noodzakelijk dat de IE 6–8-browser ophoudt te bestaan.