Be KreaTief

[QuickTip] Farben mit Transparenz ✤

Farben mit Transparenz
Heute geht es um den Farbcode!

Es gibt ja mehrere Möglichkeiten im CSS Farben anzugeben, da hätten wir zum einen den Farbnamen, den Hexadezimalen-Code und den rgb-Wert.
Um also den Rechnern in aller Welt zu sagen, dass man bspweise rot haben möchte, gibt es folgende Möglichkeiten:
Rouge
Rosso
Rot
Optisch nicht zu unterscheiden, codemässig allerdings schon:
<span style="color: red;">Rouge</span>
<span style="color: FF0000;">Rosso</span>
<span style="color: rgb(255,0,0);">Rot</span>

Bei einfachen, klaren Farben ist es definitv am schnellsten einfach den Farbnamen einzugeben oder einfach schnell den Hexa-Code zu suchen. Ich selbst hab nie rgb benutzt.
Als ich allerdings auf der Suche nach einer Möglichkeit war mit halbtransparenzen zu arbeiten, da kam mir rgba in den Sinn, welches ich in meinem CSS-Buch stehen hatte.

rgb ≠ rgba

Die beiden Werte haben einen kleinen Unterschied. Zum einen ist rgba neuer. Es wird erst in CSS3 benutzt und ist somit mit den alten IEs nicht verwendbar, aber da ist sowieso alles scheisse, also bitte Internet Explorer-Nutzer, tut euch das nicht an und besorgt euch einen richtigen Browser oder IE8+

Der kleine Unterschied macht das a, welches für Alpha steht. Hier kommt die Transparenz ins Spiel.

Eine rgba-Farbe setzt sich folgendermassen zusammen.

rgba([Rotwert 0-255],[Grünwert 0-255],[Blauwert 0-255],[Transparenzwert 0-1] )

Hier also im folgenden ein kleines Beispiel mit drei inneinanderliegenden div-Containern.


Und etwas blablatext der unter den beiden Farben drunterliegt...

zuoberst liegt das gelbe Quadrat mit 50% Transparenz, darunter das rote mit gleichem Alpha und dann der dummi-Text.

Solche Halbtransparenzen kann man toll benutzen, wenn man beispielsweise den Inline-Text verwendet und einen halbtransparenten Balken drüberlegen möchte.
Oder aber man könnte auch ein Gradient machen, welches von Farbe zu Transparenz verläuft, wie hier:

GradientBalken

Transparenzen sind tollig!
Probiert es einfach mal aus =)
Quadrate-Code

Gradient-Code

Oh und falls ihr zu faul seid den Code selbst zu machen, gibt es hier einen Generator mit dem ihr die rgbas machen könnt, dort findet ihr auch den Gradient-Generator verlinkt.
CSS3 Generator
edit