Vandaag zullen we door een hele gave techniek gaan die je kunt gebruiken om een ​​effect te creëren dat een beetje lijkt op parallax scrollen, maar geen JavaScript nodig heeft; het kan heel eenvoudig worden bereikt door pure CSS.

Begin met het uitchecken van de live demo om te zien wat je gaat leren (je moet het op een desktop / laptop bekijken om het effect te zien).

Deze techniek kan worden gebruikt om geweldige productbeschrijvingspagina's te maken, of zelfs iets dat lijkt op een Powerpoint / Keynote-presentatie, en zou een grote potentiële fit zijn voor online verhaalillustratie.

Dit is hoe je het doet.

Het zit allemaal in de CSS

De sleutel tot deze techniek de CSS achtergrond-bijlage: vast;, beschikbaar voor ons sinds CSS 2.1. Elke achtergrondafbeelding waarop deze stijl is toegepast, blijft op een vaste positie ten opzichte van het venster (niet het element waarop het is toegepast). We gebruiken het om onze illustraties op hun plaats te houden terwijl onze inhoud er onafhankelijk naast schuift.

Een paar dingen om op te letten met deze CSS-eigenschap zijn dat als achtergrondafbeeldingen relatief ten opzichte van het venster worden gerepareerd, hun positie niet zal worden beïnvloed door zaken als marges zoals een gewone achtergrondafbeelding.

U moet ook weten dat terwijl het eigendom wonderwel werkt in alle desktopbrowsers, het op dit moment niet werkt op Chrome-mobiel en een beetje schokkerig kan zijn in andere mobiele browsers. Terwijl uw bezoekers uw afbeeldingen nog steeds prima kunnen zien, wordt het scrolleffect zelf het best weergegeven op desktopplatforms.

Hoe het gedaan wordt

De basisstappen om te bereiken wat je ziet in de demo zijn:

1. Maak een container-element en voeg uw inhoud eraan toe.
2. Stel de container in (a div in ons geval) om opgevuld te zijn aan één zijde van ongeveer 50% breedte, waardoor de inhoud naar de andere kant wordt geduwd.
3. Voeg een achtergrondafbeelding toe, ook met een breedte van ongeveer 50%, en plaats deze op de tegenovergestelde zijde van de inhoud.
4. set achtergrond-bijlage: vast; en kijk naar de scrollende magie!

Laten we eens kijken hoe dit allemaal stap voor stap gebeurt. Je zult de bronbestanden voor deze tutorial willen pakken, zodat je de vereiste afbeeldingen hebt.

1. Basisinstellingen

Begin met het maken van een projectmap en het toevoegen van een index.html bestand naar het, evenals een css map met een bestand met de naam style.css toegevoegd. Kopieer en plak de vier afbeeldingen uit de bronbestand zip die je hebt gedownload naar een map met de naam afbeeldingen.

Voeg deze HTML toe aan index.html:

           
 
Scroll naar beneden en kijk wat er gebeurt
 
Alice begon het zat te worden om bij haar zus aan de oever te zitten, en om niets te doen: een paar keer had ze in het boek gekeken dat haar zus aan het lezen was, maar er waren geen foto's of gesprekken in, 'en wat is het gebruik van een boek, 'dacht Alice' zonder foto's of een gesprek? '
 
Dus ze overwoog in haar hoofd (zo goed ze kon, want de hete dag zorgde ervoor dat ze zich heel slaperig en dom voelde), of het plezier van het maken van een daisychain de moeite waard was om op te staan ​​en de madeliefjes te plukken, toen plotseling een wit konijn met roze ogen dicht bij haar kwam.
 
Daarin was niets zo opmerkelijk; Alice vond het ook niet zo vreemd om het Konijn tegen zichzelf te horen zeggen: 'O jee! Oh jee! Ik zal later zijn!' (toen ze er later over nadacht, drong het tot haar door dat ze zich dit had moeten afvragen, maar op dat moment leek het allemaal heel natuurlijk); maar toen het konijn daadwerkelijk zijn horloge uit zijn vestzak pakte en ernaar keek, en toen haastte, ging Alice overeind, want het flitste door haar hoofd dat ze nog nooit een konijn met een vest had gezien- zak, of een horloge om eruit te halen, en brandend van nieuwsgierigheid, rende ze over het veld erna, en was gelukkig net op tijd om het te zien neerklappen in een groot konijnenhol onder de haag.
 
Even later ging Alice erna achter, nooit bedacht hoe ze er in de wereld weer uit zou komen.
 
Het konijnenhol ging rechtdoor als een tunnel voor een bepaalde manier, en dook toen plotseling naar beneden, zo plotseling dat Alice geen moment had om na te denken over zichzelf te houden voordat ze merkte dat ze in een heel diepe put viel.
 
Ofwel de bron was erg diep, of ze viel heel langzaam, want ze had veel tijd toen ze naar beneden ging om om zich heen te kijken en zich af te vragen wat er daarna zou gebeuren. Eerst probeerde ze naar beneden te kijken en te zien waar ze naar toe zou komen, maar het was te donker om iets te zien; toen keek ze naar de zijkanten van de put en merkte dat ze vol waren met kasten en boekenplanken; hier en daar zag ze kaarten en foto's hangen aan pinnen. Ze nam een ​​pot uit een van de planken terwijl ze passeerde; het werd als 'ORANJE MARMALADE' bestempeld, maar tot haar grote teleurstelling was het leeg: ze liet de pot niet vallen uit angst iemand te vermoorden, slaagde er dus in om het in een van de kasten te doen toen ze er voorbij viel.
 
'Goed!' dacht Alice bij zichzelf, 'na zo'n val als deze, zal ik er niet aan denken om van de trap af te trappen! Hoe moedig zullen ze me allemaal thuis denken! Waarom, ik zou er niets over zeggen, zelfs als ik van de top van het huis viel! ' (Dat was zeer waarschijnlijk waar.) 
 
  

Wat we hier doen, is het instellen van onze basale HTML-shell, het laden in ons stylesheet en enkele Google-lettertypen, en vervolgens onze eerste div-contentcontainer maken die we deze techniek zullen toepassen..

De div-container heeft drie klassen:

1. .inhoud - gebruikt om een ​​aantal eigenschappen in te stellen die voor alle inhoudscontainers gemeenschappelijk zijn.
2. .rechts - geeft aan dat deze container rechts uitgelijnde inhoud moet hebben (we zullen later ook werken met een links uitgelijnde container)
3. .illustration_01 - gebruikt om de specifieke achtergrondafbeelding en kleur voor deze container in te stellen

styling

Nu zijn we klaar voor een aantal CSS. Begin door wat basisnormaliserings- en formatteringscode toe te voegen aan uw style.css het dossier:

* box-sizing: border-box;  html font-size: 1em; font-family: 'Alike'; achtergrondkleur: # 262626; kleur: # d9d9d9;  body marge: 0;  img max-width: 100%; hoogte: auto;  h1, h2, h3, h4, h5, h6 font-family: 'Roboto'; regelhoogte: 1.313em;  h1 font-size: 3em; marge: 0,563em 0;  h2 font-size: 2.25em; marge: 0,625em 0;  h3 font-size: 1.5em; marge: 1,313em 0;  h4 font-size: 1.313em; marge: 1,313em 0;  h5 font-size: 1.125em; marge: 1,313em 0;  h6 font-size: 1em; marge: 0.75em 0; 

Nu voor de .inhoud klasse. Voeg dit toe aan de onderkant van je stylesheet:

.inhoud font-size: 1.875rem; kleur: # 262626; achtergrondformaat: 49% automatisch; achtergrond-bijlage: vast; achtergrondherhaling: geen herhaling; 

In deze klas gebeurt het meeste van de magie. Voor de tekst stellen we onze lettergrootte en kleur in. Voor de achtergrond zul je zien dat we beginnen met instellen background-size tot 49% automatisch. 

Dit betekent dat de achtergrondafbeelding altijd zal uitrekken of krimpen om 49% van de paginabreedte te vullen, en de hoogte zal proportioneel worden aangepast. We gebruiken een waarde van 49% in plaats van 50% omdat Firefox anders een raar lijnartefact in het midden van het scherm laat zien.

We zijn dan begonnen -Achtergrond vast die, zoals je al weet uit de bovenstaande beschrijving, de achtergrondafbeelding blijft laten staan ​​wanneer we scrollen, en zijn positie relatief maakt ten opzichte van het venster in plaats van de container waarop deze is toegepast.

Eindelijk gaan we zitten achtergrondherhaling: geen herhaling; om ervoor te zorgen dat onze afbeelding slechts één keer op de pagina verschijnt.

Voeg vervolgens de .rechts klasse aan uw stylesheet:

.rechts opvulling: 1.618em 6.472em 3.236em 50%; achtergrond-positie: 0 50%; 

Deze laatste klasse plaatst de tekstinhoud op de ene helft van het scherm en de achtergrond op de andere.

De background-position instelling vertelt de achtergrondafbeelding om zichzelf nul pixels vanaf de linkerkant van het venster te positioneren en om zichzelf halverwege de bovenkant van het venster uit te lijnen.

Voeg ten slotte de .illustration_01 klasse:

.illustration_01 background-colour: # 00c17b; background-image: url ("... /images/minipadwhite.png"); 

Hiermee stelt u de specifieke achtergrondafbeelding en kleur in die we voor deze inhoudcontainer willen hebben.

Bekijk uw site en u zou nu dit moeten zien:

Wanneer u naar beneden scrolt, ziet u dat de inhoud meegaat terwijl de afbeelding precies blijft waar hij is.

2. Voeg een tweede container toe

Laten we nog een contentcontainer toevoegen, deze met content links uitgelijnd.

Voeg deze inhoudscontainer-HTML toe onder je laatste div:

 
 
Vaste achtergrondverschuivende effecten
 
Omlaag omlaag omlaag. Zou de val nooit ten einde komen! 'Ik vraag me af hoeveel kilometer ik ben gevallen tegen deze tijd?' zei ze hardop. 'Ik moet ergens in de buurt van het centrum van de aarde komen. Laat me eens kijken: dat zou vierduizend kilometer naar beneden zijn, denk ik ... '(want zie je, Alice had verschillende dingen van dit soort geleerd in haar lessen in het klaslokaal, en hoewel dit geen goede gelegenheid was om te pronken haar kennis, want er was niemand om naar haar te luisteren, toch was het een goede gewoonte om het te zeggen) '- ja, dat is ongeveer de juiste afstand - maar dan vraag ik me af wat voor lengte- of breedtegraad ik heb?' (Alice had ook geen idee wat Latitude was, of Longitude, maar vond het mooie mooie woorden om te zeggen.)
 
Nu begon ze opnieuw. 'Ik vraag me af of ik dwars door de aarde zal vallen! Hoe grappig zal het eruit zien te komen tussen de mensen die met hun hoofd naar beneden lopen! De antipathieën, denk ik ... '(ze was nogal blij dat er deze keer niemand luisterde, want het klonk helemaal niet het goede woord)' - maar ik zal ze moeten vragen wat de naam van het land is is, weet je. Alsjeblieft, mevrouw, is dit Nieuw-Zeeland of Australië? ' (en ze probeerde te betoveren terwijl ze praatte ... zin in curtseying als je door de lucht valt! Denk je dat je het aankan?) 'En wat een onwetend klein meisje zal ze me denken dat ik het vraag! Nee, het zal nooit vragen om te vragen: misschien zal ik het ergens opgeschreven zien staan. '
 
Omlaag omlaag omlaag. Er was niets anders te doen, dus Alice begon al snel weer te praten. 'Dinah zal me heel erg missen vannacht, dat zou ik moeten denken!' (Dinah was de kat.) 'Ik hoop dat ze zich haar schoteltje melk zullen herinneren tijdens de theetijd. Dina, mijn liefste! Ik wou dat je hier bij me was! Er zijn geen muizen in de lucht, vrees ik, maar misschien vang je een vleermuis, en dat lijkt heel erg op een muis, weet je. Maar katten eten vleermuizen, vraag ik me af? ' En hier begon Alice behoorlijk slaperig te worden en ging ze op een dromerige manier tegen zichzelf zeggen: 'Eten katten vleermuizen? Eten katten vleermuizen? ' en soms: 'Eten vleermuizen katten?' want, ziet u, aangezien zij geen van beide vragen kon beantwoorden, deed het er niet veel toe op welke manier zij het stelde. Ze voelde dat ze dommelde en begon net te dromen dat ze hand in hand liep met Dinah en haar heel ernstig zei: 'Nu, Dinah, vertel me de waarheid: heb je wel eens een vleermuis gegeten?' wanneer plotseling, bonzen! Thump! ze kwam op een hoop stokken en droge bladeren en de val was voorbij.
 
Alice was niet een beetje gewond, en ze sprong meteen overeind: ze keek op, maar het was allemaal donker boven haar hoofd; voor haar was weer een lange doorgang en het witte konijn was nog steeds in zicht en haastte zich naar beneden. Er was geen moment om verloren te gaan: weg ging Alice als de wind, en was net op tijd om het te horen zeggen, toen het een hoekschop werd, 'Oh mijn oren en snorharen, hoe laat het wordt!' Ze was er vlak achter toen ze de hoek omsloeg, maar het Konijn was niet meer te zien: ze bevond zich in een lange, lage hal, die werd verlicht door een rij lampen die aan het dak hingen.
 
Er waren deuren overal in de hal, maar ze waren allemaal op slot; en toen Alice helemaal naar de ene en de andere kant was gegaan en elke deur had geprobeerd, liep ze triest in het midden, zich afvragend hoe ze ooit weer eruit moest komen. 
 

Merk op dat we deze keer de klas gebruiken .links in plaats van .rechts en we hebben het illustratiegetal zo verhoogd tot de klas .illustration_01 is vervangen door .illustration_02

Voeg de volgende twee nieuwe klassen toe aan uw stylesheet:

.links opvulling: 1.618em 50% 3.236em 6.472em; achtergrond-positie: 100% 50%;  .illustration_02 background-colour: # e8697b; background-image: url ("... /images/minipadblack.png"); 

Deze keer hebben we de opvulling van 50% toegepast op de rechterkant van de container, zodat de inhoud naar links wordt gedrukt en de achtergrond horizontaal wordt gepositioneerd op 100%, d.w.z. helemaal naar rechts. We voegen ook een andere kleur en afbeelding toe aan de achtergrond van deze container.

Bekijk uw site opnieuw en ga naar beneden scrollen. Wanneer je het einde van de eerste container hebt bereikt, zou je de tweede moeten zien beginnen met schrobben over de bovenkant van je eerste afbeelding en geleidelijk aan het onthullen van je tweede.

3. Plaats een scheidingsteken

Het verbetert het effect van deze techniek als er een scheidingsteken tussen de twee containers is, dus laten we dat nu toevoegen.

Voeg tussen deze twee container-divs deze HTML toe:

 
 
Een andere sectie begint hier
 

En voeg de .separator-klasse toe aan uw stylesheet:

.scheidingsteken font-size: 1.875rem; opvulling: 1.618em 0; text-align: center; 

Wanneer u uw site ververst, zou u nu een mooi scheidingsteken tussen uw containers moeten hebben:

4. Derde en vierde containers

U kunt nu de code invoeren voor uw resterende scheidingstekens en inhoudscontainers.

Voeg deze HTML toe onder je bestaande divs:

 
 
Een andere sectie begint hier
 
 
 
Geweldig voor productpresentaties
 
Plotseling kwam ze op een kleine driepotige tafel, allemaal gemaakt van massief glas; er zat niets op behalve een kleine gouden sleutel, en Alice dacht eerst dat het bij een van de deuren van de hal zou kunnen horen; maar helaas! of de sloten waren te groot of de sleutel was te klein, maar in elk geval zou het geen enkele openen. Toen ze echter voor de tweede keer kwam, kwam ze op een laag gordijn dat ze nog niet eerder had opgemerkt, en daarachter was een kleine deur van ongeveer vijftien centimeter hoog: ze probeerde de kleine gouden sleutel in het slot en tot haar grote vreugde paste het erin!
 
Alice opende de deur en ontdekte dat die naar een kleine doorgang leidde, niet veel groter dan een rattenhol: ze knielde neer en keek langs de doorgang naar de mooiste tuin die je ooit zag. Hoe verlangde ze ernaar uit die donkere hal te geraken, en rond te dwalen tussen die bedden van heldere bloemen en die koele fonteinen, maar ze kon haar hoofd niet eens door de deuropening krijgen; en zelfs als mijn hoofd er doorheen zou gaan, dacht arme Alice, zou het zonder mijn schouders weinig nut hebben. Oh, hoe zou ik willen dat ik als een telescoop kon zwijgen! Ik denk dat ik het kan, als ik alleen maar weet hoe ik moet beginnen. ' Want, weet je, zoveel dingen die er de laatste tijd niet waren gebeurd, dat Alice begon te denken dat heel weinig dingen inderdaad echt onmogelijk waren.
 
Het leek niet zinvol om bij de kleine deur te wachten, dus ging ze terug naar de tafel, half in de hoop dat ze er nog een andere sleutel op zou vinden, of in elk geval een boek met regels om mensen te sluiten zoals telescopen: deze keer vond ze een klein flesje erop ('dat was hier zeker niet eerder', zei Alice) en rond de hals van de fles zat een papieren etiket, met de woorden 'DRINK ME' er prachtig in grote letters op gedrukt.
 
Het was allemaal heel goed om te zeggen 'Drink me', maar de wijze kleine Alice zou dat niet snel doen. 'Nee, ik zal eerst kijken,' zei ze, 'en kijken of het' vergif 'is of niet'; want ze had een aantal aardige kleine verhalen gelezen over kinderen die verbrand waren en opgegeten door wilde beesten en andere onaangename dingen, allemaal omdat ze zich de eenvoudige regels die hun vrienden hen hadden geleerd niet zouden herinneren: zoals dat een gloeiend heet pook zal je verbranden als je het te lang vasthoudt; en dat als je je vinger heel diep met een mes snijdt, het meestal bloedt; en ze was dat nooit vergeten, als je veel drinkt uit een fles met 'vergif', is het bijna zeker dat je het niet eens bent met je, vroeg of laat.
 
Dit flesje was echter NIET gemarkeerd als 'vergif', dus Alice waagde het te proeven en vond het erg leuk (het had eigenlijk een soort gemengde smaak van kersentaart, vla, pijnappel, gebraden kalkoen, toffee, en hete beboterde toast,) ze maakte het al snel af. 
 
 
 
Een andere sectie begint hier
 
 
 
Simpele techniek met pure CSS
 
 'Wat een nieuwsgierig gevoel!' zei Alice; 'Ik moet opsluiten als een telescoop.'
 
En zo was het inderdaad: ze was nu slechts tien centimeter hoog en haar gezicht fleurde op bij de gedachte dat ze nu de juiste maat had om door de kleine deur naar die mooie tuin te gaan. Eerst wachtte ze echter een paar minuten om te zien of ze verder zou gaan krimpen: ze voelde zich een beetje nerveus hierover; want het zou kunnen eindigen, weet u, 'zei Alice tegen zichzelf,' in mijn uitweg helemaal, als een kaars. Ik vraag me af hoe ik dan zou moeten zijn? ' En ze probeerde zich voor te stellen hoe de vlam van een kaars eruitzag nadat de kaars was uitgeblazen, want ze kon zich niet herinneren ooit zoiets gezien te hebben.
 
Na een tijdje, toen ze merkte dat er niets meer gebeurde, besloot ze meteen de tuin in te gaan; maar helaas voor arme Alice! toen ze bij de deur aankwam, merkte ze dat hij de kleine gouden sleutel was vergeten en toen ze daarvoor terugging naar de tafel, merkte ze dat ze die onmogelijk kon bereiken: ze kon het heel duidelijk door het glas zien en ze probeerde het haar best om op een van de poten van de tafel te klimmen, maar het was te glad; en toen ze zichzelf moe had van het proberen, ging het arme kleine ding zitten en huilde.
'Kom op, het heeft geen zin om zo te huilen!' zei Alice tegen zichzelf, nogal scherp; 'Ik raad u aan om deze minuut te verlaten!' Over het algemeen gaf ze zichzelf heel goed advies (hoewel ze het zelden volgde), en soms schold ze zichzelf zo streng uit dat ze tranen in haar ogen bracht; en toen ze zich eenmaal haar eigen oren probeerde te bedekken omdat ze zichzelf had bedrogen in een potje croquet, speelde ze tegen zichzelf, want dit merkwaardige kind hield er heel erg van om zich voor te doen als twee mensen. 'Maar het heeft nu geen zin,' dacht arme Alice, 'om zich voor te doen als twee mensen! Wel, er is nauwelijks genoeg over om een ​​respectabel persoon te maken! ' 
Al snel viel haar oog op een klein glazen doosje dat onder de tafel lag: ze opende het en vond er een heel klein koekje in, waarop de woorden 'EET MIJ' prachtig in krenten werden gemarkeerd. 'Nou, ik zal het opeten,' zei Alice, 'en als het me groter laat worden, kan ik de sleutel bereiken; en als het me kleiner laat worden, kan ik onder de deur kruipen; dus hoe dan ook, ik ga de tuin in, en het kan me niet schelen wat er gebeurt! '
 
Ze at een beetje en zei angstig tegen zichzelf: 'Welke kant op? Welke kant op? ', Met haar hand op de bovenkant van haar hoofd om te voelen op welke manier het groeide, en ze was behoorlijk verbaasd toen ze merkte dat ze dezelfde maat bleef: dit gebeurt meestal als iemand cake eet, maar Alice was zozeer in de weg gekomen om niets anders te verwachten dan uit de hand gelopen dingen, dat het nogal saai en dom leek om het leven op de gebruikelijke manier voort te zetten.
 
Dus ging ze aan het werk en maakte de taart al snel af. 
 
 
 
HET EINDE
 

En deze CSS naar uw stylesheet:

.illustration_03 background-colour: # 14b29a; background-image: url ("... /images/miniwhite.png");  .illustration_04 background-color: # 80b9f1; background-image: url ("... /images/miniblack.png"); 

U zou nu uw volledige scherm op zijn plaats moeten hebben met een derde en vierde inhoudscontainer die het volgende laat zien:

Evenals een laatste afscheider om het af te sluiten:

5. Maak het responsief

Het allerlaatste dat u moet doen, is rekening houden met verschillende schermformaten. Wanneer de viewport te klein wordt om onze achtergrondafbeeldingen comfortabel te kunnen plaatsen, willen we deze in plaats daarvan omzetten naar inline afbeeldingen.

Boven aan elk van je inhoudsbakken, in de opening divs en boven de tekst, voeg je een figuur toe met de klas .klein scherm en binnen die plaats een img tag om alle afbeeldingen te laden die momenteel in de achtergronden worden gebruikt:

Eerste inhoud container:

Tweede inhoudscontainer:

Container met derde inhoud:

Vierde inhoud container:

We gaan de gebruiken .klein scherm klasse om dit inline-beeld standaard te verbergen, maar om dit weer te geven wanneer we een kleinere schermgrootte bereiken.

Voeg de volgende klasse toe aan uw stylesheet:

.smallscreen display: none; 

We voegen nu de mediaquery's toe die verwerken of de achtergrond- of inline-afbeeldingen worden weergegeven. Ze zullen ook geleidelijk de grootte van de tekst en ruimte in de lay-out verkleinen, zodat we de dingen mooi inpassen bij alle viewport-breedten.

Voeg deze mediaquery's toe aan uw stylesheet:

@media (max-width: 106.25rem) .wrapper, .separator font-size: 1.6875rem;  @media (max-width: 93.75rem) .content, .separator font-size: 1.5rem;  .recht opvulling: 1.618em 4.854em 1.618em 50%;  .left opvulling: 1.618em 50% 1.618em 4.854em;  @media (max-width: 81.25rem) .content, .separator font-size: 1.3125rem;  .recht opvulling: 1.618em 3.236em 1.618em 45%; achtergrondformaat: 44% automatisch; achtergrond-positie: 0 55%;  .left opvulling: 1.618em 45% 1.618em 3.236em; achtergrondformaat: 44% automatisch; achtergrond-positie: 100% 55%;  @media (max-width: 68.75rem) .content, .separator font-size: 1.125rem;  .recht opvulling: 1.618em 3.236em 1.618em 40%; achtergrondformaat: 39% automatisch; achtergrond-positie: 0 60%;  .left opvulling: 1.618em 40% 1.618em 3.236em; achtergrondformaat: 39% automatisch; achtergrond-positie: 100% 60%;  @media (max-width: 50rem) .smallscreen display: block;  .recht opvulling: 1.618em 3.236em; achtergrondafbeelding: geen;  .left opvulling: 1.618em 3.236em; achtergrondafbeelding: geen;  @media (max-width: 31.25rem) .recht opvulling: 1.618em 1.618em;  .left opvulling: 1.618em 1.618em;  @media (max-width: 12rem) html min-width: 12rem; 

De eerste vier mediaquery's verminderen eenvoudigweg de tekstlettergrootte en padding in de inhoudcontainers geleidelijk aan de beschikbare schermbreedte.

In de vijfde media-vraag van maximale breedte: 50rem we nemen code op die de .klein scherm Klasse zichtbaar, verwijdert onze 50% zijvulling uit de inhoudcontainers en verbergt de achtergrondafbeeldingen. Wanneer deze mediaquery van start gaat, zien we niet langer de grote achtergrondafbeeldingen met vaste achtergrond en in plaats daarvan zien we normale afbeeldingen boven aan elke inhoudscontainer.

Wanneer u nu uw site ververst, zou u deze soepel moeten zien verkleinen samen met alle viewport-breedten, totdat u dit ziet op zijn kleinste formaat:

Conclusie

Zelfs na zoveel jaar werken met CSS ben ik altijd verrast door het steeds groter wordende aantal geweldige dingen die je ermee kunt doen. En hoe eenvoudiger de techniek is, des te indrukwekkender.

Probeer dit juweeltje, het is zo snel en gemakkelijk dat je waarschijnlijk verslaafd raakt!