מאז השינויים שהביא איתו CSS3 אני מוצא את עצמי משתמש יותר ויותר בהצללה של קופסאות / תמונות, פינות מעוגלות (שעדיין לא עובדות כשורה באינטרנט אקספלורר המקולל). במקביל בגלל שאני שונא לחפש ולחפש (בזבוז של זמן) אספתי בדף זה שלל דוגמאות של הצללה של קופסאות (div'ים, תמונות וכו').
ניסיתי לכלול המון דוגמאות כדי שיהיה קוד מוכן בדיוק (או בקירוב) לדוגמה של הצללה שאתם מנסים ליצור אך אתם מוזמנים לכתוב לי אם אתם לא מצליחים ליצור את האפקט הרצוי ואשמח לעזור. אם אתם בוני אתרים אתם מוזמנים לשמור את הדף במועדפים לגישה מהירה.
לצד כל הדגמה של הצללה אדביק את קוד הCSS בו יש לעשות שימוש בכדי ליצור את את את האפקט הרצוי. מקווה שזה עוזר ובהצלחה.
כלי ליצירת Box Shadow
Outset Inset
תוצאה: קוד CSS
דוגמאות Box Shadow פופולריות
.shadow01 { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; }
.shadow02 { -moz-box-shadow: 2px 2px 2px 2px #444; -webkit-box-shadow: 2px 2px 2px 2px #444; box-shadow: 2px 2px 2px 2px #444; }
.shadow03 { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
.shadow04 { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; }
.shadow05 { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; }
.shadow06 { -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; }
.shadow07 { -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; }
.shadow08 { -moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; }
המשימה הוצללה בהצלחה!
סיימנו. מאגר קטן ושימושי של אפקט הצללה לקופסאות (div'ים) ותמונות שנוצר בעיקר כדי שאוכל להעתיק ולהדביק מבלי לחפש. מבטיח לעדכן ואשמח אם תתרמו דוגמאות משלכם.
6 תגובות