CSS3 – Background-attachment, fixed & scroll

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.

En dus niet alle beschikbare ruimte benut van de webpagina, zolang als de webpagina is.

En dus niet alle beschikbare ruimte benut van de webpagina, zolang als de webpagina is.

Dan gebruik je hiervoor een volgende eigenschap. En dat is namelijk de background-attachment.

Deze zet ik nu op 'fixed' en ik bewaar mijn document en ik keer terug naar de browser.

En wat je nu ziet is dat de viewport als uitgangspunt wordt genomene.

De afbeelding wordt hierbinnen proportioneel geplaatst.

Als ik mijn venster smaller maak, dan kan het wel zijn dat beeld verdwijnt.

Een ander groot voordeel van de 'background-attachment : fixed', is dat de afbeelding dus ook vast staat op mijn viewport.

Dus als ik nu naar beneden ga scrollen, dan scroll ik als het ware gewoon de pagina over de afbeelding heen.

En de afbeelding zelf blijft stil staan

En als je jezelf afvraagt, waarom je bijvoorbeeld hiervoor niet ook de background-size 'contain' zou kunnen gebruiken.

Of bijvoorbeeld procenten. Dan laat ik dat even zien.

Als ik deze zou zetten op 'contain' en ik bekijk hiervan een weergave in de browser.

Dan zie je nu al wat er gebeurt. 'Contain' plaatst altijd alles van de afbeelding.

Dit houdt dus in dat je dus lege ruimtes tevoorschijn ziet komen.

En dat kan dus ook in de breedte gebeuren en niet alleen in de hoogte.

Kies ik voor waarden in procenten, bijvoorbeeld %, %.

Dan hoef je in ieder geval niet meer bang te zijn dat er ooit een witte ruimte verschijnt.

Maar de foto wordt wel disproportioneel vergroot en verkleind.

Daarom is de waarde 'cover' voor background-size, in combinatie met background-attachment 'fixed', eigenlijk de beste optie.