Halbtransparenter Background
Das Wannabegirl bietet einen Workshop zum Thema: „Wie bastel ich mir einen Semi-transparenten Hintergrund?“ an. Der Trick dabei ist der Wechsel zwischen Farbe und Transparenz, was durch das .gif-Format möglich gemacht wird. Schön beschrieben, schön präsentiert. Hinsurfen!
Related Posts
Schärfen in Photoshop: Alle Techniken Schritt für Schritt vorgestellt... 26. August 2016 | Dirk Metzmacher
Bob Ross-Speedpaint 24. Januar 2008 | Dirk Metzmacher
-
Die Lösung ist für kleine Elemente wie Headlines, oder
Buttons mit großer Schrift und starkem Kontrast zum Hintergrund ganz akzeptabel.
Doch sobald der Kontrast nicht stark genug ist und die Schrift auf einem derartigem Hintergrund zu klein wird, leidet die Lesbarkeit deutlich.
Das sieht man in dem oben genannten Beipiel ganz deutlich. Der graue Text auf dem halbtransparenten Hintergund bricht an einigen Stellen bereits weg.Schade eigentlich! Die Idee ist nicht schlecht!
Gruß,
Sebastian -
Interessanter Trick…
Allerdings ist das mal wieder ein typisches Beispiel für einen der vielen Workarounds, mit denen Webentwickler sich immer noch herumschlagen müssen, weil gewisse Browserhersteller seit Jahren eingeführte Standards nicht oder nicht richtig bzw. vollständig implementieren.
Das PNG-Format ist schon seit etlichen Jahren ein W3C-Standard, und bietet echte Alphatransparenz – damit hätte man zu solch einem Trick mit abwechselnd farbigen und transparenten Pixeln gar nicht erst greifen müssen…
Aber leider kann man das bis heute nicht machen (zumindest, wenn man nicht will, das es bei über 90% aller Besucher nicht funktioniert) – Grund:
Der (leider !) immer noch mit weitem Abstand verbreiteste Browser, der Microsoft Internet Explorer, unterstützt keine Alphatransparenz in PNG-Dateien.Frustrierend, das der weltgrößte Softwarekonzern nicht in der Lage ist, seinen Browser technisch aktuell zu halten (von sog. Sicherheits-Updates einmal abgesehen hat ja seit Jahren keinerlei funktionale Weiterentwicklung des IE stattgefunden), und uns alle damit solch großartiger Möglichkeiten beraubt, wie Sie echte Alphstransparenz bieten würde.
-
Lustig, gerade gestern habe ich mich auf die Suche nach einer solchen Lösung gemacht (nachdem ich nach meinem mehr oder weniger vollzogenem Umstieg auf den Firefox solche Geschichten öfters gesehen hatte).
Eine ziemlich krasse Umsetzung ist z.B. auf http://blog.humlab.umu.se/ zu finden.
Aber auch hier handelt es sich nicht um eine saubere CSS-Lösung ohne PNGs, sondern einen Work-Around, der zumindest in Mozilla und Opera funktioniert. IE fixiert den Hitergrund nicht und zeigt manchmal sehr komische Verschiebeeffekte.
Im Endeffekt werden hier 2 Bilder übereinandergelegt, wobei das obere den scheinbaren Transparenzeffekt enthält. Da beide Bilder absolut positioniert sind, spielt Scrollen des beweglichen Elements keine Rolle.
Nette Spielerei…
-
Ich habe in der Vergangenheit mit der Methode leider die Erfahrung machen dürfen, das je nach Farbe, Schriftart und -größe, der Text ziemlich zerfranzt aussieht.
Comments