CSS3 – Shorthand notation voor achtergrondafbeelding

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.

De shorthand-notation voor background eigenschappen waren in css als volgt.

Je plaatste achter elkaar met telkens een spatie tussenruimte.

Eerst de kleur, dan de url van de afbeelding, dan de waarde voor repeat, attachment en als laatste de position.

Als je één van deze waarden niet invulde, dan werden hier gewoon de default instellingen voor aan gehouden.

In css zijn er nieuwe background eigenschappen bij gekomen als de 'size, origin en clip'.

In de nieuwe shorthand-notation plaats je de position nu direct na de url van de afbeelding.

Daarna volgt de size, gescheiden met een slash (/).

En dan volgen weer gewoon de repeat en de attachment.

En je sluit je shorthand-notation af met de origin en de clip.

Vaak gebruik je voor beiden dezelfde waarde.

Dus als je hier maar één waarde invoert dan wordt deze zowel op de origin als de clip toegepast.

Ik laat het toepassen van de css shorthand-notation zien in een voorbeeld document.

Op deze pagina staat in de 'div' met de class 'mainheader', een achtergrondafbeelding.

En alle overige background eigenschappen zijn in de css-stijl apart beschreven.

Hier kun je dus ook een shorthand-notation van maken en dat gaat als volgt.

Je plaatst alleen maar de eigenschap 'background'.

En dan begin je met het definiëren van de kleur en dat is lichtgrijs.

Vervolgens plaats je de url naar de afbeelding die je als achtergrondafbeelding gebruikt.

En daarna volgt de 'position'. En deze staat horizontaal gecentreerd met 'center'.

En ook verticaal gecentreerd met 'center'.

Na de 'position' volgt nu de 'size'.

Je typt een slash (/) als scheidingsteken tussen de 'position' en de 'size'. En de size staat op %.

Dan weer een spatie en vervolgens de 'background-repeat', die staat op 'no-repeat'.

En de laatste waarden staan voor 'background-origin' en 'background-clip'. Deze staat beide op 'content-box'.

En dan voldoet het in principe ook om deze maar één keer te noemen.

Dan wordt deze waarde zowel voor de 'origin' als de 'clip' toegepast.

Dan kun je nu de aparte stijlregels verwijderen.

En als het goed is verandert er nu niets in de weergave in mijn browser.

In deze shorthand-notation staat nu exact hetzelfde beschreven.