Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

3D-Wirkung mit CSS – Schatteneffekte für Fotos und Grafiken

Posted by sura1 - 30. Oktober 2008

Bookmark and Share

3D-Wirkung mit CSS

Schatteneffekte für Photos und Grafiken

Bilder und Grafiken mit Schatten versehen – es gibt eine ganze Menge von Online-Generatoren, mit denen Sie dies ganz einfach und schnell erledigen können. Ich möchte Sie hier aber auf eine Methode hinweisen, wie Sie mit CSS eine verblüffende 3D-Wirkung bei Fotos und Grafiken erzielen können.

Seit den Zeiten der ersten grafikfähigen Browser werden durch Schatteneffekte an Photos und Grafiken mehr oder weniger dreidimensionale Erscheinungen vermittelt. Dies wird realisiert, indem man der Grafik mit Hilfe eines Bildbearbeitungsprogramms einen Schatten hinzufügt oder indem man eine Schattengrafik in Teile zerschneidet und in einem Tabellenkonstrukt neben der Grafik unterbringt.


Auf der Webseite www.thestyleworks.de hat Klaus Langenberg ein tolles Tutorial zu diesem Thema verfasst. Er befasst sich darin eingehend mit der Theorie, inwieweit so ein Konstrukt heute durch reine CSS-Lösungen realisiert werden kann. Sie finden das komplette Tutorial unter http://www.thestyleworks.de/tut-art/shadow.shtml.

Der Grundgedanke ist hier, dass replazierte Elemente wie das img stets von einem Block- Level- Element umgeben werden. Mit ein wenig CSS läßt sich dann recht einfach eine Schattenwirkung simulieren.

(Quelle: http://www.thestyleworks.de/gen/whatsright.shtml )

Sehen Sie hier als fertiges Beispiel Nummer 09 des Styleworks-Tutorials eine kleine Galerie.

MEIN BEISPIEL – BILDERGALERIE

Mein bearbeitetes Beispiel (69KB – Zip_Datei) beinhaltet 4 Bilder, welche Sie in meiner Bildergalerie neben vielen anderen Kunstwerken sehen können.

Einziger Unterschied: Ich habe den Punkt 8 des Schatten-Tutorials absichtlich nicht in meine Bearbeitung eingebaut; so haben die Bilder der Galerie keinen Grau-Schatten.

Fahren Sie mit der Maus über die Bilder und Sie bemerken den 3D-Effekt sofort. Es sieht tatsächlich so aus, als ob die Grafiken schweben und bei Maus-Kontakt nach unten gedrückt werden!! Einen besseren Schatten-Effekt habe ich wo anders im Netz bis dato noch nicht gesehen.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: