Kleurenschema definiëren met variabele (variable)

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.

Het werken met variabelen kan je heel veel werk schelen.

In een variabele leg je één of meerdere css-eigenschappen vast.

Bij het opmaken van de pagina's maak je dan gebruik van deze variabele.

Wijzig je de variabele dan kun je in één handeling de vormgeving van de hele website wijzigen.

Je maakt voor het ontwerp van je website gebruik van een beperkt aantal kleuren en fonts.

Deze pas je dan consequent toe in de gehele website.

Zo behoud je rust en eenheid in de vormgeving.

Daarom is het vastleggen van je kleurenpalet met variabelen een heel goed startpunt.

Om een variabele aan te maken, die voor de gehele website bruikbaar moet zijn, plaats je een root-selector.

Dat schrijf je als volgt, :root { }.

Tussen de accolades plaats je de naam van de variabele.

Je mag hier elke naam voor kiezen die je wilt.

Maar een variabel start je altijd met twee verbindingsstreepjes en daarna de naam.

Bijvoorbeeld --maincolor : ;

Bovenin mijn css-stijlblad heb ik al de kleurwaarden van een kleurenpalet staan.

Ik kopieer de rgb-kleurwaarde van rood met Commando C.

En plak de kleur in de variabele met Commando V.

Dan gaan we deze kleur nu toepassen in de css-code.

Om alle tekst op de pagina rood te kleuren plaats ik in de html-selector een nieuwe eigenschap voor de tekstkleur met color:

Hier plaats je de variabele met var, haakje openen en sluiten.

En tussen de haakjes de naam van de variabele. Dat is --maincolor.

En zie alle tekst op de pagina krijgt nu een rode kleur.

Behalve teksten die later met een css-stijl expliciet anders zijn vormgegeven.

Zoals de kop h-één. Die heeft een zwarte kleur gekregen.

Deze css-stijl wordt later ingelezen en hiermee wordt de voorgaande stijlopdracht overschreven.

Bedenk hoeveel tijd deze werkwijze met variabelen kan schelen.

Tot nu toe bepaalden we voor elk soort html-element op de pagina apart de kleur.

Maar vanaf nu kun je deze variabele kleur gaan gebruiken.

De header heeft deze kleur als achtergrondkleur.

Zoek de selector op van de header, deze heeft als class-naam head.

Dus di staat als .head in het css-stijlblad.

Ik verwijder de huidige hexadecimale kleurcode en verwijs naar mijn variabele kleur met var(--maincolor).

De titel, die nu zwart is, de h-één die maak ik wit met white.

Maar de schaduw koppel ik met mijn variabele kleur.

Ook hier haar ik de hexadecimale kleurcode weg.

Verwijs ik naar mijn variabele kleur --maincolor.

Dan heb ik nu deze kleur op verschillende manieren toegepast.

Als tekstkleur, achtergrondkleur en schaduwkleur.

Wijzig dan de kleur in de variabele zelf.

Ik kopieer de blauwe kleur met Commando C en vervang mijn variabele kleur met commando V.

Met deze ene handeling heb je nu op alle plekken waar je de kleur had toegepast gewijzigd.

Je kunt variabelen aanmaken voor wat je maar wilt.

Stel dat ik de vormgeving van de leesteksten wil opnemen in een variabele.

Ik maak een nieuwe variabele aan. Deze noem ik --maintext:

Ik plaats hier in de shorthand-notation de font-eigenschappen.

Dan start je met de font-style. Die zet ik op italic, een spatie.

Dan de font-variant, dat is small-caps, opnieuw een spatie.

De font-weight zet ik op honderd. De font-size op één punt acht rem.

Een slash en direct erna de interlinie, de line-height zet ik op twee keer de corpsgrootte.

Het lettertype. Het liefst de Heebo, als die er niet is de Arial.

En als ook die er niet is de generieke fontnaam, de sans-serie.

Dan kan ik al deze css-eigenschappen voor het p-element, alle paragrafen gaan vervangen voor deze variabele.

Ze staan hier nog allemaal apart beschreven. Dat doe je met font:var (--maintext).

Alle paragrafen worden nu aangepast.

Ik heb nu in de variabele alle font-eigenschappen opgenomen, maar dat hoeft natuurlijk niet.

Als ik geen italic wil haal ik die weg. Ook geen small-caps, haal ik die weg.

En je kunt eigenschappen wijzigen.

Zodra je gaat werken met variabelen dan ga je ook op een andere manier nadenken over je css-stijlblad.

Je neemt de belangrijkste kenmerken van je vormgeving op in een variabele.

En behoudt zo nog meer controle over de toepassing ervan.

Als de klant dan een wijziging wil in de vormgeving.

Dan bespaart deze werkwijze je heel veel handmatig werk.

Dan hoef je niet maar alle css-stijlen af te lopen maar enkel de variabele te wijzigen.