CSS2 – Achtergrondafbeelding voor teksten

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.

Laat ik nog één leuke toepassing zien van het gebruik maken van achtergrondafbeeldingen. Maar dan bij een paragraaf.

Daarvoor keer ik eerst weer terug naar mijn broncode.

Ik wil alle eerste paragrafen van mijn artikelen gaan voorzien van een achtergrondafbeelding.

Daarvoor moet ik zorgen dat ik alleen maar de eerste paragrafen kan benaderen en dat doe ik met een class.

En die noem ik bijvoorbeeld 'first'.

Deze class, die pas ik toe aan alle eerste paragrafen van elk artikel.

Dus ook hier. En hier. En er is er nog eentje en dat is hier.

Dan schijf ik nu voor de class 'first' een aparte stijl-opdracht in mijn stijlblad.

Dit doe ik dan na de 'p'. ( .first { } )

Als eerste plaats ik de achtergrondafbeelding.

In de map 'img' staat een achtergrondafbeelding die je hiervoor kunt gebruiken. En die hand.png.

En dan zie ik dat deze inderdaad herhalend wordt toegepast op alle eerste paragrafen.

Ik ga ervoor zorgen dat ik deze afbeelding slechts eenmaal zie. en dat doe ik met de eigenschap 'background-repeat : no-repeat'.

En wil ik deze eerste regel nog een stukje opschuiven. En dan doe ik dat bijvoorbeeld met de eigenschap 'text-indent' en een waarde.

Alle eerste regels zijn nu pixels verplaatst.

Het fijne van een background-image is dat je deze heel precies kunt positioneren.

Dat doe je dan met de eigenschap background-position.

Horizontaal wil ik de afbeelding niet verplaatsen, dus deze hou ik op .

Maar verticaal wil ik hem een klein beetje naar beneden verplaatsen.

Dus ik denk dat met pixels hij precies naar de tekst ongeveer wijst.

Qua creativiteit kun je heel veel leuke dingen doen met een background-image.

Puur een kwestie van veel experimenteren.

Het allerlaatste wat we nu behandelen van de css background eigenschappen, is de shorthand-notation.

Tot nu toe hebben we telkens gebruik gemaakt van de longhand notation.

Dus dat je elke eigenschap apart benadert als background-color, background-image.

Je kunt al deze eigenschappen samenvoegen in de shorthand-notation.

Dan plaats je alleen maar als eigenschap 'background'.

En de waarden moeten dan allemaal wel exact op deze volgorde worden ingevoerd.

Gescheiden door een spatie plaats je eerst 'color', dan 'image', dan de 'repeat', 'attachment' en als laatste 'position''.

Position bestaat dus altijd uit twee waarden.

Als je maar één waarde invoert dan wordt automatisch de andere waarde op % of center gezet.

Je bent niet verplicht om al deze waarden in te voeren. Dus als je geen attachment gebruikt.

Dan sla je deze waarde gewoon over. Ik doe het voor in ons voorbeeld document.

Je kan dus de zojuist geschreven stijl gaan omzetten in een shorthand-notation.

En dat doe je dan dus door alleen maar de iegenschap 'background' te noemen.

Dubbele punt. En je begint als eerste met het bepalen van een achtergrondkleur.

Als je deze niet wilt gebruiken dan sla je deze over. Daarna de url naar de afbeelding.

Vervolgens bepaal je de repeat, deze staat dus op 'no-repeat'.

Dan de attachment, deze pas ik niet toe.

En als laatste de background-position. Die heb ik wel gebruikt.

En daarvan is de eerste waarde . En de tweede waarde pixels.

Vervolgens kan ik dus deze drie css-stijlregels verwijderen en zijn ze nu geschreven in één regel.