בפוסט הזה השייך למדריך css נעבור על אפשרויות הצללה ב css הפכו למאוד שימושיים. ויש כמה שימושים מעניינים שאולי עוד לא יצא לכם להכיר ואציג אותם כאן.
הסבר כלל על box-shadow
box-shadow: 20px -20px 30px 4px rgba(214,70,236,.8);
אז כפי שאפשר לראות יש לbox-shadow , כמה אפשרויות . הערך הראשון קובע את המיקום של הצל ביחס לאלמנט על ציר הX. הערך השני הוא המיקום של הצל על ציר הY. הערך השלישי מגדיר את רמת הטשטוש. הערך הרביעי (שאינו נפוץ במיוחד) מגדיר את גודל הצל, אפשר לעשות צל גדול יותר מהאלמנט או קטן יותר בשימוש ערך שלילי. הערך הבא הוא הצבע, אפשר לתת ערך בHEX אבל אם רוצים לעשות שקיפות אז לדעתי נוח יותר בשימוש rgba.
אפשרות נוספת היא inset, וערך זה מאפשר לעשות צל מפנים הצורה, מה שנקרא inner shadow. אציג דוגמה בהמשך.
שימושים מגניבים נוספים שאפשר לעשות עם box-shadow
/* מספר שכבות הצללה לאלמנט בודד */ box-shadow: 20px -20px 30px 4px rgba(214,70,236,.8), -20px 20px 30px 4px rgba(70,236,225,.8), 20px -20px 30px 4px rgba(70,236,225,.6) inset, -20px 20px 30px 4px rgba(214,70,236,.6) inset; /* מסגרות עם הצללה */ box-shadow: 0 0 0 4px rgba(214,70,236,1), 0 0 0 8px rgba(70,236,225,1)
- אפשר להוסיף כמה מאפייני הצללה שרק תרצו. דבר זה מאפשר יצירתיות רבה. כל מה שצריך זה לשים פסיקים בין קבוצת ערכבים המגדירה הצללה (ציר X , ציר Y , טשטוש , גודל, צבע, צל פנימי – כמובן שלא חייבים להגדיר את כל הערכים)
- הצללה פמינית inset – אז כפי שכבר ציינו , ניתן להוסיף כערך להצללה את המילה inset, ולהפוך את הצל להצללה פנימים inner shadow.
- מסגרת עם box shadow – אפשר לייצר מעניין border בעזרת הצללה. אם תרצו לייצר אלמנט עם 2 או יותר שכבות של border , איך תעשו זאת ? עם box-shadow זה דיי פשוט. אפשר להוסיף מספר שכבות ללא טשטוש ובגדלים שונים וכך תקבלו אלנמט עם סוג של border רק מסוג box shadow
ההבדל בין box-shadow לבין drop-shadow
ב css3 יש עולם שלם סביב פילטרים. בטיפ הזה לא אגע באמת בפילטרים אך כן חשוב לציין פילטר אחד שקשור לנושא של הצללות, והוא : drop-shadow . הגאונות של הצללה מסוג זה , שהיא יודעת להתעלם מרקעים שקופים. למשל אם תקחו תמונה PNG עם רקע שקוף ותשימו לי הצללה מסוג box-shadow. תקבלו מן ריבוע שקוף סביב התמונהץ אך אם תשתמשו בdrop shadow. התמונה תקבל את ההצללה בצורה מושלמת ללא כל חשיבות לרקע השקוף. נושא מוכר להרבה מתכנתי פרונט אנד. כאשר עושים צורה בעזרת בורדרים למשל בדוגמה פה:
.triangle {
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-bottom: solid 100px #fff;
}ואז שרוצים להוסף למשולש הזה הצללה. נוצרת בעיה של ריבוע שקוף עם צל ובתוכו משולש.. אז במקרה הזה, הפתרון הוא להשתמש בפילטר ההצללה ()drop-shadow
.triangle
{
margin: 50px auto;
border-radius: 5px;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-top: solid 100px #fff;
filter: drop-shadow(0 0 0.75rem rgba(70,236,225,1));
}
