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

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…
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…
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…