kulturbanause Blog

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

Farben


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

Farbkonzepte mit Adobe kuler oder auf Grundlage eines Fotos entwickeln

Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Es lohnt sich also hier etwas Zeit zu investieren um auch die richtigen Emotionen in der Zielgruppe zu erzeugen. In diesem Video zeige ich euch wie Ihr mit Hilfe von Adobe kuler ein Farbkonzept entwickeln könnt. Darüber hinaus erstellen wir ein zweites Farbkonzept auf Grundlage eines Fotos.

Beitrag zu Ende lesen

Style Tiles – Design-Konzepte für responsive Websites entwickeln

Wenn man gemeinsam mit einem neuen Kunden ein Webdesign-Projekt plant, möchte man einerseits ein ansprechendes und zuverlässiges visuelles Konzept ausarbeiten, andererseits aber wenig Zeit mit Entwürfen vergeuden, die dem Kunden nicht gefallen. An dieser Stelle setzen die sog. »Style Tiles« von Samantha Warren an und füllen die Lücke zwischen schnellen aber ungenauen, und detaillierten aber zeitintensiven Techniken. Style Tiles sind sozusagen ein Mockup für die Gestaltung.

Beitrag zu Ende lesen

Farben vom Hex-Wert in RGB/RGBA konvertieren

Wir haben in CSS die Möglichkeit Farbwerte auf unterschiedliche Weise anzugeben. Sehr populär ist hier sicher der Hexadezimal-Wert (z.B. #00FF00). Gerade bei modernen Web-Projekten macht es allerdings durchaus Sinn die Farben im RGBA-Farbmodus (Rot, Grün, Blau, Alpha) anzugeben, da so über CSS die Alpha-Transparenz berücksichtigt werden kann.
Der "HEX 2 RGBA Color Calculator" wandelt eure Farben in den RGBA-Modus um und erspart euch so lästige Arbeit. Die Transparenz lässt sich anschließend über einen Schieberegler intuitiv anpassen.

Beitrag zu Ende lesen

Photoshop-Farben als Hexadezimalwert/HTML kopieren

Wenn Ihr innerhalb von Photoshop eine Farbe mittels Pipette aufnehmen wollt, um Sie anschließend als Hexadezimalwert in Eurem CSS-Code einzubinden, war der Weg (bis Photoshop CS5) recht mühselig. Entweder Ihr habt bei eingeblendetem Info-Bedienfeld und zwei Monitoren (alternativ gutem Gedächtnis) den Code abgeschrieben oder aber Ihr habt einen Umweg über den Color Picker genommen, Euch dort den Hex-Code herauskopiert und anschließend im CSS-Code wieder eingefügt. Klar, mit ein wenig Übung sind beide Varianten eine Frage von zwei Sekunden … aber es geht auch in einer.

Beitrag zu Ende lesen