Afbeelding en box-eigenschappen vormgeven

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.

Afbeeldingen zijn inline block-elementen wat betekent dat je er meerdere naast elkaar op de regel kunt plaatsen.

Ik dupliceer het img-element op de index.html met Commando C.

En daarna op de volgende regel Commando V.

Ik wijzig de jpg-afbeelding in afbeeldingen eenmaal in de png afbeelding en de ander keer in de gif-variant.

Als het goed is zie je dat het png-formaat net wat strakkere randen heeft dan het gif-formaat.

Wacht, dat wordt nog duidelijker als ik ze voorzie van een achtergrondkleur.

Ik kopieer de achtergrondkleur van de aside en plak deze voor het img-element.

Bij de css-stijl van deze afbeelding wijzig ik de grootte voor de mobiele versie van honderd procent naar veertig procent.

Je ziet dat beide afbeeldingen nu naast elkaar staan.

Dat gebeurt omdat het inline-block-elementen zijn.

Nu kun je de box-eigenschappen gaan gebruiken om deze afbeeldingen te voorzien van bepaalde opmaak en vormgeving.

Allereerst de margin. Dat is transparante ruimte naar buiten.

Ik start met een margin van vijf procent.

De afbeeldingen passen niet meer op één regel.

De margin wordt langs alle zijden toegepast op deze manier.

Hierdoor nemen de afbeeldingen niet meer twee keer veertig procent, dus tachtig procent in beslag.

Maar komt daar nog eens vier keer vijf procent bij. Bij elkaar opgeteld is dit honderd procent.

Dus eigenlijk zou dat moeten passen. Dat klopt.

Wat hier gebeurt is dat er een spatie zit tussen deze twee afbeeldingen.

In de html-broncode heb ik de tweede afbeelding op een nieuwe regel geplaatst en dat veroorzaakt nu een spatie.

Zet ik beide img-elementen direct na elkaar in de broncode.

Dan verdwijnt de spatie en nu passen ze wel allebei op de regel.

Weet wel dat je zelf de optelsom in de gaten moet houden.

Het is de breedte van het element plus de opgegeven margin.

Wijzig ik vijf procent in zes procent.

Dan is dit bij elkaar opgeteld honderdvier procent en passen ze ook weer niet meer naast elkaar.

Het boxmodel biedt ook afstand naar binnen aan met een padding.

Maar de padding kun je niet toepassen op een img-element.

Je kunt wel een rand opgeven met border.

Je start dan met de waarde voor de dikte bijvoorbeeld pixels.

Dan het soort lijn, bijvoorbeeld solid en als laatste de kleur, bijvoorbeeld black.

Je mag de rand zo dik maken als dat je wilt.

Deze wordt niet opgeteld bij de breedte en de margin die de afbeelding in beslag neemt.

Maar dat heeft wel een reden.

Ik heb helemaal bovenin het stijlblad voor alle elementen op de pagina de box-sizing op border-box gezet .

Standaard staat deze op content-box.

Dan moet je de breedte van de rand wel optellen bij de width en de margin.

Want je ziet dat de afbeeldingen nu niet meer op een regel passen.

Zoals je ziet heb ik voor de margin en de breedte gebruik gemaakt van percentages.

en voor de rand juist van pixels.

Het is niet te doen om percentages op te tellen bij pixels.

Dus zet ik deze maar snel weer terug op border-box. Zo nu past het weer.

Het fijne van percentages is dat deze mee schaalt met de breedte van het scherm.

Maak het scherm maar kleiner en de afbeeldingen schalen prachtig mee.

Alleen als de éénkoloms overgaat op een driekoloms dan passen ze weer niet naast elkaar.

Dat komt omdat voor de mediaquerie voor schermen breder dan zeshonderd pixels de breedte nog op vijftig procent staat.

Aangezien we nu ook een margin van vijf procent hebben opgegeven.

Moet ik de waarde hier ook verlagen naar Veerig procent.

Of deze eigenschap hier gewoon weghalen als ik nu immers toch hetzelfde wil als bij de mobiele versie.