אפקטים חזותיים

עומק ומרקם

• הוסיפו שכבות של צללים כדי ליצור אפקטים של עומק רך ומציאותי.
• בצורות לא מלבניות או בקובצי PNG שקופים, צריך להשתמש ב-filter: drop-shadow() במקום ב-box-shadow.
• שימוש ב-mix-blend-mode וב-background-blend-mode לשכבות-על של תאורה (הגבלת ההיקף באמצעות isolation: isolate)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

מעברי צבע וcolor-mix()

צריך להשתמש ב-in oklch או ב-in oklab כדי לציין במפורש את מרחב הצבעים של האינטרפולציה למעברי צבעים או ל-color-mix().

• ‫in oklch שומר על הצבעוניות טוב יותר, אבל יכול לחרוג בקלות רבה יותר מסולם הצבעים של המכשיר, במיוחד כשיש הבדלים גדולים יותר בין הצבעים
• in oklab נשאר בסולם הצבעים בקלות רבה יותר (בהנחה שנקודות הקצה נמצאות בסולם הצבעים), אבל יכול ליצור צבעים דהויים ופחות רוויים באמצע, במיוחד כשמבצעים אינטרפולציה בין גוונים מנוגדים.
• אל תשתמשו ב-in srgb אלא אם יש לכם סיבה ספציפית לעשות זאת (למשל, אתם בונים כלי לבחירת צבעים שצריך לבצע אינטרפולציה ב-srgb).

חלופי

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

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

ואז להשתמש בזה ככה:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• חשוב: אם אתם משתמשים בשיטה הזו, ודאו שתמיד יש הוראות מקדימות לא ריקות של שיפוע צבעים בלעדיה, אחרת תהיה שגיאת תחביר בדפדפנים ישנים יותר.
• לא צריך את זה בשביל color-mix(). אם דפדפן תומך ב-color-mix(), הוא תומך גם בארגומנט in <color-space> שלו.

דפוסים

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

דוגמאות מופיעות בהמשך.

פסים אנכיים ברוחב 1em כל אחד:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

פסים באלכסון ברוחב 1em כל אחד:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

תבנית לוח שחמט עם 1em ריבועים:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

נקודות ברדיוס של .5em במרווחים של 2em (אופקית/אנכית – מכפילים ב-sqrt(2) כדי לקבל את המרחק באלכסון):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

תרשים עוגה פשוט:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

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