Pseudo-element before & after

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

Volgende video: De Webeditor Brackets

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.

En dan de pseudo-elementen 'before' en 'after'.

Je kunt 'iets' plaatsen voor en/of na een html element met deze pseudo-elementen.

Wederom combineer je het pseudo-element met het html element waarop je deze betrekking wilt laten hebben.

Zo kan ik er bijvoorbeeld voor kiezen om voor de eerste letter van de kop h-twee en h-drie een illustratie te plaatsen.

Daarvoor plaats ik in mijn stijlblad de selector h-twee::before

Komma, spatie en h-drie::before.

Het invoegen van een afbeelding doe je met de eigenschap 'content',

Bij de waarde plaats je dan de url.

Tussen haakjes en de quotes plaats je dan de route naar de afbeelding.

In het mapje 'img' staan de illustraties voor.png en na.png die je voor deze oefening kunt gebruiken.

De route naar het bestand voor.png is dan ../ om eenmaal omhoog uit de map css te gaan.

Daarnaast staat de map 'img' en daarin staat dan het bestand voor.png.

Dan wil ik ook een illustratie aan het einde plaatsen.

En daarvoor schrijf ik de pseudo-elementen h-twee:after en de h-drie:after.

Ditmaal verwijs ik naar het bestand 'na.png'.

En inderdaad verschijnt aan het einde van mijn koppen nu ook een afbeelding.

Stel dat ik afstand wil tussen de illustratie en de kop. Dan gebruik ik hiervoor 'padding'.

En dan is de afstand tussen de illustratie ervoor een afstand naar rechts.

Daarvoor gebruik ik dan een 'padding-right' en ik geef één rem afstand.

Dat staat gelijk aan tien pixels.

Hetzelfde ga ik doen voor het einde van de koppen.

Daar ga ik ook een 'padding' opgeven. Ditmaal een padding naar links dus gebruik ik 'padding-left'.

Beide illustraties houden dan afstand ten opzichte van de tekst.

De pseudo-element 'after' en 'before' bieden nog meer mogelijkheden dan het plaatsen van een illustratie of een afbeelding.

Je kunt ook tekst plaatsen.

Als waarde voor de eigenschap 'content' plaats je dan tussen aanhalingstekens de tekst die je wilt laten verschijnen.

Stel dat ik na alle links op mijn pagina tekst wil plaatsen.

Dan zoek ik eerst het a-element op, de a:link.

Maak daar de pseudo-selector voor a::after.

Met weer als eigenschap 'content' en als waarde tussen aanhalingstekens.

Plaats idd an eerst een spatie afstand en dan (Lees meer..)

En ook deze tekst kan ik gaan vormgeven met bijvoorbeeld een font-site.

Die ik kleiner maak, bijvoorbeeld één punt twee rem. Zodat de tekst in het klein wordt gezet.

Ik zie nu bovenin het navigatiemenu dat elke knop ook de tekst (Lees meer..) heeft gekregen.

Dat komt omdat deze navigatieknoppen ook link-elementen zijn met het element a.

Dan moet je de selector gaan verfijnen zodat deze alleen nog maar betrekking heeft op de links in het main-element.

Dan kun de selector uitbreiden met main. Je kunt zelfs de class-naam erbij betrekken met punt main-content.

Ditmaal zorgt deze pseudo-selector ervoor dat de vormgeving enkel geldt

voor de links in het main-element met de class-naam 'main-content'.

Je kunt zelfs een waarde laten ophalen uit de html.

Dat doe je dan met de volgende waarde bij 'content' "("attr(href)")"

Tussen haakje openen en haakje sluiten plaats je weer twee aanhalingstekens.

Dan roep je eerst het attribuut op en daarna de waarde waarom het gaat.

En die benoem je dan met href.

In de html-code schrijf je binnen de link met 'href' het webadres naar waartoe gelinkt moet worden.

Dit linkadres verschijnt dan nu tussen haakjes.

Ook hier geldt als ik een spatie wil, plaats ik voor het haakje een spatie.

En nu wordt er een spatie afstand gehouden ten opzichte van de link

En de op deze manier geplaatste webadres.