Illustratie als opsommingsteken met list-style-image

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 reactie

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

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). 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.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te 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.

Tekst en afbeeldingen vormgeven met css

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.

Met de css-eigenschap list-style-image kun je een afbeelding gebruiken als opsommingsteken.

Ik heb een rode ster voorbereid en deze staat in de map img. Je moet de route naar dit bestand beschrijven.

En dat doe je in de selector van de ul-list met list-style-image:

Je start met url, dan haakje openen en een haakje sluiten. En tussen de haakjes,

Aanhalingstekens openen en sluiten en daartussen de route.

Het css-bestand main.css staat in het mapje css.

Op gelijke hoogte in de local route folder staat de map image. We zullen dus eerst één map omhoog moeten,

En dat geef je aan met twee punten en een slash. Dan kom je in de local route folder terecht, daar staat de map image,

En daarin, opnieuw met een slash staan drie bestanden. En ik start met het gif formaat.

Activeer in de map image de gif afbeelding. Brackets toont het formaat van deze illustratie.

Deze is zestien bij zestien pixels. Dat is gelijk aan de huidige fontgrootte van één punt zes rem.

Ook het png-formaat is een plaatje van zestien bij zestien pixels.

Beide ondersteunen transparantie. Allen de png doet dat net iets mooier dan de gif.

Dan het svg-formaat. Het svg-formaat blijft altijd haarscherp, dus die gebruik ik het liefst.

Maar als je deze activeert zie je iets heel anders. Het sterretje wordt ineens veel kleiner weergegeven.

Dat komt omdat in dit svg-bestand geen breedte en hoogte is opgegeven en dat kun je alsnog doen.

Activeer het svg-bestand en plaats in het svg--element een width="" is en height=""

En tussen de quotes het gewenste formaat. En beide zet ik op zestien pixels.

Werk je met een andere editor waarmee je de svg niet kunt wijzigen.

Je kunt het svg-bestand ook openen in een eenvoudige teksteditor en hierin de aanpassingen typen.

Dit is hetzelfde bestand maar nu geopend in de teksteditor op de Mac. Terug naar Brackets.

Bewaar deze wijziging via Bestand > Opslaan. En kijk de ster heeft nu het formaat wat je wilt.

Je ziet ook in het svg-bestand de huidige kleur staan. Zelfs die kun je nog aanpassen als je wilt.

Bovenin mijn stijlblad heb ik een kleurenpalet opgenomen en ik kan hier een kleur kopiëren met Commando C

en de huidige kleur in het svg-bestand ermee vervangen met Commando V. Opnieuw de wijziging bewaren,

Dit is toch wel erg handig van svg.

Als ik mijn -gif- of -png- een andere kleur zou willen geven moet ik dit doen in het programma waarin ik de illustratie heb gemaakt

En dan opnieuw het bestand wegschrijven. Hetzelfde geldt als ik de afbeelding groter of kleiner zou willen toepassen.

Dat is toch wel een erg fijn voordeel van de svg.

Zowel het formaat als de huidige vulkleur kan ik hier in Brackets gewoon nog aanpassen.

Je ziet dat ik in de css -stijl zowel de list- style type als een list-style image heb opgegeven.

De list-style-image overschrijft altijd een eventueel opgegeven list-style-type.

Alleen als de afbeelding op de een of andere manier niet getoond kan worden

dan valt de browser terug op de opgegeven list-style-type.

Dus toch wel handig om dit ook altijd aan te geven.