כיצד ליצור צל עם CSS

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

בואו נסתכל מקרוב על ה-CSS טיפת צל תכונה.

מה זה צל של CSS?

צללית( ) הוא אפקט CSS המציג צל סביב הצורה של אובייקט שצוין. להלן התחביר להחלת CSS טיפת צל.

תחביר:
מסנן: צללית (offset-x offset-y blur-radius color);

יש מגוון רחב של פונקציות סינון לְרַבּוֹת לטשטש ( ), בהירות ( ), ו צללית( ).

offset-x קובע את המרחק האופקי ו offset-y קובע את המרחק האנכי. שים לב שערכים שליליים ממקמים את הצל בצד שמאל (offset-x) ומעל (offset-y) האובייקט.

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

צבע הצל מצוין כ. אם לא ציינת צבע, הוא עוקב אחר הערך של צֶבַע תכונה.

מתי צל של CSS שימושי?

אולי אתה כבר יודע את זה צל קופסא עושה את העבודה די טוב. אז, אתה אולי חושב, למה אנחנו צריכים טיפת צל בכלל? ישנם מקרים רבים שבהם צללית( ) התפקוד הוא מציל חיים. בואו נסתכל על כמה מהם:

צורות לא מלבניות

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

HTML

CSS

.star-img img {
תצוגה: בלוק מוטבע;
גובה: 15em;
רוחב: 25em;
}
.צל קופסא {
צבע אדום;
קופסא-צל: 0.60em 0.60em 0.2em;
}
‎.drop-shadow {
מסנן: צללית (0.60em 0.60em 0.2em);
}

תְפוּקָה:

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

הגורמים המגבילים הם שה צללית( ) הפונקציה מקבלת את כל הפרמטרים של הסוג חוץ מ הַבלָעָה מילת מפתח ו התפשטות פָּרָמֶטֶר.

אלמנטים מקובצים

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

HTML

לחיות את הרגע

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

CSS בסיסי

גוף {
ריפוד: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', ז'נבה, Verdana, sans-serif;
}
h2 {
גודל גופן: 2rem;
}
p {
גודל גופן: 0.8rem;
}
.parent-container {
תצוגה: flex;
flex-direction: עמודה;
גובה: 17 רם;
רוחב: 50em;
}
‎.image-container img {
רוחב: 15em;
מיקום: מוחלט;
z-index: 1;
למעלה: 2em;
שמאל: 1.5em;
}
‎.text-container {
צבע: rgb (255, 236, 236);
צבע רקע: rgb (141 0 35);
רוחב: 30 רם;
ריפוד: 3rem;
align-self: flex-end;
עמדה: קרוב משפחה;
}

כעת, החל את צל קופסא ו טיפת צל לראות את ההבדל.

‎.drop-shadow {
מסנן: צללית (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.קופסא,
.box img {
קופסא-צל: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

תְפוּקָה:

כפי שאתה יכול לראות, ה צל קופסא מוחל על כל אלמנט בנפרד בעוד ה טיפת צל מקבץ את שניהם ומחיל את הצל.

אלמנטים קצוצים

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

HTML

CSS

.parent-container {
מסנן: צללית (0rem 0rem 1.5rem חום חום);
}
.clipped-element {
רוחב: 50em;
גובה: 50em;
שוליים: 0 אוטומטי;
רקע-תמונה: url (smiling-girl.jpg);
נתיב קליפ: מעגל (50%);
רקע-גודל: כריכה;
רקע-חזרה: אין-חזרה;
}

תְפוּקָה:

גזרנו 50% מהתמונה עם נתיב מעגלי. לכן, ה מסנן צללים מוחל רק על החלק הגלוי של התמונה. נכון שזה מדהים?

מגבלות והבדלים

כפי שדיברנו למעלה, טיפת צל אינו תומך ב התפשטות פָּרָמֶטֶר. המשמעות היא שיצירת אפקט מתאר לא תהיה אפשרית באמצעות ה צללית( ) לתפקד כי זה נהרג בכל מקום. כמו כן, הוא יוצר אפקטי צל שונים מה- צל קופסא ו צל טקסט (עם אותם פרמטרים). אתה עשוי להרגיש שההבדלים בין ה צל קופסא ו טיפת צל להרתיח את דגם קופסת CSS. אחד עוקב אחריו ואילו השני לא. הנה דוגמה:

HTML

כל מאמר MUO יקרב אותך צעד אחד קדימה.


כל מאמר MUO יקרב אותך צעד אחד קדימה.



כל מאמר MUO יקרב אותך צעד אחד קדימה.

CSS בסיסי

גוף {
ריפוד: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', ז'נבה, Verdana, sans-serif;
}
.parent-container {
רוחב: 72 רם;
}
p {
גודל גופן: 3em;
סגנון גופן: מודגש;
}

החלת אפקטי צל

‎.drop-shadow {
מסנן: צללית (0.5em 0.5em 0.1em #555);
}
.צל קופסא {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.צל טקסט {
text-shadow: 0.5em 0.5em 0.1em #555;
}

תְפוּקָה:

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

תמיכה בדפדפן

ה צללית( ) הפונקציה נתמכת בכל הדפדפנים המודרניים למעט דפדפנים ישנים כמו Internet Explorer. למרות שזה לא משהו שיפגע ברצינות ב-UX, אתה יכול להוסיף שאילתת תכונה עם צל קופסא לסגת.

ניסוי עם אפקטי צל שונים

הפופולריות של צל קופסא ברור למדי בגלל ריבוי מקרי השימוש. אולם, ה צללית( ) הפונקציה אינה מנוצלת מאוד. אנו מקווים שתתנסו באפקטי צל שונים ותנסו ליישם טיפת צל בפרויקטים העתידיים שלך.

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

כיצד להשתמש ב-CSS box-shadow: 13 טריקים ודוגמאות

קופסאות תפלות נראות משעממות. שפר אותם עם אפקט קופסת הצללים של CSS!

קרא הבא

על הסופר