Coding | CSS

LESS: Schriftfarbe dem Helligkeitsgrad der Hintergrundfarbe anpassen

font 705667 1920

Die Wahl der Farben für ein Theme lässt sich zum Beispiel mit PHP und LESS in den Themeoptionen vereinbaren. Wenn aber ein Bereich einen hellen Hintergrund bekommt, ein anderer einen dunklen, passt eine allgemeine Schriftfarbe nicht mehr überall (zudem gibt es vielleicht auch noch Buttons). Für jeden Bereich auch noch die Schriftfarbe extra zu bestimmen würde die Anzahl optionaler Farbwerte erhöhen. Einen Ausweg bietet es, die Schriftfarbe anhand des Helligkeitesgrades der Hintergrundfarbe ausrechnen zu lassen (nebenbei können mit LESS auch komplexere Farbberechnungen durchgeführt werden, das ist nur ein sehr einfaches Beispiel).

.fontcolor(@a) when (lightness(@a) >= 50%) { color:#333333; } .fontcolor(@a) when (lightness(@a) < 50%) { color:#efefef; }

Anwendung

#page > footer { background-color:@footer; .fontcolor(@footer); } .button { background-color:@button; .fontcolor(@button); }

Und dann gibt es da noch die Downloadbuttons mit dynamisch anzuzeigenden Infos die nur bei Hover sichtbar sind. Die Farbe dieser Elemente soll von der Buttonfarbe abgeleitet werden (heller oder dunkler, je nachdem wie hell oder dunkel die Buttonfarbe ist). Im Anschluss wird die Schriftfarbe der Buttoninfoelemente berechnet.

.downloadinfo(@a) when (lightness(@a) >= 50%) { @dibg:darken(@a, 35%); background-color: @dibg; .fontcolor(@dibg); } .downloadinfo(@a) when (lightness(@a) < 50%) { @dibg:lighten(@a, 35%); background-color: @dibg; .fontcolor(@dibg); } .downloadbutton p { .downloadinfo(@buttoncolor); }

Wie man den Downloadbutton macht, ist im Workshop “Downloadbutton” ausführlich beschrieben (z-index:-1 für die Absätze weglassen, da man auf Elementen mit Hintergrundfarben ansonsten keinen Hover-Effekt zu sehen bekommt).

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.