HSLA Farver

HSLA er en variation af HSL, som gør det muligt at lave gennemsigtige farver.

891 visninger

Edited: 2017-09-02 23:49

HSLA står for Hue, Saturation og Lightness, alpha - og er bare HSL med alfakanal. Alfakanalen lader os lave transparente farver, det er eksempelvis nyttigt når du vil have en baggrund af et element til at være gennemsigtigt, men ikke børnene af elementet.

Mulige Værdier

HSLA Farver acceptere fire værdier - den første er Hue, den anden er Saturation, den tredje er Lightness, den fjerde er Alpha. Hue skal angives i grader, imens farvemætning og lysstyrke skal gives i procent, og Alfa angives som en værdi fra 0-1.

HueTager imod en numerisk værdi fra 0-360. Værdier udenfor vil starte forfra, så -60 vil være det samme som 300.
SaturationTager imod en værdi fra 0% til 100%. En værdi af 0% laver en grå variant.
LightnessTager imod en værdi fra 0% til 100%. En 0% lightness er sort, imens en 100% lightness er hvid, og 50% er normal.
AlphaAcceptere en værdi fra 0 til 1. En værdi af 0.5 er ligt 50% gennemsigtig.

HSLA Eksempel

I CSS kan HSLA farver angives på følgende måde:

  background: hsla(240, 100%, 50%, 0.5);

Nedenfor vises et eksempel på to div elementer, hvor der er brugt HSLA til baggrunds farven på den øverste.

Koden brugt i eksemplet ovenfor:

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: hsla(240, 100%, 50%, 0.5);width: 150px;height: 150px;top: 25px;left: 25px;">
  </div>
</div>

Fortæl os hvad du tænker:

  1. Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.
  2. Sådan styrker du dit design med hover-effekter i CSS.
  3. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  4. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  5. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign