[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


<!-- Mit IDs und CSS -->

<div id="gelb">
<div id="rot">
<div id="text">
Und etwas blablatext der unter den beiden Farben drunterliegt...
</div>
</div>
</div>

<style>

/* Proper HTML
-----------------*/

#gelb{
background-color: rgba(255,255,0,0.5); // gelb, 50% transparent
height: 200px;
width: 200px;
}

#rot{
background-color: rgba(255,0,0,0.5); // rot, 50% transparent
height: 100px;
width: 100px;
position: relative; // bestimmt die Position in Abhängigkeit zu anderen Containern
top:-20px;
left:-20px;
}

#text{
width:200px;
height:200px;
}

</style>


<!-- Kurzversion mit integrierter CSS -->
<div style="background-color: rgba(255,255,0,0.5);height: 200px;width: 200px;"><div style="background-color: rgba(255,0,0,0.5); height: 100px; width: 100px; position: relative; top:-20px; left:-20px;"><div style="width:200px; height:200px;">Und etwas blablatext der unter den beiden Farben drunterliegt...</div></div></div>


Gradient-Code

<!-- Mit ID und CSS -->

<div id="gradient">
GradientBalken
</div>

<style>

/* Proper HTML
-----------------*/
#gradient{
width:370px;
height; 50px;
background: -webkit-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);
-o-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);
-ms-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);
linear-gradient(to right, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);
-moz-linear-gradient(left, rgba(30,87,153,0.8) 0%, rgba(125,185,232,0.39) 51%, rgba(183,36,88,0) 100%);
}

</style>


<!-- Kurzversion mit integrierter CSS -->

<div style="width:370px; height; 50px;background: -moz-linear-gradient(left, rgba(30,87,153,0.8) 0%, rgba(125,185,232,0.39) 51%, rgba(183,36,88,0) 100%);-webkit-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);-o-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);-ms-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);linear-gradient(to right, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.39) 51%,rgba(183,36,88,0) 100%);">GradientBalken</div>


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