ביליתי כארבעים דקות פעם אחת בניסיון להתאים צל מקובץ Figma המעצב נתן לי צבע, היסט X ו-Y, טשטוש ופיזור, שזה כל מה שאתה צריך, ועדיין לא הצלחתי לגרום לזה להיראות נכון הצל בדפדפן היה כבד ושטוח יותר מהדגם, והמשכתי לדחוף את רדיוס הטשטוש למעלה ולמטה כאילו זה יתקן את זה.
זה לא היה, כי לדגם היו שני צללים מוערמים. אחד כהה הדוק למגע, אחד רך רחב לאור הסביבה. פיגמה הראתה אותם כשכבות נפרדות בפאנל שקרסתי. ברגע שכתבתי אותם כזוג מופרד בפסיקים, ההתאמה הייתה מיידית.
זה העניין במאפייני ה-CSS במדריך הזה אף אחד מהם לא מסובך לכולם יש התנהגות אחת או שתיים שאינן ברורות מהתחביר, ואתה יכול להפסיד אחר צהריים לכל אחת מהן המדריך הזה הוא ההתנהגויות האלה, כתוב.
כל גנרטור המקושר כאן פועל בדפדפן שלך, מעדכן תצוגה מקדימה חיה בזמן שאתה גורר, ומגיש לך את ה-CSS. אני בונה אותם ב-[Toolz.dev] (/ ומשתמש בהם כל הזמן, בעיקר בגלל שקריאת קיצור בעל ארבעה ערכים קשה יותר מאשר להסתכל על מלבן.
TL;DR: להשתמש צל קופסה לעומק, טקסט צל לזוהר וקווי מתאר, רדיוס גבול לפינות כולל האליפטיות, מסנני CSS לטשטוש, בהירות ואפקטים של צבע, גלאסמורפיזם עבור לוחות חלביים, ניומורפיזם למשטחים מוגבהים רכים, שיפועים לרקע, וה ממיר יחידת CSS כאשר אתה צריך px in rem.כולם לרוץ צד הלקוח עם תצוגה מקדימה חיה שני הכללים שווה לשאת: צללים אמיתיים הם שכבות, ו
backdrop-filterצריך משהו מאחורי זה כדי לטשטש.
איזה גנרטור אני צריך?
| אתה רוצה | נכס | כלי |
|---|---|---|
| כרטיס שמתרומם מהדף | box-shadow |
צל קופסה |
| טקסט זוהר, מתואר או מובלט | text-shadow |
טקסט צל |
| פינות מעוגלות או בצורת גלולה | border-radius |
רדיוס גבול |
| טשטוש, עמום, חסר רוויה או גוון אלמנט | filter |
מסנן CSS |
| פאנל חלבי מעל תמונה | backdrop-filter |
גלאסמורפיזם |
| כפתור רך שנראה לחוץ אל פני השטח | שכבות box-shadow |
ניומורפיזם |
| רקע מעבר צבע | linear-gradient |
שיפוע |
| כדי להפוך 24px ל-rem | אף אחד | ממיר יחידה |
שאר המדריך הזה הוא מה כל אחד עושה והיכן הוא נושך.
איך עובד בוקס-צל?
הקיצור הוא חמישה ערכים וצבע:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
קיזוזים מזיזים את הצל. טשטוש מרכך את הקצה שלו, מפזר אותו כלפי חוץ בערך במחצית מערך הטשטוש לכל כיוון. התפשטות גדלה או מכווצת את הצל לפני הפעלת הטשטוש, והתפשטות שלילית היא הטריק לצל שיושב תחוב מתחת לאלמנט במקום להלל אותו.
החלק שאנשים מפספסים: shadows stack. רשימה מופרדת בפסיקים מציגה חזרה לחזית, צל ראשון למעלה:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
הזוג הזה הוא הסיבה שמעצב 's shadow נראה טוב יותר משלך. צל אחד קורא כמדבקה. שניים קוראים כחפץ עם משקל. ה מחולל צללים מאפשר לך להוסיף שכבות ולגרור כל אחת בנפרד, וזו הדרך השפויה היחידה לכוון אותן.
inset מזיז את הצל בתוך תיבת הגבול, וכך מקבלים קלט שנראה שקוע, או החצי הפנימי של משטח נוימורפי.
הערת ביצוע אחת שנשכה אותי בפרויקטים אמיתיים: אנימציה box-shadow כופה לצבוע מחדש כל מסגרת אם אתה רוצה כרטיס להרים על רחף, הנפשה transform ולהצלבה דהייה אלמנט שני שמחזיק את הצל הגדול יותר. ה התייחסות ל-MDN תיבה-צל מתעד את התחביר במלואו.
בשביל מה טוב צל טקסט מלבד צללים?
אותו רעיון, ערך אחד פחות. text-shadow אין התפשטות:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
השימושים המעניינים שלו אינם צללים כלל.
קווי מתאר. ארבעה צללים קשים באפס טשטוש, אחד לכל אלכסון, לזייף שבץ סביב טקסט זה כבד יותר מ -webkit-text-stroke אבל זה עובד בכל מקום וזה מציג מחוץ לגליף במקום לפצל את ההבדל:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
זוהר. אפס היסט, טשטוש גדול, צבע רווי, חוזר על עצמו פעמיים או שלוש כדי לבנות עוצמה.
קריאות על פני תמונות. צל כהה רך יחיד תחת טקסט לבן קונה לך ניגודיות כאשר הרקע הוא תמונה שאתה לא שולט בו זה לא תחליף לסקרימ תקין, וזה לא יחס ניגודיות נכשל, אבל זה עוצר את היורדים להיעלם לתוך תיקון בהיר.
בנה את שלושתם על מחולל צל טקסט. אם אתה רודף אחר דרישת ניגודיות ולא השפעה, בדוק את התוצאה מול WCAG עם ה בודק ניגודיות צבע במקום לגלגל את זה.
מדוע רדיוס-גבול לוקח שמונה ערכים?
רוב האנשים משתמשים באחד הצורה המלאה היא שתי קבוצות של ארבע, מופרדות על ידי קו נטוי:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
לפני הלוכסן: הרדיוס האופקי של כל פינה, עם כיוון השעון מלמעלה-משמאל אחריו: הרדיוס האנכי תן את שניהם וכל פינה הופכת לאליפסה ולא לרבע עיגול כך מקבלים צורות כתמים אורגניות ללא SVG.
שתי התנהגויות שכדאי לדעת.
האחוזים נפתרים מול צירים שונים. רדיוס אופקי פנימה % הוא אחוז מהאלמנט' רוחב s, האנכי של גובהו. כך border-radius: 50% על מלבן נותן אליפסה, לא מלבן מעוגל, מה שמפתיע אנשים בפעם הראשונה.
הדפדפן מקטין את הרדיוסים כאשר הם חופפים. אם שני רדיוסים סמוכים מסתכמים ליותר מהצד שהם חולקים, כל הרדיוסים מצטמצמים באופן פרופורציונלי עד שהם מתאימים. אתה לא יכול להציף את הצורה, וזו הסיבה border-radius: 9999px מייצר גלולה באופן אמין.
ה מחולל רדיוס גבול חושף את כל שמונת הערכים עם מחוונים לכל פינה ופולט את הקיצור התקף הקצר ביותר, שכדאי לקבל כי כתיבת צורת האלכסון ביד היא באמת לא נעימה.
מה מסנני CSS יכולים לעשות, ומה הם עולים?
filter מחיל פעולות גרפיות על אלמנט וכל מה שבתוכו:
filter: blur(4px) brightness(1.1) saturate(1.2);
פונקציות מורכבות משמאל לימין, וסדר משנה את התוצאה. טשטוש ואז הבהרה אינו זהה להבהרה ואז טשטוש.
| פונקציה | עושה | לצפות ב |
|---|---|---|
blur() |
טשטוש גאוסי | יקר ברדיוסים גדולים; מטשטש קצוות כלפי חוץ |
brightness() |
קלילות מרובה | מעל 1 קליפים מדגיש ללבן |
contrast() |
דוחף ערכים מאמצע אפור | מרסק פרטים מהר |
grayscale() |
מסיר רוויה | זול יותר מנכס משוכפל |
sepia() |
מפת גוונים חמים | לשלב עם hue-rotate() לגוונים אחרים |
hue-rotate() |
מעביר את הגוון בזווית | לא משמר קלילות נתפסת |
drop-shadow() |
צל שעוקב אחרי אלפא | בניגוד ל box-shadow, עוקב אחר הצורה בפועל |
השורה האחרונה היא זו ששווה לזכור. box-shadow מצל על תיבת הגבול, כך PNG שקוף של לוגו מקבל צל מלבני. filter: drop-shadow() מתחקה אחר ערוץ האלפא ומצל על הלוגו עצמו.
העלות היא אמיתית מסננים דוחפים אלמנט על שכבת קומפוזיציה משלו, ו blur() בפרט יקר על שטח גדול בסדר על כפתור תחשוב פעמיים על שכבת-על של עמוד שלם בטלפון נמוך. הפניה למסנן MDN's מפרט כל פונקציה והתנהגות האינטרפולציה שלה.
נסה שילובים על מחולל מסנן CSS, המציג את התצוגה המקדימה ואת ההצהרה המדויקת זה לצד זה.
איך אני בונה פאנל glassmorphism שעובד?
זכוכית חלבית היא נכס אחד שעושה את העבודה:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter מסנן מה זה מאחור האלמנט ולא האלמנט עצמו. שלושה דברים נובעים מכך, והם אחראים כמעט לכל " למה הכוס שלי נראית כמו קופסה אפורה" שְׁאֵלָה.
זה צריך משהו מאחורי זה. על פני צבע רקע שטוח, רקע מטושטש הוא אותו צבע שטוח. האפקט קיים רק על תמונה, שיפוע או תוכן חופף.
הרקע חייב להיות שקוף. רקע אטום לחלוטין מסתיר את הרקע המטושטש לחלוטין. איפשהו בין 10% ל-25% לבן הוא הטווח הרגיל.
הרוויה היא מה שמוכר אותה. צבע תרכיזי זכוכית אמיתיים. saturate(180%) לצד הטשטוש נמצא ההבדל בין זכוכית חלבית לכתם.
הוסף את גבול קו השיער מכיוון שלזכוכית יש קצה, ובדוק ניגודיות לפני המשלוח: טקסט מעל תמונה מטושטשת עובר או נכשל בהתאם לתמונה, ופאנל שקורא בצורה מושלמת בתמונת הגיבור שלך עשוי להיות בלתי קריא בתמונה הבאה.
ה מחולל זכוכית תצוגה מקדימה על תמונה בפועל, מה שחשוב כאן יותר מאשר לכל אפקט אחר במדריך זה.
האם כדאי להשתמש בניאומורפיזם?
נוימורפיזם, או ממשק משתמש רך, גורם לאלמנטים להיראות מחולצים מהרקע במקום לצוף מעליו. שני צללים, פינות מנוגדות, אחד בהיר יותר מהמשטח ואחד כהה יותר:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
החלף אותם במצב לחוץ, או השתמש inset על שניהם למראה מגולף.
לטכניקה יש אילוץ אחד קשה: האלמנט והרקע שלו חייבים להיות באותו צבע. האפקט הוא כולו שני הצללים, כך שכפתור ניאומורפי על רקע אחר מפסיק לקרוא כפי שחולץ ומתחיל לקרוא כשבור.
יש לו גם בעיית נגישות ששווה להיות כנה לגביה. כל האסתטיקה היא ניגודיות נמוכה לפי בנייה, וכפתור שהמחיר היחיד שלו הוא צל רך יכול להיכשל WCAG's דרישה ללא ניגודיות טקסט לרכיבים אינטראקטיביים אם אתה משתמש בו, תן לחצנים גבול אמיתי או סגנון מיקוד שאינו תלוי בצל.
ה מחולל נוימורפיזם שואב את שני צבעי הצל מצבע פני השטח שלך, שהוא החלק הכי מטופש לעשות ביד.
מתי אני צריך ממיר יחידה?
לעתים קרובות יותר ממה שהייתם חושבים, כי כלי עיצוב מדברים px ו-CSS טוב לרוב לא.
rem הוא ביחס לגודל גופן השורש, כך שפריסה ב-rem משתנה כאשר משתמש משנה את הדפדפן שלו 's גודל טקסט ברירת מחדל. em הוא יחסי ל element's גודל גופן, מה שהופך אותו לשימושי לריפוד שאמור לעקוב אחר הטקסט שלו ובוגדני כאשר הוא מתחבר דרך אלמנטים מקוננים.
החשבון הוא טריוויאלי. לעשות את זה ארבעים פעמים תוך כדי תרגום מפרט זה המקום שבו טעויות זוחלות פנימה, במיוחד אם גודל השורש אינו 16px. ה ממיר יחידת CSS לוקח שורש שניתן להגדרה ומציג כל יחידה בבת אחת.
עבור שיפועים, ה מחולל שיפוע מכסה ליניארי, רדיאלי וחרוט, ויש כתיבה ארוכה יותר ב- מדריך שיפוע CSS.
מחברים אותם: קלף, מתחילים עד הסוף
הנכסים משמשים רק לעתים רחוקות לבד הנה כרטיס שמשתמש בארבעה מהם, שנבנה כמו שהייתי בונה אותו.
התחל עם הצורה והצל המנוחה:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
שני צללים שוב, שניהם אור קלף מנוחה צריך בקושי להרים שמור את הדרמה למצב הרחף.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
ה translateY עושה את רוב העבודה הנתפסת תנועה קוראת כהרמה בצורה משכנעת יותר מאשר צל גדול יותר עושה, והיא זולה כי טרנספורמציות מורכבות ולא נצבעות מחדש.
אם הכרטיס יושב על תמונה במקום דף שטוח, החלף את הרקע הלבן בזכוכית:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
שימו לב מה השתנה ומה לא הרדיוס והצללים עוברים ללא נגיעה רק טיפול פני השטח שונה, שהוא המודל המנטלי השימושי: צורה ועומק הם החלטה אחת, פני השטח הם החלטה אחרת.
מה לגבי תמיכה בדפדפן וחזרות?
רוב זה ישן ובטוח. box-shadow, text-shadow, border-radius ו filter נתמכים בכל מקום כבר שנים, ואפשר לכתוב אותם בלי לחשוב פעמיים.
backdrop-filter האם היוצא מן הכלל שווה טיפול התמיכה היא רחבה עכשיו, אבל זה הנכס היחיד כאן שמייצר תוצאה שבורה למראה באמת כאשר הוא חסר: פאנל עם רקע לבן 15% וללא טשטוש הוא מריחה חיוורת מעל תמונה שמור על זה:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
ה-fallback הוא פאנל אטום ברובו, שאינו האפקט אך ניתן לשימוש מושלם. הגרסה המשופרת חלה רק כאשר הדפדפן יכול לספק אותה. MDN's @supports התייחסות מכסה את התחביר, וכדאי להגיע אליו לכל זמן שלמאפיין יש מצב כשל שבור ויזואלית ולא רק פשוט יותר.
כיצד אוכל לשמור על עקביות אפקטים לאורך פרויקט?
מצב הכשל על בסיס קוד אמיתי הוא לא צל אחד רע זה ארבעה עשר צללים קצת שונים, כי כל מי שהיה צריך כרטיס כתב את שלו.
הגדירו אותם פעם אחת כמאפיינים מותאמים אישית והשתמשו בשמות:
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
שלושה צעדי צל בדרך כלל מספיקים אם אתה מוצא את עצמך מוסיף רביעית, זה לעתים קרובות בגלל שרכיב צריך אחרת גובה ולא צל אחר, והתשובה היא לעשות שימוש חוזר בצעד קיים.
זה גם הופך את המצב הכהה לניתן לפתרון צללים שעובדים על לבן קרובים לבלתי נראים על משטח כהה, כאשר העומק מגיע בדרך כלל מגבול בהיר יותר או זוהר עדין במקום זאת. הגדר מחדש את האסימונים בתוך שאילתת מדיה וכל רכיב עוקב אחריו:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
צור כל ערך פעם אחת עם הכלים שלמעלה, הדבק אותו בבלוק האסימון והפסק לחשוב עליו. זה כל העניין שיש מחולל: לא לכתוב CSS לא יכולת לכתוב ביד, אלא להפסיק לבזבז תשומת לב על ערכים שצריך להחליט רק פעם אחת.
היכן שהשפעות אלו גורמות לבעיות נגישות
כל מאפיין במדריך זה מתמרן ניגודיות, וניגודיות היא הדבר שדרישות הנגישות עוסקות בו בעיקר. ארבע מלכודות ספציפיות.
רכיבים אינטראקטיביים זקוקים לגבולות גלויים. WCAG 2.2 דורש ניגודיות של 3:1 עבור החלקים של פקד שמזהים אותו כפתור שהקצה היחיד שלו הוא צל רך יכול להיכשל בכך, שזו הבעיה המבנית עם ניומורפיזם והסיבה שגבול או טבעת מיקוד מוצקה אינם אופציונליים שם.
לוחות זכוכית יורשים את בעיית הניגודיות שלהם ברקע #39;s. טקסט על לוח חלבי קריא או לא תלוי בתמונה שמאחוריו, והתמונה משתנה לעתים קרובות. בדוק מול התמונה הגרועה ביותר שלך, לא הגיבור שלך. הרמת הפאנל ' אטימות הרקע היא בדרך כלל תיקון טוב יותר מאשר הפיכת הטקסט למודגש יותר.
מסננים משנים ניגודיות בשקט. brightness() ו contrast() מוחל על מיכל חל גם על הטקסט שבתוכו. א filter: brightness(1.15) על כרטיס כדי לגרום לו לקפוץ יכול לדחוף בשקט את הגוף שלך מתחת לסף 4.5:1. בדוק לאחר מכן עם ה בודק ניגודיות צבע, לא לפני.
אל תתנו צל להיות מחוון המדינה היחיד. אם ריחוף, מיקוד ולחיצה נבדלים רק בעומק הצל, משתמשי מקלדת וכל מי שיש לו ראייה לקויה מאבדים את ההבחנה. חבר את שינוי הצל עם טרנספורמציה, קו מתאר או שינוי צבע.
כל זה לא הופך את האפקטים לבלתי שמישים. זה הופך אותם לדברים לאימות במקום להניח, מה שלוקח כדקה לכל רכיב עם בודק ניגודיות פתוח.
האם הכלים האלה שולחים את העבודה שלי לכל מקום?
מס 'כל מחולל כאן פועל כולו בדפדפן אין שלב העלאה ואין שרת הלוך ושוב, וזו הסיבה שהם מגיבים באופן מיידי כמו שאתה גורר מחוון. זו אותה סיבה ששאר הקטלוג עובד במצב לא מקוון, מכוסה ב מדריך פרטיות נתונים.
טעויות נפוצות
- צל אחד במקום שניים. ההבדל היחיד הנראה לעין בין צל בכתב יד לצל מעוצב.
- אנימציה
box-shadowעל hover. צובע מחדש כל פריים. לְהַנִיחַtransformוהצלבה-דעכה במקום. backdrop-filterמעל צבע אחיד. אין מה לטשטש, אז שום דבר לא קורה.- רקע אטום על לוח זכוכית. מסתיר את האפקט שכתבת זה עתה.
- ניומורפיזם על רקע לא תואם. האשליה תלויה בכך שהם יהיו זהים.
border-radius: 50%מצפה למלבן מעוגל. על אלמנט לא מרובע מקבלים אליפסה.- משלוח כל אחד מאלה ללא בדיקת ניגודיות. צללים וזכוכית שניהם מפחיתים ניגודיות, ושניהם קלים לכוונון יתר על צג טוב.
