CSS-kleuren hexadecimaal, rgb & hsl (color)

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.

Kleuren zijn erg belangrijk bij de vormgeving van de website.

Ze bepalen voor een groot deel de sfeer en de uitstraling.

En deze moeten natuurlijk bij het product passen en de doelgroep aanspreken.

Voor het kiezen van kleuren en het samenstellen van kleurpaletten bestaan veel hulpmiddelen.

Ik heb hier een online kleurkiezer. Deze vind je op de website van developer.mozilla.org.

Bepaal eerst de kleurtoon door deze in de slider op de gewenste kleursoort te zetten.

De kleurkiezer toont in een wit cirkeltje de huidige kleur.

Klik en houdt ingeklikt om een variant op deze kleur te zoeken.

Om deze kleur tijdelijk te bewaren sleep je het kleurvlak onderin beeld naar het witte kader.

Kies opnieuw een kleur uit, verfijn deze in de kleurkiezer.

Sleep hem om tijdelijk te bewaren.

Kies ongeveer drie toe vier kleuren op deze manier.

Door de kleuren naast elkaar te zetten kun je goed beoordelen of deze goed bij elkaar passen.

Wil je een bewaarde kleur wijzigen.

Dubbelklik op het kleurvlak, deze kleur wordt weer geactiveerd en kun je aanpassen.

Net zo lang tot je tevreden bent over je eigen keuze.

Dan de kleurwaardes. Je kunt de hexadecimale kleur gaan gebruiken.

De hsl kleur of de rgb kleur.

De HSL en RGB kleuren bestaan uit minimaal waarden.

Voor HSL is dat de waarde voor Hue, wat staat voor kleurtoon.

Saturation wat staat voor verzadiging en Lightness wat staat voor helderheid.

RGB is de afkorting voor de kleuren Red, Green en Blue, rood, groen en blauw.

Het grote voordeel van hsl en rgb is dat je hiermee ook kleuren transparant kan maken.

Daarvoor gebruik je dan het alpha-kanaal a.

Dit is dan een vierde waarde die je in het css-stijlblad bij de waarden typt.

Ik neem deze kleuren mee naar het css-stijlblad.

Voor dit hoofdstuk maken we gebruik van de bestanden uit de local root folder css--.

Ga naar bestand > Open map en wijs de map css-- toe.

Open dan de bestanden index.html en main.css.

Bovenin het css-bestand heb ik al de kleuren geplaatst tussen css-commentaar tekens.

Controleer maar de verschillende kleurwaarden met die uit de kleurkiezer.

Door een / en het asterix-teken te typen start je commentaar op. Deze sluit je omgekeerd weer af.

Veel designers plaatsen zo bovenin het stijlblad het kleurenpalet.

Dan hoef je hier niet telkens naar te zoeken.

Je plaatst dan natuurlijk niet alle soorten waarden zoals ik nu gedaan heb. Eén soort is genoeg.

Kies welke jij het prettigst vindt werken. Voor nu loop ik even alle kleuropdrachten met je af.

Ik ga alle tekst op deze pagina kleuren. Daarvoor plaats ik een body-selector.

Met de css-eigenschap color.

Nu kun je een kleurwaarde bovenin het stijlblad selecteren en kopiëren met Commando C.

En plakken als tekstkleur. Deze werkt alvast.

Een hsl kleur bestaat uit minstens drie waarden. Ik kopieer de groene kleur.

En vervang de hexadecimale kleurcode hiermee. En deze werkt ook.

Zoals ik al zei kun je hsl-kleuren een vierde waarde meegeven waarmee je de transparantie bepaalt.

Hiervoor pas je een alpha-kanaal toe. Dan typ je achter hsl een a.

Nu kun je een vierde waarde plaatsen. Eerst een komma. En transparantie werkt als volgt.

Het getal één is honderd procent dekkend. Nul is honderd procent transparant.

Dan is punt vijf, vijftig procent dekkend. Inderdaad. Zo werkt het. Hetzelfde geldt voor rgb.

Ik kopieer de rgb blauwe kleurwaarde. Vervang mijn hsl kleurwaarde.

Ook nu typ ik achter rgb een a.

En kan ik de transparantie bepalen met bijvoorbeeld punt acht.

Tachtig procent dekkend.

Experimenteer met het toepassen van de kleuren.

RGB en HSL worden wel het meest gebruikt vanwege de toepassing van transparantie.