Sicherheit & Internet:Internet:Web-Entwicklung

Teil 4: CSS Tricks: Bilder mit Pep

Da dies eine proprietäre Syntax ist und laut CSS-Spezifikation proprietäre Eigenschaften durch ein spezielles Präfix gekennzeichnet werden sollen, empfiehlt Microsoft ab Internet Explorer 8 folgende Schreibweise:

-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";

Für eine browserübergreifend funktionierende Transparenz müssen also die folgenden Angaben geschrieben werden:

.transparent {
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

Bei den proprietären Filtern meldet allerdings der CSS-Validator Fehler. Bei Bedarf können Sie die Angaben für den Internet Explorer in ein eigenes Stylesheet auslagern, das über Conditional Comments eingebunden wird.

Transparenzen einsetzen

Einsatzmöglichkeiten für Transparenzen gibt es viele - beispielsweise kann man ein Bild erst beim Hovern transparent machen. Hierfür wird das Bild innerhalb eines Links platziert:

<a href="#"><img src="blumen.jpg"
alt="Blumen" /></a>

Per CSS wird der Rahmen um das Bild entfernt, der sonst bei verlinkten Bildern standardmäßig zu sehen ist:

a img { border: none; }

Beim Hovern soll das Bild transparent werden. Hierfür notieren Sie den Selektor a:hover img, mit dem Sie Bilder innerhalb eines gehoverten Links ansprechen:

a:hover img {
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

a:hover img ist ein ganz gängiger Selektor, kann jedoch im Internet Explorer 6 problematisch sein. Unter Umständen führt der IE 6 die angesprochene Formatierung einfach nicht aus. Dann hilft es, eine beliebige Formatierung allgemein für a:hover festzulegen - auch wenn es eine ist, die eigentlich gar nichts bewirkt wie beispielsweise:

a:hover {
background-position: 0 0;
}

Transparente Bildbeschriftung

Eine schöne Möglichkeit eine Bildbeschriftung einzufügen, setzt ebenfalls auf Transparenzen. Dieses Mal wird allerdings nicht das Bild selbst transparent gesetzt, sondern die Bildunterschrift in einem halbtransparenten Kasten direkt auf dem Bild platziert.

© Archiv

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.