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.

Bilder mit Pep

© Archiv

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…