Background-repeat toepassen

uit de cursus Webdesign & Layout met css (2019)

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 antwoord

Registreer als je wilt reageren.

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

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Standaard wordt een achtergrond afbeelding herhalend toegepast.

Maar je kunt dit zelf bepalen met de eigenschap background-repeat.

Met 'no-repeat', zorg je ervoor dat de afbeelding slecht één keer geplaatst wordt.

Met 'repeat' zorg je ervoor dat deze zowel horizontaal als verticaal herhaald wordt.

Dit is dus de 'standaard' instelling zoals we al gemerkt hebben.

Je kunt er ook voor kiezen om de afbeelding alleen maar horizontaal te laten herhalen. Dat doe je met 'repeat-x'.

Of alleen maar verticaal met 'repeat-y'.

Hiermee kun je ook leuke creatieve scheidingslijnen maken.

We gaan het toepassen in ons document.

Ik wijzig de achtergrondafbeelding van de kop h-twee in speak.svg.

Om de herhaling te verwijderen gebruik ik de eigenschap background-repeat met de waarde no-repeat.

Kijk, dat ziet er al beter uit. Alleen moet de tekst nu meer afstand krijgen naar links.

Dat doen we met een padding-left van vijftig pixels ofwel vijf rem.

Dan mag de tekst iets naar beneden komen te staan.

Daarvoor gebruik ik een padding-top met een waarde van tien pixels ofwel één rem.

Nu hebben we de padding drie keer apart opgegeven.

Maar dit had natuurlijk ook in één shorthand-notation gekund.

Met padding, naar boven is één rem.

Dan afstand naar rechts, dat is nul. Afstand naar beneden is ook één rem.

En naar links hebben we op vijf rem gezet.

Dan kunnen deze css-regels verwijderd worden.

Laat ik nog even de mogelijkheden van enkel een horizontale of verticale herhaling zien.

Dat doe ik met de asides.

Ik maak hier een samengestelde selector voor aan. Dus dat is een .aside-top komma met de .aside-bottom.

De aside-top heb ik al eerder een achtergrondafbeelding gegeven, deze knip ik hier weg met Commando X.

Plak ik voor de samengestelde selector en dan wijzig ik de afbeelding in diamond.svg.

Deze svg heeft nog geen breedte en hoogte gekregen.

En vult dan direct herhalend het hele beschikbare vlak.

Dat ga ik aanpassen bij de svg. Ik plaats een width="" en een height=""

En deze zet ik beide op tien pixels.

En bewaar dan het document.

Nu hoef ik enkel nog maar aan te geven dat ik dit niet als patroon herhalend wil hebben.

Maar via background-repeat, enkel horizontaal, met repeat-x

En dan wordt hij enkel horizontaal herhaald.

Wijzig de x in een y en je krijgt een verticale herhaling.

Dankzij de padding bij de .aside-top en .aside-bottom van twintig pixels

overlappen de teksten het patroon niet.