Elegant und schick: halbtransparente Web-Elemente würden schick aussehen. Leider hat jeder Browser seinen eigenen Befehl zum Umsetzen und die richtige CSS Anweisung „opacity: 0.5“ beherrscht zur Zeit nur der Safari. Auch die Idee, solche Probleme mit halbtransparent gespeicherten PNG-Bildern im Hintergrund zu umgehen, scheitern leider an dem Brower aus Redmond.
Damit der Code auch mit älteren Versionen von Mozilla und IE funktioniert, muss man die jeweiligen CSS Attribute zusammen nutzen:
filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;
Transparenter Hintergrund mit CSS – ohne PNG
Damit der Inhalt des transparenten Layers trotzdem zu 100% sichtbar ist, ist es am einfachsten, einen zweiten Layer oben auf zu legen:
#logobox {
margin: 0pt;
background-color:white;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
position:absolute; top:27px; right:3px; width:100px; height:100px;
}
#logo {
margin: 0pt;
position:absolute; top:27px; right:3px; width:100px; height:100px;
}
06. Januar
Im Web nach passenden Bildern suchen ist nicht immer einfach. Neben den Problemen mit dem Urheberrecht muss auch erst mal das richtige Bild gefunden werden. Hier soll Retrievr helfen: Eine einfache Farbskizze reicht aus, um ähnliche Bilder in Flickr zu finden. Hier wird vor allem auf eine Übereinstimmung der Farben und ihrer Position im Bild geachtet.
Gefunden im Webmaster-Blog, dort gibt es auch Beispiel-Screenshots.
17. Dezember
Wie man von der handgezeichneten Skizze mit Photoshop zu einem schicken 3D-Icon kommt, zeigt Cian Walsh in seinem Photoshop Tutorial „Keyfob: Anatomy Of An Icon“. Frohes Nachbauen!
07. Dezember
Für besonderen Blickfang sorgen Elemente, die aus dem eigentlichen Bild herauszuragen – oder überzustehen – scheinen. Wie das schnell geht, zeigt Dr. Web in einem neuen Photoshop-Tutorial.
Gefunden im Photoshop-Weblog.
29. November
Das Law-Blog hat eine lesenswerte 10-teilige Sammlung u.a. zu den Themen Urheberrecht, Recht am Bild, Rechte an dem, was abgebildet wird zusammengestellt.