Ein kurzer Blick in ein paar CSS-Code-Schnipsel!

Mein erster Artikel über CSS-Farbcodes “Die verwirrend bunte Welt der CSS-Farbcodes” hat sich zu einem der am häufigsten aufgerufenen Seiten auf eMaster.de entwickelt.

Ich bedanke mich daher bei allen Lesern und möchte heute noch etwas näher auf die CSS-Farben eingehen…

Was bedeuten die #000000 Zeichen?

Jeweils zwei Stellen in diesem hexadezimalen Zahlencode beschreiben einen Wert der im Web gebräuchlichen RGB-Farbpalette.

Die ersten beiden Ziffern sind also der Wert für R (rot), die Ziffern 3 und 4 beschreiben den grünen Anteil (G) und die letzten beiden Ziffern den blauen (B).

Zwar lassen sich in CSS die RGB-Werte auch direkt eingeben, dieses hat sich aber nicht als Standard durchgesetzt.

Aus diesen 3 Grundfarben werden sämtliche andere Farbtöne “gemischt”. Wie stark der Anteil einer Farbe jeweils ist, lässt sich mit dem sechsstelligen Hexadezimalcode besonders kurz und einprägsam darstellen.

Übrigens: Haben Sie sich als Kind nicht auch ganz dicht vor den Röhrenfernseher gesetzt und dort lauter winzige rote, grüne und blaue Punkte erkennen können? Sehen Sie: RGB.
Wie komme ich an den Farbcode?

Die meist benutzen Farbcodes sollten Sie sich einfach merken: #000000 ist Schwarz, #FFFFFF Weiß, #CC0000 Rot und so weiter…

Eine Hilfestellung finden Sie in meinem Artikel “Die verwirrend bunte Welt der CSS-Farbcodes“.

Sofern Sie einen Grafik-Editor wie etwas “Photoshop” oder “The Gimp” benutzen, finden Sie in deren Farbwählern alle nötigen Angaben.

So sieht das in Photoshop aus (grüner Rahmen):

Es lassen sich natürlich nicht nur so genannte Web-sichere Farben darstellen! Sie können jeden erdenklichen Farbton in Photoshop als Hex-Code anzeigen lassen…

…oder Sie verwenden einen der unzähligen Online-Generatoren.

Sehen Sie sich mal das Color Wheel von Jemima Pereira auf ficml.org oder den Farbgenerator auf wellstyled.com an, der Ihnen sogar noch die passenden Pasteltöne anzeigt.
CSS-Farbcodes: Wie abkürzen?

Unter gewissen Umständen lassen sich CSS-Farbcodes abkürzen – sie werden dann dreistellig.

Und zwar immer dann, wenn sich die beiden Ziffern jeder (!) der drei Farbgruppen gleichen.

Beispiel: Dieser Farbcode #FFFFFF (weiß) lässt sich so abkürzen: #FFF

Das schon oben verwendete Rot #CC0000 sieht abgekürzt so aus: #C00

Und dieser blasse Flieder #993366 wird zu #936

Hingegen lässt sich ein komplexer Code wie #936CDC nicht abkürzen.

Auch werden Kombinationen nicht verstanden. So kann etwa #996CDC nicht zu #96CDC werden. Der Browser stellt solche falschen Codes als Schwarz dar.

Übrigens: Die Groß- und Kleinschreibung ist egal.
Ein paar typische Anwendungen für CSS-Farben!

Für alle möglichen Elemente lassen sich Hintergrundfarben festlegen:

{ background: #CCC; }

Für die Farben von Schrift reicht die Kurzform “color” statt “font-color”:

{ color: #000; }

Toll ist auch die Kombination eines Hintergrundbildes mit einer Farbe. Etwa wenn sich das Hintergrundbild nicht über den ganzen Monitor erstrecken soll. Diesen Effekt sieht man häufig auf Webseiten, die beispielsweise am oberen Bildschirmrand einen Farbverlauf haben (Hintergrundbild), dessen Endfarbe sich dann über den Rest der Seite erstreckt (Farbcode).

Ein Hintergrundbild holt man sich – so wie jede andere Grafik auch – per “url”:

{ background: #C00 url(images/verlauf.gif) repeat-x; }

Der Code “repeat-x” sorgt in diesem Fall dafür, dass das Hintergrundbild nur in horizontaler Linie wiederholt wird.

Sehr beliebt sind auch Umrahmungen oder einzelne Linien.

Hier wird eine H1-Überschrift mit einer 1 Pixel starken, schwarzen Punktlinie unterstrichen:

h1 { border-bottom: 1px dotted #000; }

Und hier erhält ein Bild eine 10 Pixel starke, grüne Rahmung:

img { border: 10px solid #009900; }

Richtig, hier hätte ich auch #090 abkürzen können, wollte ich aber nicht ;)

[ad#largereccontent]
Farbnamen als Klartext!

Das World Wide Web Consortium (W3C) hat 16 Farbtöne definiert, die auch als Klartext eingegeben werden können:

1. aqua
2. black
3. blue
4. fuchsia
5. gray
6. green
7. lime
8. maroon
9. navy
10. olive
11. purple
12. red
13. silver
14. teal
15. white
16. yellow

Ein entsprechender Code sähe dann so aus:

{ color: purple; }

Heutige Browser verstehen sogar noch weit mehr dieser Klartextbezeichnungen für CSS-Farben.

Wie sinnvoll und hilfreich das für Sie ist, bleibt Ihnen überlassen. Mir sind die Klartext-Farben einfach nicht flexibel genug…

…und außerdem, können Sie sich was unter “PowderBlue”, “PaleTurquoise”, “PapayaWhip” und “LightGoldenRodYellow” vorstellen?

Dann doch lieber #908f5f…

Kategorie: Tutorien
Tags: CSS, Farbcodes
Veröffentlicht am 30.06.2008 von admin | Was sagen Sie dazu?