kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Farben


Farb-Systeme mit CSS-Variablen gestalten

Benutzeroberflächen in verschiedenen farbigen Varianten müssen in vielen Projekten umgesetzt werden. Mal soll ein Farbleitsystem zur Unterstützung der Navigation integriert werden, dann wieder muss das Projekt den Dark Mode unterstützen oder für Kunden individuell anpassbar sein – Stichwort »Theming«. Mit Hilfe von CSS-Variablen lässt sich ein solches Farb-System mit geringem Aufwand in eine Website integrieren.

Beitrag zu Ende lesen

Gutenberg-Farbpalette von WordPress anpassen oder deaktivieren

Der Block Editor von WordPress (Gutenberg) stellt eine Farbpalette zur Verfügung, mit der beispielsweise die Textfarbe in einem Block und dessen Hintergrundfarbe verändert werden können. Standardmäßig umfasst die Palette zwölf vordefinierten Farben sowie die Option, eigene Farben mit einem Color-Picker auszuwählen. In vielen Fällen ist es aber sinnvoll statt des Standards eine angepasste Farbauswahl im Theme anzubieten. Wir zeigen euch, wie ihr die Farbeinstellungen deaktivieren oder eine Farbpalette mit eigenen Farben registrieren könnt.

Beitrag zu Ende lesen

CSS color()-Function  – »Wide-Gamut« und Sonderfarben für Websites

Der vorherrschende Farbraum im Internet ist der sRGB-Farbraum. Monitore mit großem Farbumfang sind allerdings in der Lage mehr Farben darzustellen als mit sRGB abgebildet werden können. Mit neuen CSS-Techniken kann der erweiterte Farbraum dieser Monitore bedient werden, wodurch wir leuchtende Farben darstellen können, die früher auf Website nicht verwendet werden konnten. Der Effekt ist vergleichbar mit dem von Sonderfarben wie Pantone oder HKS im Druck. Die Farben im erweiterten Farbraum wirken kräftiger und »satter« und haben das Potenzial in Erinnerung zu bleiben.

Beitrag zu Ende lesen

Das currentColor-Keyword von CSS

CSS-Code enthält naturgemäß viele Wiederholungen, was von Entwicklern regelmäßig kritisiert wird. Mit Hilfe von CSS-Präprozessoren wie Sass kann der Code DRYer (weniger repetitiv) gestaltet werden, doch auch CSS selbst stellt Funktionen bereit die Ähnlichkeit mit Variablen haben. Eine davon ist der currentColor-Wert.

Beitrag zu Ende lesen

Farben mit Sass verändern

Eine Website basiert normalerweise auf einem durchdachten Farbschema und einigen Farbabstufungen innerhalb der jeweiligen Farbe. Sass bietet umfangreiche Möglichkeiten, Farben zu manipulieren. Wenn der Sass-Code entsprechend vorbereitet wurde, ist es sogar möglich ein Design mit nur einer Variable komplett umzufärben – inkl. Helligkeitsabstufungen, Komplementärfarben etc.

Beitrag zu Ende lesen

Farbe und Deckkraft im Web Design

In CSS gibt es verschiedene Möglichkeiten um die Farbe und die Deckkraft von Elementen zu bestimmen. In diesem Artikel beschreiben wir wie die unterschiedlichen Farbmodelle eingesetzt werden können und gehen auf die jeweiligen Vor- und Nachteile ein.

Beitrag zu Ende lesen