בעזרת CSS3 ניתן ליצור שני סוגים של צללים: text-shadow(מוסיף צל לטקסט) ו box-shadow(מוסיף צל לאלמנטים אחרים).
צל טקסט CSS3
text-shadowהרכוש יכול להימשך עד ארבעה ערכים:
- את הצל האופקי
- הצל האנכי
- אפקט הטשטוש
- הצבע
דוגמאות:
צל טקסט רגיל
h1 { text-shadow: 2px 2px 5px crimson; }
אפקט טקסט זוהר
h1 { text-shadow: 0 0 4px #00FF9C; }
צללים מרובים
כדי להשיג זאת, פשוט הוסף פסיק בין שתי קבוצות ערכים (או יותר):
h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
CSS3 Box Shadow
box-shadowהרכוש יכול להימשך עד שישה ערכים:
- (אופציונלי)
insetמילת המפתח (משנה את הצל לאחד בתוך המסגרת) - את הצל האופקי
- הצל האנכי
- אפקט הטשטוש
- ההתפשטות
- הצבע
דוגמאות:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
עוד מידע:
- מסמכי אינטרנט של MDN
- בדוק אם יש תמיכה בדפדפן
- מחולל צל-תיבות של CSS (אל תהסס להתנסות עם צל-תאים)