Ein leidiges Thema...

Viele moderne Design lassen sich nur per PNG Dateien schön umsetzen. Machmal komm man eben kaum drum herum. An sich ja kein Problem, jeder anständige Browser kann das ohne das man ein Wort darüber verlieren müsste.

Gebe es nicht den IE.

Der MS IE ist leider nicht in der Lage von sich aus PNG's mit korrekter Transparenz anzuzeigen. Für gewöhnlich zeigt er einfach nur einen hellen Hintergrund an.

Browser

  • MS IE 5.5
  • MS IE 6

 

Der IE 7 hat nun endlich eine native Unterstützung für PNG's.

Wie geht das denn?

Mit Hilfe von sog. CSS Hacks, die nur vom MS Internet Explorer umgesetzt werden.

Mit diesen Hacks steuern wir, die nur im Internet Explorer verfügbaren, Filtereigenschaften ein. Einmal direkt, einmal per Script. Dieser Filter arbeitet im Fall der direkt eingebundenen Bildern mit einem kleinen Behavior und einer transparenten gif Grafik (die auch der IE transparent darstellen kann) die zum rendern der eigentlichen png Grafik genutzt wird. Alle bnötigten Dateien sind in der zip Datei enthalten.

Ich bevorzuge die reine CSS Variante, die aber nur mit Hintergrundbildern funktioniert. Dafür benötigt sie keine weiteren Dateien (reines CSS), die oft Probleme mit den Pfaden bereiten.

 

PNG Transparenz im IE

3D-Kurzfilme

06. Juni 2008, Felix Nagel -
Screen von Wut und Changing the Body
Screen von Wut und Changing the Body

Da die Projekte jetzt auch online verfügbar sind, möchte ich sie euch nicht vorenthalten. Sie wurden im Rahmen von Graphische Datenverarbeitung Labor 2 erarbeitet im letzten Semester erarbeitet worden. Eigentlich wollte ich den Kursdieses Semester auch machen aber aufgrund von Zeitmange mussten Adrian und ich das ganze erstmal verschieben. Kommt noch... 

 

 

 

WUT

ansehen | Matthias Rosenthal / Sebastian Schäfer

 

Changing the Body

ansehen | High Definiton Download - Marc Bauer / Alexander Scheele

 

Alle Filme des Projekts

ansehen | Fh-Seite

Jeder kennt die Favicons in den Browserleisten und dern Bookmarks. Sie dienen der besseren Auffindbarkeit und dem steigern des Wiedererkennungswert.

 

Eben diesen Effekt kann man steigern in dem man ein animiertes Favicon benutzt.ie man das macht möchte ich hier erklären - das ganze auf Bitte von Angie.

Beispiel

siehe die Browser-Adressleiste dieser Seite wenn du einen nicht Mircosoft Internet Explorer benutzt. Meines Wissens geht das in allen modernen Browsern, soll heissen Opera, Konquoror, Netscape, Mozilla und seine Freunde (z.B. FireFox)

<div>

How To

</div>

Da Typo3 eine Browsererkennung mitliefert ist das an sich ganz einfach. Nur das ich nichts zum Thema gefunden habe. Also hab ich mich entschlossen selbst ein Tutorial zu schreiben.

 

Folgenden Code muss man einfach nur in das Haupttemplate einbinden und schon läuft das ganze...

[browser = msie]
	page.headerData {
		20 = TEXT
		20.value = <link rel="shortcut icon" href="fileadmin/templates/favicon.ico" type="image/x-icon" />
	}
[else]
	page.headerData {
		20 = TEXT
		20.value = <link rel="icon" href="fileadmin/templates/favicon.gif" type="image/gif" />
	}
[global]