CSS3 – Background-origin, en background-clip

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video leg ik uit waarvoor je de eigenschappen background-origin en background-clip gebruikt.

Deze eigenschappen hebben betrekking op de wijze waarop achtergrondafbeeldingen getoond worden in de box.

Hiervoor keren we eerst nog weer even terug naar het boxmodel.

Een box bestaat uit de margin, border, padding en de content.

De margin is altijd een transparant gebied.

Deze kan geen achtergrondkleur of een achtergrondafbeelding tonen.

Dus die doet in dit hele verhaal niet mee.

Blijven dus de border, de padding en de content over.

Ik begin met het uitleggen van de background-origin.

Deze wordt standaard namelijk altijd toegepast zodra je een achtergrondafbeelding plaatst.

Met background-origin bepaal je wat de startpositie van de achtergrondafbeelding in de box is.

Dit kan dus vanaf de border, de padding of de content.

Maar standaard staat deze op de 'padding-box'.

Ik doe het voor in een voorbeeld document.

Open de index.html die behoort bij deze video.

In dit voorbeeld heb ik een extreem dikke kaderrand en grote padding opgegeven.

Zodat je goed de verschillen tussen border en padding kunt zien.

Nu wordt de afbeelding gestart vanaf de padding.

Dit is namelijk de standaard origin van een achtergrondafbeelding.

Vanaf die positie wordt de afbeelding dan herhalend toegepast. Ook in de border zoals je ziet.

Je kunt de startpositie van de afbeelding verschuiven met de waarden 'border-box' en content-box'.

Allereerst maak ik gebruik van de eigenschap 'background-origin : padding-box'.

Dit is de standaard weergave, dus als ik nu mijn weergave ververs. Dan zie je geen verandering.

Ik kan deze background-origin gaan verplaatsen naar bijvoorbeeld de border.

Nu wordt de afbeelding gestart vanaf de border van de box.

En pas daarna herhalend toegepast.

En ik had er ook voor kunnen kiezen om deze te positioneren vanaf de content.

Het inhoud gebied, de content, is nu de startpositie geworden van de achtergrondafbeelding.

En deze wordt vanaf deze positie vervolgens gerepeteerd.

Met background-clip bepaal je vanaf waarde achtergrondafbeelding schoon gesneden moet worden.

Vanaf de border, de padding of de content van de box.

Buiten vallende delen worden dan weggesneden en zijn niet zichtbaar in de box.

Meestal gebruik je een combinatie van zowel de background-origin als de background-clip.

Met background-origin bepaal je vanaf waar de achtergrondafbeelding moet starten.

En met 'clipping' bepaal je vanaf waar de afbeelding moet worden weggesneden.

Ik doe dit voor in ons voorbeeld document.

Dus ik plaats in mijn voorbeeld document een background-clip en deze plaats ik in eerste instantie ook op de 'content-box'.

Dit zorgt er dus voor dat de achtergrondafbeelding niet meer zichtbaar is binnen de padding en de border.

Als ik de background-clip op padding zet.

Dan is deze wel zichtbaar binnen de padding, maar niet binnen de border.

En als ik deze dus op de border plaats.

Dan is de achtergrondafbeelding dus ook zichtbaar achter de border.

En met de background-origin kan ik dan de startpositie van de afbeelding bepalen.

Dus stel dat ik de afbeelding zou willen gebruiken en alleen maar zichtbaar wil maken binnen de padding.

En ik wil ook dat de afbeelding dan mooi start bij de padding.

Dan zet je dus beide eigenschappen, dus zowel de background-origin op padding.

Als de background-clip op padding.

Als je één van deze eigenschappen gebruikt, de -origin of -clip. Dan doe je er goed aan om ze allebei in te stellen.

Op deze manier heb je de meeste controle op de weergave van de achtergrondafbeelding.