Bilder machen längere Texte und Webseiten allgemein erst richtig interessant, meist können sich dann die Leser mehr unter einem Thema vorstellen und das Design wird dadurch sehr aufgewertet. Auch ich benötigte für ein internes Projekt nun ein Schatten hinter einigen Bildern. Dieser sollte aber auch nach was aussehen und nicht nur trist grau sein. Gefunden habe ich dann was schönes bei gxm. Im Artikel wird eine Schatten-Grafik angeboten, welche man mit etwas CSS für jedes Bild verwenden kann, da sich der Schatten immer passend anpasst. Ist leider nicht so, denn man müsste für jede Bildbreite einen eigenen Schatten erstellen und ich persönlich war eher auf der Suche nach einem passenden Schatten, welchen ich auch vor allem für kleinere Darstellungsbilder benutzen kann.

Als Beispielgrafiken habe ich mal folgende Bilder genommen von den IT-Runde Fan’s ;-):

Ich habe dann mal weiter gesucht und so einige Schatten gesehen, mal gute und mal weniger gute. Schlussendlich hat mich vor allem der Schatten von Hartjes beeindruckt. Schön schlicht, kleiner Code und sieht klasse aus (egal ob bei großen oder kleinen Bildern). Das einzige was ihr dafür tun müsst ist euch die Schatten-Grafik runterzuladen (itrunde-schatten.gif) und folgenden CSS-Code in eure Style-Datei einzufügen (Achtung: Optimiert bis Grafiken in der Größe 800×800):

1
2
3
4
5
6
7

.itrundeschatten {
background: url(./ordnerstruktur/itrunde-schatten.gif) no-repeat right bottom;
padding: 4px 10px 10px 4px;
border: #eee 1px solid;
border-right:none;
border-bottom:none;
}

Den Dateipfad müsst ihr natürlich dementsprechend an den Speicherort eurer Schatten-Grafik anpassen. Danach könnt ihr per class-Attribut ganz easy in eurem img-Tag den Schatten in eure Bilder einfügen. Hier ein einfaches Beispiel:

1

Natürlich nicht vergessen im Dokument die Style-Datei einzubinden :-D. Das Ergebnis sieht bei unserem Beispiel dann gleich viel eleganter aus als bei der normalen langeweiligen Anordnung oben:

Ob für große oder kleine Projekte – Der CSS Schatten mit der passenden Grafik lässt sich schnell und einfach integrieren und nimmt wenig Platz weg mit großer Wirkung! Mein Tipp ;).

Welche Schatten benutzt ihr bei euren Scripten? Rein CSS, fertiges Script oder Self-Made Code?

Tweet