ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

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

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

איך להצליל תמונות נכון: ההבדל בין box-shadow ל-drop-shadow - מדריך מקיף עם טיפים ומידע שימושי

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

  1. בית
  2. >
  3. Full Stack
16 באוקטובר 2024• זמן קריאה: 1 דקות

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

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

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

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

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

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

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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