logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS 3 HSL

Die HSL Deklaration benutzt das HSL Farbschema wobei Hue (H) = Farbton, Saturation (S) = Sättigung und Lightness (L) = Helligkeit bedeutet.

Der Farbton wird einem Farbkreis entnommen mit Werten von 0 - 360, wobei (0=360) rot entspricht, 120 grün und 240 blau. Die Sättigung wird in % angegeben und gibt den Grauanteil wieder (0-100%). Die Helligkeit wird in % angegeben wobei 0 schwarz ist und 100 weiß.

 
 
 

 

 
 
 

 


div.hsl1 { background:hsl(210, 100%, 25%);height:20px; }
div.hsl2 { background:hsl(210, 100%, 50%);height:20px; }
div.hsl3 { background:hsl(210, 100%, 75%);height:20px; }

div.hsl4 { background:hsl(240, 100%, 50%);height:20px; }
div.hsl5 { background:hsl(240, 50%, 50%);height:20px; }
div.hsl6 { background:hsl(240, 25%, 50%);height:20px; }

 

CSS 3 HSLA

Beim HSLA kommt zusätzlich ein Wert "Alpha/Opacity" dazu welcher eine Deckkraft der Farben setzt. Dieser Wert geht von 0.0 = keine Deckung bis 1.0 = volle Deckung.

 
 
 
 
 

 


div.hsla1 { background:hsla(165, 35%, 50%, 0.2); height:20px }
div.hsla2 { background:hsla(165, 35%, 50%, 0.4); height:20px }
div.hsla3 { background:hsla(165, 35%, 50%, 0.6); height:20px }
div.hsla4 { background:hsla(165, 35%, 50%, 0.8); height:20px }
div.hsla5 { background:hsla(165, 35%, 50%, 1.0); height:20px }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer