opacity

[Verena]

Moin

eine kleine Frage, ich habe folgendes CSS

  
#wrapper {  
    margin: 0 auto;  
    min-height: 100%;  
	max-width: 980px;  
	background-color:#333333;  
	opacity:0.5;  
}  

wenn ich das opacity einfüge, dann wird auch alle andere was im Wrapper liegt auch aufgehellt, aber das möchte ich nicht, nur der DB soll verändert werden.

Wie schaffe ich das?

[molily]

Hallo!

wenn ich das opacity einfüge, dann wird auch alle andere was im Wrapper liegt auch aufgehellt, aber das möchte ich nicht, nur der DB soll verändert werden.

Was meinst du mit DB? Meinst du vielleicht BG, also Hintergrund?

Dann hilft vielleicht eine rgba()-Farbangabe weiter.

background-color: rgba(51, 51, 51, 0.5);

Damit bekommt nur der Hintergrund einen Alpha-Wert (Halbtransparenz).

http://www.peterkroener.de/schoenes-neues-css-rgba-und-hsla/

Grüße, Mathias

[Verena]

Hallo,

Was meinst du mit DB? Meinst du vielleicht BG, also Hintergrund?

genau, sorry hatte mich verschrieben.

Dann hilft vielleicht eine rgba()-Farbangabe weiter.
background-color: rgba(51, 51, 51, 0.5);

Danke dir, genau das habe ich gesucht.

Gruß
Verena

[Gunnar Bittersmann]

@@molily:

nuqneH

Dann hilft vielleicht eine rgba()-Farbangabe weiter.

background-color: rgba(51, 51, 51, 0.5);

RGBst du noch oder HSLst du schon? hsla(0, 0%, 20%, 0.5) sollte die bessere Angabe sein.

Qapla'

[molily]

RGBst du noch oder HSLst du schon?

Ich finde rgba(#123ABC, 0.5) von Sass am schönsten, weil Hexadezimal-Farbcodes am verbreitesten sind (in Style-Guides, in Bildbearbeitungsprogrammen…). Wobei es dann auf rgba($einFarbVariable, 0.5) hinausläuft.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Ich finde rgba(#123ABC, 0.5) von Sass am schönsten,

Bis Browser #rrggbbaa gemäß CSS Color Level 4 unterstützen.

weil Hexadezimal-Farbcodes am verbreitesten sind (in Style-Guides, in Bildbearbeitungsprogrammen…).

Wenn man den Farbwert von anderswo als RGB erhält, macht es nicht unbedingt Sinn, den in HSL umzurechnen.

Wenn man den Farbwert selbst erstellt (was bei einem Grauwert der Fall sein dürfte), dann ist das HSL-Modell sinnvoller (intuitiver, single point of change).

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wenn man den Farbwert von anderswo als RGB erhält, macht es nicht unbedingt Sinn, den in HSL umzurechnen.

Obwohl – vielleicht doch.

Szenario: Grafikdesigner und Frontendentwickler sitzen nebeneinander und entwickeln gemeinsam im Browser. Das sollte nichts Außergewöhnliches sein, sonderm Normalität.

Der Designer möchte einen Ockerton und hat aus Photoshop #DFCF9F ermittelt, was der Entwickler
A) so ins Stylesheet schreibt
B) mal eben in hsl(45, 50%, 75%) umrechnet.

Beide kucken sich das im Browser an. Der Designer meint: Geht’s ein bisschen blasser?
A) Der Entwickler versucht durch Änderung der R-, G- und B-Werte im Hexcode den Farbton etwas blasser zu machen, es gelingt ihm nicht, dabei den Farbton und die Helligkeit zu halten. Nach 3 Minuten verlässt der Designer entnervt den Raum.
B) Der Entwickler verringert im Devtool des Browsers den S-Wert, bis der Designer Stop sagt.

Der Designer meint: Geht’s ein bisschen heller?
A) Der Entwickler versucht durch Änderung der R-, G- und B-Werte im Hexcode den Farbton etwas heller zu machen, es gelingt ihm nicht, dabei den Farbton und die Sättigung zu halten. Nach 3 Minuten verlässt der Designer entnervt den Raum.
B) Der Entwickler erhöht im Devtool des Browsers den L-Wert, bis der Designer Stop sagt.

Qapla'

PS: Wohl dem, der mit Firebug entwickelt. Da kann man in den Einstellungen des Tabs CSS zwischen Hex, RGB und HSL hin- und herschalten und sich die Umrechnerei doch sparen.

[molily]

Wohl dem, der mit Firebug entwickelt. Da kann man in den Einstellungen des Tabs CSS zwischen Hex, RGB und HSL hin- und herschalten und sich die Umrechnerei doch sparen.

Geht übrigens auch mit Chrome Web Inspector und im Safari Web Inspector (letzteres ziemlich versteckt im Overlay beim Klick auf die Farbfläche neben den Farbwert).

Mathias