Randen vormgeven om afbeelding (border & -radius)

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: Tekstomloop met Float

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.

Je kunt afbeeldingen voorzien van een rand met de css-eigenschap border.

Voor de eigenschap border kun je drie waarden opgeven.

Allereerst de dikte van de rand, dan het soort rand en als laatste de kleur.

Ik verwijder de tweede afbeelding uit de html en kies nu voor de afbeelding belinda.jpg.

Ik geef deze in het cds-stijlblad een breedte van tachtig procent.

Dan laat ik je eerst de soorten randen zien die je kunt toepassen.

Probeer ze allemaal eens uit zodat je ze leert kennen.

In plaats dat je één soort rand toepast...

kun je ook elke zijde van de rechthoek voorzien van een andere randdikte, randsoort en randkleur.

Dat gaat dan als volgt. In plaats dat je met border de drie eigenschappen langs de gehele rand laat toepassen.

Kan ik ook voor elke zijde een andere rand opgeven.

Dat doe je dan met border-top, border-right, border-bottom en border-left.

Nu kun je per randzijde de drie waarden verschillend opgeven.

Ik maak de bovenste rand vijf pixels dik met een stippellijn en in een oranje kleur.

Deze kopieer ik hier boven weg en plak ik als kleur voor de border-top.

De rechterzijde maak ik tien pixels dik met een dubbele rand in de kleur rood, dezelfde als de head.

Dan de onderste rand, twintig pixels met groove, opnieuw in de oranje kleur.

En de laatste linkerrand maak ik dertig pixels dik, in de stijl inset en de rode kleur.

Om de randen nog beter te zien ga ik inzoomen in het browservenster.

Zie je dat de bovenste en rechterrand transparante delen hebben die gevuld worden met een zeegroene kleur.

Dat komt omdat de afbeelding is voorzien van deze achtergrondkleur.

Als ik de background-kleur verwijder dan zie je door de transparante delen de achtergrondkleur van de main-content.

De rechte hoeken kun je ook afronden met border-radius.

Ik geef een waarde op van twintig pixels.

Afhankelijk van de soort randen die je combineert levert dit een vreemd resultaat op in de hoeken.

In plaats van absolute waarden kun je ook een percentage opgeven voor de hoeken.

Bijvoorbeeld twintig procent.

Om een perfecte afronding te creëren pas je vijftig procent toe.

Stel dat de breedte en de hoogte van de afbeelding gelijk waren geweest had je nu een cirkel gehad.

Zoals je voor de rand per zijde een andere waarde kunt opgeven kun je dit ook doen voor de border-radius.

Ik kies weer even één lijnsoort en -kleur. Ik maak deze solid.

Ook een erg leuk effect, alleen maar toegepast op de border-top.

Maar dan haal ik de top nu weg zodat ik alle hoeken weer in beeld krijg.

Plaats dan in plaats van één waarde vier waarden.

De eerste waarde geldt voor de linker bovenhoek.

Daarna de rechter bovenhoek, de rechter onderhoek.

En als laatste de linker onderhoek. Met de klok mee dus.

In plaats van vier waarden kun je ook twee waarden invoeren. En ik haal de middelste twee weg.

De eerste waarde geldt dan voor de linker bovenhoek en de rechter onderhoek.

De tweede waarde voor de andere twee hoeken.

Lijkt me dat je nu voldoende kunt gaan experimenteren met het maken van verschillende combinaties van lijnsoorten en hoekafrondingen.