Sicherheit & Internet:Internet:Web-Entwicklung

Teil 3: CSS Tricks: Bilder mit Pep

Im umfassenden Container wird eine Klasse angegeben, damit man ihn per CSS ansprechen kann.

<div class="schatten"><img src="blumen.gif" alt=
"Blumen" /></div>

Die umfassende Box wird gefloatet und erhält als Hintergrundfarbe die für den Schlagschatten gewünschte Farbe.

.schatten {
float: left;
background-color: #aaa;
}

Nun zu den entscheidenden Formatierungen für das Bild innerhalb der Box. Dieses wird über Außenabstände (margin) verschoben.

Die negativen Werte für oben und links sorgen dafür, dass sich das Bild aus dem umgebenden Container herausbewegt. Die positiven Abstände für rechts und unten bestimmen den Abstand zum Container- Rand an diesen Seiten und damit die Breite des Schlagschattens.

.schatten img {
margin: -5px 5px 5px -5px;
display: block;
position: relative;
}

Außerdem wird noch display: block benötigt, damit das Bild zum Blockelement wird. Bilder sind Inline-Elemente und daher im Normalfall an der Text-Basislinie platziert; das bedeutet, dass nach unten noch Platz in der Größe der Unterlängen von Buchstaben wie g zu sehen ist, was zu einer kleinen Verschiebung führt.

Dies verhindern wir mit display: block. Ein zusätzliches position: relative ist nur für den IE6 vonnöten, damit er den Schatten richtig darstellt. Natürlich kann man das Bild selbst auch zusätzlich, wie oben beschrieben, mit einem Rahmen (border) und padding versehen. Damit ergibt sich folgende Formatierung:

.schatten img {
margin: -5px 5px 5px -5px;
display: block;
position: relative;
padding: 5px;
background-color: #fff;
border: 1px solid #888;
border-top-color: #ccc;
border-left-color: #ccc;
}

Wichtig ist bei diesem Beispiel, dass der umfassende Container dieselbe Größe hat wie das darin platzierte Bild. Dies wird im obigen Beispiel dadurch gewährleistet, dass der umfassende Container gefloatet wird. Gefloatete Elemente werden ohne Breitenangabe nur genauso groß wie ihr Inhalt - in diesem Fall genau das, was wir wollen.

Um diffuse Schatten zu erzeugen, ist etwas mehr Aufwand erforderlich. Zuerst einmal kann man natürlich dem umfassenden Container ein halbtransparentes PNG-Hintergrundbild zuweisen. Oder aber man verwendet mehr Container, über die sich Abstufungen für die Schlagschatten realisieren lassen. Für beide Lösungen finden Sie Links im Kasten.

Transparenzen

Schöne Effekte lassen sich über Transparenzen erzielen. Hierfür ist in CSS die Eigenschaft opacity vorgesehen. Hinter opacity geben Sie einen Wert an: opacity: 1 ist der Standardwert und bedeutet vollständig undurchsichtig. Durch kleinere Werte wie opacity: 0.5 wird der Hintergrund unter dem Bild oder sonstigem Element sichtbar.

Bilder mit Pep

© Archiv

.transparent { opacity: 0.5; }

Die Eigenschaft opacity ist in CSS 3 definiert, wird aber von den heutigen modernen Browsern bereits gut unterstützt. Das für ältere Firefox-Versionen (vor Firefox 0.9) erforderliche -moz-opacity braucht man inzwischen nicht mehr.

Der Internet Explorer unterstützt opacity nicht, derselbe Effekt lässt sich jedoch über die Microsoft-proprietäre Eigenschaft filter realisieren. Diese gibt es in mehreren Varianten. Für ältere Internet Explorer gilt die folgende Schreibweise:

filter:alpha(opacity=50);

Für neuere Internet-Explorer-Versionen wird hingegen Folgendes empfohlen:

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

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".