
איך להצליל תמונות נכון: ההבדל בין box-shadow ל-drop-shadow
רוצים הצללה שמכבדת את קווי המתאר של תמונה עם שקיפות? תכירו את drop-shadow. הצלה לחיים (ולעצבים) עם דוגמה ברורה וקוד מוכן.
היום נציץ על הצללה של תמונות. פחחחחח אני יודע.ת את זה... 😕 טוב נו - אז היום נדבר על שני אופציות של הצללה של תמונות - box-shadow הרגיל והנחמד שעושה צל מסביב לכל הbox (האלמנט בעצמו) שיכול להיות נחמד - אבל יכול לאמלל לנו את החיים במקרה שיש חלקים שקופים בתמונה ואנחנו רוצים להצליל (לצלל\ לצלצל \להצל) רק מסביב לקוי המתאר של התמונה עצמה. הפיתרון המחריד 👎 - לפתוח בפוטושופ את התמונה ולהוסיף לה הצללה, החיסרון: אם המעצבת של האתר מחליטה מחר להפוך את כל ההצללות באתר לורוד זה מרגיש כמו הזמן הנכון להתפטר. הפיתרון הקליל 👍 - להשתמש בקוד שנמצא פה למטה ⬇ אז הdrop-shadow מצליל רק מסביב לקוי המתאר של התמונה עצמה (alpha channel) ובא לציון גואל. ומה עם codepen שאמרת שתביאאאא? 💀💀💀 בתגובה הראשונה רבותי מורי גבירותי אנד ג'נטלמנסים. שמים לב להבדל בין ההיפופוטם עם ההילה האדומה הקוסמית לשאר התמונות?
שתף את המאמר

נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
