Teil 3: CSS Tricks: Bilder mit Pep
- CSS Tricks: Bilder mit Pep
- Teil 2: CSS Tricks: Bilder mit Pep
- Teil 3: CSS Tricks: Bilder mit Pep
- Teil 4: CSS Tricks: Bilder mit Pep
- Teil 5: CSS Tricks: Bilder mit Pep
Im umfassenden Container wird eine Klasse angegeben, damit man ihn per CSS ansprechen kann....
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.
.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);
