CSS Drop Shadow schnell ausrichten

15.08.2004, 08:48 in essays. Trackback-URL, Kommentar-Feed.

Wer der Einfachheit halber den ALA CSS Drop Shadow Code für die Rahmung von Bildern auf der eigenen Site verwendet, hat Bilder, die links vom Text angeordnet werden. Durch die folgende kleine Änderung im CSS ist es bei der Erstellung von Artikeln einfacher, ein abwechslungsreiches Layout durch wechselnde Floats zu erstellen.


.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

Neu hinzu:

.rightalign {
float: right;
margin-left: 10px;
margin-right: -5px;
}

 

.leftalign {
float: left;
margin-right: 10px;
margin-left: -5px;
}

Wenn nun ein Bild eingebunden werden soll, bekommt dieses wahlweise die Klasse rightalign bzw. leftalign zugewiesen:

Beispielbild

<span class="img-shadow rightalign"><img src="Beispielbild.jpg" alt="Beispielbild" /></span>

Werbeunterbrechung

Kommentare und Feedback (1)

Gravatar von TobiasTobias (#)
15.08.2004, 12:50

Simpel, wirkungsvoll und man hätte drauf kommen können.

Dieser Eintrag kann nicht mehr kommentiert werden.

Vorheriger Artikel: Spam Schutz für Movable Type 3.x, nächster Artikel: Photoshop CS und das RAW-Format