Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Transparenzeffekte mit PNG-24 und CSS

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Transparenzeffekte mit PNG-24 und CSS

Unser heutiges Türchen kombiniert die aktuellen Adventskalender-Beiträge PNG-24-Bildformat (Nicolai Schwarz), Hover-Beispiel für eindeutigen Fokus (Tomas Caspers) und Hintergrundbilder ohne Nachladen (Stefan David).

Bildtransparenzen bieten im Webdesign viele Einsatzmöglichkeiten. Monochrome PNG-Deko-Bilder "verschmelzen" beispielsweise über definierter background-color optisch mit den Hintergrundfarben von Webseiten: Ideal für verschiedene Website-Templates und in der Konzeptionierungsphase.
Wird dem Bild ein Link zugewiesen, ergeben sich interessante Hover-Effekte. Hier ein grundsätzliches Beispiel mit einer PNG-Datei und Änderung der Hintergrundfarbe.

Leider ist die Datenmenge bei PNG mit Alphakanal größer als bei JPEG- oder GIF-Bildern. Weder der IE5, noch der IE6 konnten PNG-24-Alphakanäle anzeigen, mittlerweile gibt es aber geeignete Javascript-Lösungen. Auch die dunklen PNG-Farben lassen sich vermeiden.

Ein Weihnachtsmotiv: Vorbereitung in Photoshop

Bild 1: Die Vorlage

Bild 1 zeigt die Vorlage für die spätere PNG-Datei (Bild 2). Zunächst wählen wir gezielt die gewünschten Bildbereiche aus. Eine bequeme Auswahlmöglichkeit mit Transparenzen bekommt man unter "Auswahl – Farbbereich auswählen…". Mit der Pipette klickt man auf den dunkelsten Bereich und definiert die Toleranz mit "200".

Farbbereich 1

Mit "Befehlstaste-C" und anschließendem "Befehlstaste-V" erhalten wir ein neue Ebene mit dunklen Farbbereichen. Wir wählen zusätzlich eine helle Flächen aus, verkleinern die Toleranz auf "80" und generieren eine neue Ebene mit hellen Farbbereichen.

Farbbereich 2

Zuletzt folgt die Lichthöhe, mit einem Auswahlrechteck eingegrenzt und einer Toleranz von "200". Die Ebenen auf transparentem Hintergrund werden nun über "Für Web speichern…" als einzelne PNG-24-Datei (Transparenz) im Web-Ordner abgelegt.

Transparenzeffekte mit CSS

Effekte werden per CSS als MouseOver-Aktion mit der Pseudoklasse :hover definiert. Dass und wie man in der Praxis solche Effekte auch für Tastaturbenutzer mittels :focus und :active zugänglich macht, zeigt der Beitrag von Tomas Caspers.

Beispiele

Drei Beispiele für Transparenzeffekte findet Ihr in unserem Testcase. Dort liegen auch die verwendeten Bilddateien zum Download bereit.

Transparenzeffekt: background-color

Beispiel 1 zeigt den Effekt über eine Änderung der Hintergrundfarbe beim Hovern. Die halbtransparenten roten Bereiche der Christbaumkugel erscheinen vor dem gelben Hintergrund orangefarben.

Transparenzeffekt: background-image

Beispiel 2 verwendet ein Hintergrundbild in der gleichen Größe wie die PNG-Datei. Per background-position: 0 -200px; zunächst versteckt, erscheint das Hintergrundbild beim Hovern mit background-position: 0 0; hinter der PNG-Datei. Der unruhige, türkisfarbene "Fleck" wirkt durch die PNG-Transparenz hindurch.

Transparenzeffekt: background-position und background-repeat

In Beispiel 3 wird der obere Teil der Hintergrundgrafik (background-repeat: repeat-x) versteckt und erst beim Hovern mit background-position: 0 -120px; am unteren Bildende gezeigt. Zusätzlich wurde dem PNG eine Klasse mit 2-Pixel-Rand zugewiesen, der in modernen Browsern beim Hovern eine andere border-color zeigt.

Kommentare

Andreas Diner
am 24.12.2007 - 10:30

Ich finde es zwar ein ganz interessantes Experiment, allerdings scheint es für mich doch deutlich simpler, einfach ein JPG mit beiden Bildversionen übereinander oder nebeneinander zu erstellen und die Grafik beim MouseOver, mit CSS, in einer Box zu verschieben. Angesichts der Tatsache dass ein PNG-24 doch ein bisschen größer als ein JPG ist, dürfte es auch Speicherplatztechnisch auf das Selbe hinaus laufen und man hat die einfache Kompatibilität mit allen Browsern.
Ich wünsche allen Webkrauts und allen Lesern ein frohes Weihnachtsfest und freue mich schon auf viele interessante Diskusionen im neuem Jahr.

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 24.12.2007 - 12:33

@Andreas,

Du hast bezüglich der Dateigrößen von PNGs natürlich recht.
Man könnte hier jedoch noch unendlich viele Beispiele bringen, bei der nur die CSS-Datei und eventuelle Hintergrundgrafiken verändert werden, ohne das eingebundene Bild und damit die (X)HTML-Datei zu bearbeiten.

Wenn sich solche Effekte z. B. für viele Bilder am Farbsystem einer Website orientieren sollen, hat man im Falle einer Farbänderung während der Umsetzungsphase schnell eine Menge in Photoshop zu tun. Das gilt vor allem für Deko-Bilder, die sich optisch mit der Hintergrundfarbe verbinden sollen. In der finalen Umsetzung einer Website kann man tatsächlich das GIF- oder JPEG-Format verwenden.

Und dank deines Kommentars konnte ich jetzt hier nochmal all das schreiben, was mir die Beschränkung des Artikels auf 400 Wörter unmöglich machte ;-)

Allen noch ein schönes Weihnachtsfest!

Permanenter Link

Andreas Diner
am 24.12.2007 - 13:30

@Nils,
Da muss ich Dir natürlich wiederum recht geben. Zum testen von verschieden Farbsysteme oder wenn die einzelne Unterseiten einer Website verschiedene Farbwelten haben sollen und man z.B. ein Logo auf allen einsetzen will ist die Methode wirklich ideal.

Permanenter Link

Gast
am 01.01.2008 - 12:14

Klasse Artikel. Werde das gleich mal ausprobieren. Interessanter Ansatz.

Permanenter Link

Car Hifi Fan
am 04.01.2008 - 14:24

Ich finde den Artikel auch recht gut, vorallem hab ich schon einige sehr interessante Sachen gesehen die mit CSS realisierbar sind! Wieder was gelernt ;)

Permanenter Link

Car Hifi Fan
am 07.01.2008 - 09:05

so, habe das ganze nun am Wochenende mal ausprobiert. War dann doch nicht ganz so leicht wie ich mir das vorgestellt habe und hat auch ne ganze weile gedauert, aber geklappt hats mit dem super Tutorial ;)

Permanenter Link

proxiss
am 08.01.2008 - 11:16

Ein schöner Artikel; Der uns aber leider mal wieder daran erinnert, dass all die modernen und hübschen Effekte auf IE6 nicht funktionieren.
Ich bin sicher nicht der Einzige, der sich seit Jahren über die Extraaufwände für IE6 ärgert.
Hört das denn nie auf?

Permanenter Link

Matthias Willerich
am 18.01.2008 - 11:30

@proxiss: Nein, das wird für IE6 nie aufhören. Wir werden elendig daran zugrunde gehen. Ha, oder sich einfach damit anfreunden.
Ich habe erst letzten Monat auf einer meiner größeren Projekte die IE6 user unter die IE7 user fallen sehen, und da sind noch viele andere Projekte, bei denen das noch passieren muß.
Ich habe seit einer Weile einfach beschlossen, IE6 mit etwas JS zu helfen, wenn's nötig ist. So haben meine Projekte manchmal ein IE.css, und eigentlich immer ein IE6.css, zusammen mit einem IE6.js (alles mit conditional comments verpackt), das mir Unterstützung bei png transparenz und pseudoklassen wie :hover bietet. So komme ich im Regelfall mit etwa 50 Zeilen Sonderbehandlung für IE6 pro Projekt aus, und es ist ja eh immer wieder dasselbe.

Permanenter Link

Alexander Mannewitz
am 28.01.2008 - 13:05

Das Stiefkind PNG-24 ist häufig auf den hinteren Plätzen die Lieblingsformate für Bilder zu finden. Bei der Verwendung für Webseiten oft wenig freundlich akzeptierend, und der Internet Explorer kann sich mit dem PNG eher schwierig anfreunden. Einen bitteren Beigeschmack hinterlässt auch die Dateigrösse und PNG-8 ist nicht wirklich eine Alternative.
Die Nutzung von PNG-24 erfreut sich trotz allem hoher Beliebtheit als transparentes Grafikelement in Flash-Animationen, dann stört auch eine komfortable Datenmenge nicht mehr - da sich bei der Entscheidung für eine Flash-Animation eine gewisse Toleranzbereitschaft in Bezug auf die Dateigrösse nicht verleugnen lässt.

Beitrag ist zwar etwas älter, aber trotzdem einen Kommentar wert. Danke für den Selbigen.

Permanenter Link

Mpromedia Webdesign
am 29.01.2008 - 13:37

Habe mich zufällig die Tage damit beschäftigen wollen! Der Artikel ist sehr verständlich geschrieben,Danke! Wieder was dazu gelernt.

Permanenter Link

anna
am 07.02.2008 - 09:36

Wirklich gut.. Bin mal gespannt ob ich das auch so hinbekomme.

Beispiel 1 finde ich wirklich Klasse:

http://www.pookerart.de/adventskalender_png24/

Werblicher Link entfernt

Permanenter Link

Matthias
am 07.02.2008 - 18:58

Die Möglichkeiten via CSS größere Bereiche der Website zu steuern war schon ein bedeutender Schritt im Webdesign. Grafiken flexibel in der Seitestruktur einzubinden eröffnert neue Möglichkeiten, auch wenn das vorliegende Experiment dies nicht 100%ig erkennbar macht.

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 07.02.2008 - 19:28

@Matthias
Grafiken flexibel in der Seitenstruktur einzubinden – das war auch nicht das Thema des Artikels.

Permanenter Link

Michael
am 10.02.2008 - 20:39

na endlich, danke für den artikel...hat mir gerade eine Menge Zeit erspart. Merci

Permanenter Link

Vitali, Köln
am 12.02.2008 - 20:24

Hallo! Ich spüre grade dass ich etwas sehr-sehr wichtiges gelesen habe, daher die Fragen, wenn auch blöde, sorry..
1. Das Problem - das ist schon lange her als ich zum ersten Mal bemerkt habe dass transparente Bilder mit IE nicht funktionieren. Es entsteht so ein hellblauer Hintergrund. Das Problem konnte ich teilweise lösen indem ich keine transparenten Bilder, sondern Bilder mit derselben Hintergrundfarbe wie die Farbe der jeweiligen Website erstellt habe. (Was natürlich keinem gefallen kann und nicht immer die Situation rettet)
2. Das erste "grundsätzliche Beispiel" funktioniert auch bei IE6!!! Ich verstehe nun nicht ganz, bedeutet das dass wenn man ein kleines Javascript einsetzt, das Problem dann gelöst ist und transparente .png-Bilder immer richtig angezeigt werden?

3. Wenn ja, was hat das bitte mit CSS zu tun? Ich möchte keine Effekte, ich möchte nur das ein transparentes Bild transparent bleibt.

Vielen Dank im Voraus für die Antworten :)

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 12.02.2008 - 22:05

Hallo Vitali,
Zu deiner ersten Frage – Punkt 1 hat ja keine Frage ;-)
Das Problem sind die Alphakanäle der PNG-24-Dateien, die der IE 5-6 ohne zusätzliche Extrawurst nicht anzeigen kann. Die Javascript-Lösung ist sozusagen ein Hack – analog zu den CSS-Patches für diesen lieblichen Browser.

Damit zu Punkt 2: Auch wenn Du keine Effekte haben willst, du bist in deinem Wunsch, PNG-24-Dateien mit allen Transparenzen browserübergreifend korrekt anzeigen zu lassen auf separate Lösungen angewiesen.

Zu PNG-24-Dateien findest du es hier im Webkrauts-Kalender 2007 einen ausführlichen Beitrag von Nicolai Schwarz mit weiteren Hinweisen.

Permanenter Link

Vitali, Köln
am 14.02.2008 - 00:19

Hallo!
Erstens vielen Dank für die schnelle Antwort. Bin ich wirklich der einzige bei dem es nicht klappt?:( Ich hab mich heute den ganzen Abend damit beschäftigt, ganz viel gelesen und dazu gelernt was eigentlich gut ist, aber das Problem (noch) nicht löst:)

Ich hab also ein transparentes Bild erfolgreich erzeugt, eine html- und css-Datei, sowie auch die "geeignete Javascript-Lösung" heruntergeladen. Bei Firefox / Opera klappt das natürlich. Bei IE6 nicht!!! (Version 6.0.2900.2180 wenn das von Bedeutung sein könnte)

Die Dateien sind hier:
http://voing.dyndns.org/test1.html
http://voing.dyndns.org/style.css
http://voing.dyndns.org/pngfix.js
http://voing.dyndns.org/bild.png

Noch eine Datei, wie es bei mir in IE aussieht, vielleicht ist es bei euch nicht so... Wie gesagt, mit FF klappt das, sieht so cooool aus!:)

http://voing.dyndns.org/ie.jpg
Bitte um eure Hilfe!!! Was mache ich falsch? Danke!

Permanenter Link

Eric Eggert
am 14.02.2008 - 00:44

Hallo Vitali,

das JS funktioniert nur für Vordergrundbilder, nicht für CSS-Hintergrundbilder. Für Hintergrundbilder benutzt du am Besten in einer IE6.css folgende Anweisung:

element {
   background-image:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='pfad/zum/bild.png');
}

Der Pfad zum Bild ist dabei von der HTML-Datei aus zu sehen, nicht wie bei richtigem CSS von der CSS-Datei aus. (sizingMethod=crop ist manchmal auch sinnvoll.) Ich hoffe das hilft.

Permanenter Link

Vitali, Köln
am 18.02.2008 - 20:03

Hallo! Yup, das funktioniert, ich hab das Bild als Vordergrundbild eingefügt, und das klappt! Vielen Dank an alle! PS. Hab webkrauts in die täglich besuchten Lesezeichen hinzugefügt :)

Permanenter Link

Daniel
am 19.02.2008 - 22:59

Das ist ja schon ganz gut, aber wie kann ich denn das ganze lösen, wenn ich im CSS keinen Pfad angeben kann, da die Bilder dynamisch in den Container geladen werden sollen?

Permanenter Link

Jan
am 21.06.2008 - 01:26

Hallo,

vielen Dank für die gute Beschreibung. Das Verstecken eins Teils der Bilder macht ladezeitentechnisch wirklich Sinn.

Permanenter Link

Niko
am 09.10.2008 - 13:09

Hallo,

wie kann ich diesen AlphaImageLoader denn für ein einzelnes -tag einsetzten? Geht das?

Viele Grüße
Niko

Permanenter Link

Niko
am 09.10.2008 - 13:45

Sorry für den Doppelpost! Habs gefunden:

Danke :)

Permanenter Link

Die Kommentare sind geschlossen.