Hinzufügen von Schlagschatten, um Bilder mit CSS

Eine weitere schnelle tut. Hier ist etwas einfach und schön mit der Kraft der CSS ... aber war schwierig concieve (und es war sicher nicht mich) zu beginnen. Hinzufügen von Schlagschatten, könnte ein peice der Kuchen für viele von uns sein, mit etwas Bildbearbeitungs-Tools wie Photoshop ANF Feuerwerk usw.
Der Grund, warum ich für Schlagschatten mit Hilfe von CSS entschieden ist, dass in der Regel während der Erstellung eines Seiten-Design / html einer Anwendung, die Anforderungen Iteration zu halten. Was ich meine ist, in einer bestehenden Website mit vielen Bildern, wie die, die Anzeige von freinds Liste oder eine Bildergalerie, wird es schwierig sein, die Wiederaufbereitung die gesamte Last der Bilder, die bereits abgeladen hatte, um hinzuzufügen oder zu entfernen, die Schatten, dass für Materie.
Wenn Sie also ein wenig vorausschauendes Denken getan haben während der Erstellung der HTMLs, diese zusätzlichen Divisionen oder fügen Sie in der Regel die Situation ist, dass Sie einen Loop Logic Erzeugung dieser Icons / Thumbnails in XSL, PHP haben. JAVA oder einer anderen Programmierung / Scripting-Sprache, können Sie es jederzeit vergrößern, dann ist nur die Frage der Show und versteckt diese Schatten unter Verwendung der CSS-Eigenschaft display, wie pro die Kunden sich ständig ändernden Anforderungen ... habe ich bis diese Art von zukunftsorientierten getan bevor diese ... aber ahev begann jetzt!

Im Beispiel unten ist das Originalbild schattenfreie und die dropshadows angewendet werden wie nötig! Außerdem habe ich ein wenig mehr gegangen, indem Sie die Tricks meiner früheren Tut (Well! diese wahrscheinlich kürzeste Vielzahl von Tutorials, so ist es nur gerechtfertigt, nannte sie "Tut" 's) über die Verwendung von CSS Clip-Eigenschaft für die Schau nur

Original Image

original_image

CSS DropShadow Ergebnisse
css_dropshadow_results
Demo ansehen | herunterladen Quelldateien


3 Responses to "Hinzufügen von Schlagschatten, um Bilder mit CSS"

Lassen Sie eine Antwort

NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken