HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML-video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

HTML HSL en HSLA kleure


HSL staan ​​vir kleur, versadiging en ligtheid.

HSLA-kleurwaardes is 'n uitbreiding van HSL met 'n alfakanaal (ondeursigtigheid).


HSL Kleurwaardes

In HTML kan 'n kleur gespesifiseer word deur gebruik te maak van tint, versadiging en ligtheid (HSL) in die vorm:

hsl( tint , versadiging , ligheid )

Tint is 'n graad op die kleurwiel van 0 tot 360. 0 is rooi, 120 is groen en 240 is blou.

Versadiging is 'n persentasiewaarde, 0% beteken 'n skakering van grys, en 100% is die volkleur.

Ligte is ook 'n persentasiewaarde, 0% is swart en 100% is wit.

Eksperimenteer deur die HSL-waardes hieronder te meng:

hsl(0, 100%, 50%)

HUE

0

VERSADIGING

100%

LIGHEID

50%

Voorbeeld

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)


Versadiging

Versadiging kan beskryf word as die intensiteit van 'n kleur.

100% is suiwer kleur, geen skakerings van grys nie

50% is 50% grys, maar jy kan steeds die kleur sien.

0% is heeltemal grys, jy kan nie meer die kleur sien nie.

Voorbeeld

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)


Ligte

Die ligheid van 'n kleur kan beskryf word as hoeveel lig jy die kleur wil gee, waar 0% beteken geen lig (swart), 50% beteken 50% lig (nie donker nóg lig) 100% beteken volle lig (wit).

Voorbeeld

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)


Skakerings van grys

Skakerings van grys word dikwels gedefinieer deur die tint en versadiging op 0 te stel, en die ligheid van 0% tot 100% aan te pas om donkerder/ligter skakerings te kry:

Voorbeeld

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)


HSLA-kleurwaardes

HSLA-kleurwaardes is 'n uitbreiding van HSL-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.

'n HSLA-kleurwaarde word gespesifiseer met:

hsla( tint, versadiging , ligheid, alfa )

Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (glad nie deursigtig nie):

Eksperimenteer deur die HSLA-waardes hieronder te meng:

hsla (0, 100%, 50%, 0.5)

HUE

0

VERSADIGING

100%

LIGHEID

50%

ALFA

0,5

Voorbeeld

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)