Gimp: Transparente und halbtransparente Bilder (PNG)
Halbtransparente Hintergrundbilder erstellen mit Gimp
Hier gibt’s jetzt gab’s mal Luftballons*. In den Google-Farben. Die scheinen schienen durch die halbtransparenten Menüboxen. Mit dem kostenlosen Grafikprogramm The Gimp kann man halbtransparente PNG-Bilder ziemlich einfach erstellen.
So geht’s: Neues transparentes Bild erstellen, Größe 10×10 Pixel (”Ebenen” > “Transparenz” > “Farbe zu Transparenz”). Pinseltool anwählen, Deckkraft einstellen und mit dem Pinsel über das Bild fahren. Bild als *.png speichern. Fertig.
Hier wurden die Luftballons im Stylesheet als Backgrounds für die Sidebars links und rechts festgelegt. Die Navigationsquadrate sind einzellige Tabellen mit, wie oben beschrieben erstellten PNG-Dateien unterschiedlicher Deckkraft als Hintergrundbildern.
Wunderbar, klappt auch überall. Außer im Internet Explorer 6. Der ist zu blöd, dieses spezielle PNG-Format richtig darzustellen. Das habe ich aber erst mitgekriegt, als ich das neue Layout schon hochgeladen hatte. Marktanteil Internet Explorer 6 im November 2008 = 43,6%. Prost! Und jetzt?
Auf www.dreckstool.de kann man seine Stimme für dieses dämliche Stück Software abgeben.
* Die Luftballons habe ich für 3 Dollar bei iStockphoto gekauft: Kostenlose Bilder und Fotos
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Responses to “Gimp: Transparente und halbtransparente Bilder (PNG)”.
Willkommen im Club
es gibt diverse Hacks dem IE6 Transparenz beizubringen:
http://bueltge.de/png-transparenz-im-ie-5-ie-6/592/
oder
http://www.twinhelix.com/css/iepngfix/
ich lass es inzwischen weg.
Wer den IE6 noch nutzt, hat sowieso keine Kontrolle mehr über seinen Rechner. Die Marktanteile rühren doch von irgendwelchen Bots die sich als IE6 ausgeben.
Ich kenne niemanden (lebende Person) die das Drecksteil noch benutzt.
@mark – Danke, seh ich mir mal in Ruhe an. Springt sicher noch ein Post bei raus.
Geht bei allen Grafiken, musst über die css arbeiten ;
google mal ein bischen über das darstellen von transparenten objecten über css files
/*Darstellung Transparenter OBJ in den einzelnen Browsern
/*am besten alle 3 Teile in die jeweiligen Bereiche
______________________________
/*Codebeispiel */
#MeinObj {
position:relative;
top:-74px;
left:-576px;
width:162px;
height:144px;
border:0px outset #fff;
background:url(../media/images/bild02smal.jpg);
/*ab hier die transparenten teile */
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
/*ende der transparenten befehle*/
}
______________________________
Grüsse
[...] jedem anderen Grafik-Programm, wie dem kostenlosen Gimp, oder sogar mit dem von Windows mitgelieferten “Paint” geht’s natürlich [...]
Leave a comment.