אפקט הצללה ללא שימוש בתמונה נוספת

אחת השאלות הנפוצות ביותר בפורומים היא "איך מדמים צל של תמונה"
אחת הטעויות הנפוצות היא הנסיון לעשות זאת באמצעות תמונה נוספת, כשאפשר בעצם לעשות את זה באמצעות CSS.

המאמר מבוסס על ההסבר של dagon

הסטייל:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style> .shadow {             border–right:5px solid #B1B1B1;             border–bottom:5px solid #B1B1B1;             position:relative;             top:1px;             left:1px;             margin:0 1px 1px 0; } .shadow img {             position:relative;             top:–1px;             left:–1px; } </style>

קוד התמונה:

1	<span class="shadow"><img src="https://www.webmaster.org.il/images/banners/sweethome.jpg"/></span>

שימו לב שבדוגמה הזאת אין צורך לקבוע גובה ורוחב אבסולוטיים, כך שכל תמונה שתעטפו אותה ב-span עם הקלאס הזה תיצור הצללה נכונה.

לחץ כאן להדגמה

בהצלחה