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

‏ • 31 בינואר, 2004

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


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


הסטייל:










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








<style>
.shadow {
            borderright:5px solid #B1B1B1;
            borderbottom: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=“http://www.webmaster.org.il/images/banners/sweethome.jpg”/></span>


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

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

בהצלחה

תגיות: ,

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!