ראשימדינותהטיולים שליטיולים ותרמילאותאודות
YosefusFlavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
אינסטגרם

©2026 Yosefus Flavius WebDeveloper

איך להצליל תמונות נכון: ההבדל בין box-shadow ל-drop-shadow
  1. בית
  2. /
  3. פיתוח Full Stack

איך להצליל תמונות נכון: ההבדל בין box-shadow ל-drop-shadow

16 באוקטובר 2024•1 דקות קריאה

רוצים הצללה שמכבדת את קווי המתאר של תמונה עם שקיפות? תכירו את drop-shadow. הצלה לחיים (ולעצבים) עם דוגמה ברורה וקוד מוכן.

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

שתף את המאמר

שתפו:
Yosefus Flavius

נכתב על ידי

Yosefus Flavius

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

עקבו באינסטגרםעוד עליי
הכתבה הקודמתאיך להפוך אלמנט ב-CSS באמצעות scaleX ו-scaleY – המדריך המלא לשיקוף אלמנטיםהכתבה הבאהאיך להשתמש ב-has() ב-CSS להחלת Dark Mode בצורה פשוטה

כתבות דומות

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
פיתוח Full Stack/פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.

27 באפריל 2025
איך להוסיף גלילה חלקה ב-CSS
פיתוח Full Stack/פרונט אנד

איך להוסיף גלילה חלקה ב-CSS

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

27 באפריל 2025
האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0
פיתוח Full Stack/פרונט אנד

האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0

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

27 באפריל 2025