איבדתי את רוב אחר הצהריים לשיפוע פעם אחת. לא מסובך - רקע גיבור בדף שיווק של WP Adminify, כחול מותג דוהה לכתום מותג, אלכסוני. כתבתי linear-gradient(45deg, #4466EE, #E99537) וזה הלך בדרך הלא נכונה אז ניסיתי -45deg. גם לא בסדר. לאחר מכן 135deg, מה שהיה נכון, והמשכתי הלאה מבלי להבין מדוע, שזו התוצאה הגרועה ביותר האפשרית כי היא מבטיחה לך ' אבין את זה שוב לא נכון.
הסיבה היא שזוויות שיפוע CSS אינן הזוויות שלמדת בשיעור מתמטיקה. 0deg נקודות למעלה, והזווית גדלה בכיוון השעון. בטריגונומטריה - וב-SVG, ובקנבס - 0 נקודות ימינה וזוויות גדלות נגד כיוון השעון. שתי מוסכמות שונות, אחת בעלת מראה זהה deg יחידה, וללא הודעת שגיאה כשאתה בוחר את ההודעה הלא נכונה. זה 's כתוב בצורה ברורה ב מודול תמונות CSS רמה 3, ופשוט מעולם לא קראתי אותו.
That's המקרה עבור מחולל חזותי באנקדוטה אחת. ה מחולל שיפוע ב-Toolz.dev נותן לך תצוגה מקדימה חיה, עצירות צבע הניתנות לגרירה ו-CSS שניתן להעתיק עבור שיפועים ליניאריים, רדיאליים וחרוטים - כך ששאלת הזווית עונה על עצמה במקום לעלות לך אחר הצהריים.
TL;DR: ב-css,
0degמצביע על טופ וזוויות רצות בכיוון השעון, אזto rightשווה90degואלכסון משמאל למעלה → מימין למטה הוא135deg, לא45deg. להשתמש מחולל שיפוע לראות את זה במקום לנחש את זה, ואת בוחר צבעים כדי לבחור עצירות שdon't go muddy in the middle. Gradients are<image>ערכים - בכל מקום בו תוכלו להשתמשurl(), אתה יכול להשתמש בשיפוע. כל צד הלקוח, ללא הרשמה.
מהו שיפוע CSS, מבחינה טכנית?
שיפוע אינו צבע. זה's an תמונה. עובדה יחידה זו מסבירה את רוב התחביר.
ל תמונות CSS רמה 3, linear-gradient(), radial-gradient(), והגרסאות החוזרות שלהן מייצרות ערך של סוג <image>. זה אומר בכל מקום שהמפרט מקבל url('photo.jpg'), הוא גם מקבל שיפוע: background-image, border-image, list-style-image, mask-image, content. זה גם אומר שיש לשיפועים אין ממדים מהותיים- הם נמתחים כדי למלא את הקופסה שאתה מכניס אותם, וזו הסיבה שאותו שיפוע נראה שונה על כפתור 200px וגיבור 1400px.
conic-gradient() הגיע מאוחר יותר וגר ב תמונות CSS רמה 4, לצד תחביר האינטרפולציה-צבע-מרחב I' יגיע למטה.
מה ' האם ההבדל בין ליניארי, רדיאלי וחרוט?
| ליניארי | רדיאלי | קוניק | |
|---|---|---|---|
| מסעות צבע | לאורך קו ישר | החוצה מנקודת מרכז | מסביב לנקודת מרכז |
| מוגדר על ידי | זווית או to <side> |
צורה (circle/ellipse), גודל, מיקום |
זווית התחלה, מיקום |
| להגיע לזה כאשר | רקעים, כפתורים, שכבות-על, סקרימים של תמונות | זרקורים, זוהרים, ויגנטים, רקעי רשת | תרשימי פשטידות, גלגלים צבעוניים, טבעות התקדמות, סקטורים קשיחים |
| מפרט | תמונות 3 | תמונות 3 | תמונות 4 |
| טריק קשה נותן לך | פסים | טבעות | טריזים / פרוסות פאי |
| טוב | מוסכמות הזווית | מילות מפתח בגודל משנות הכל | הזוויות כאן הן גם בכיוון השעון מ-12 o'שעון |
שיפועים ליניאריים - ומוסכמות הזווית
/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);
/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);
/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537); /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537); /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537); /* top-left → bottom-right */
התחייב את זה לזיכרון ואתה ' לעולם לא תחזור על אחר הצהריים שלי:
| מילת מפתח | זווית |
|---|---|
to top |
0deg |
to right |
90deg |
to bottom |
180deg (ברירת המחדל) |
to left |
270deg |
There's עוד עדינות אחת עם מילות המפתח הפינות. to bottom right עושה לא פשוט מתכוון 135deg. המפרט מגדיר אותו כזווית שנבחרה כך שקו השיפוע מאונך ל- אחר אלכסוני - שפירושו על קופסה לא מרובעת, to bottom right ו 135deg הפק תוצאות שונות בעליל. על ריבוע הם ' זהים. That's מסוג הדברים שאתה מבחין ב-11pm כאשר כרטיס נראה נכון בעיצוב ושגוי בעמודה צרה.
גרדיאנטים רדיאליים - היכן חיות מילות המפתח בגודל
/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);
/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);
/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);
ארבע מילות המפתח בגודל מחליטות היכן גמר אדמות עצירת צבע, נמדדות מהמרכז:
closest-side- הקצה הקרוב ביותר של הקופסהfarthest-side- הקצה הרחוק ביותרclosest-corner- הפינה הקרובהfarthest-corner- הפינה הרחוקה ביותר (זו ברירת המחדל)
שנה את מילת המפתח והשיפוע נראה כמו שיפוע אחר. זו הסיבה הנפוצה ביותר לשיפוע רדיאלי "won't do what I want", וזה הרבה יותר מהיר ללחוץ על ארבע האפשרויות ב- מחולל שיפוע מאשר לנמק על זה.
שיפועים חרוטיים - פשטידות, גלגלים וטבעות
צבע מטאטא חרוטים מסביב המרכז, החל מ-12 o'שעון והולך עם כיוון השעון (אותה מוסכמה כמו ליניארי - לפחות זה ' עקבי).
/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
#4466EE 0deg 144deg,
#E99537 144deg 270deg,
#34D399 270deg 360deg
);
/* Progress ring: conic + a mask */
.ring {
background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
mask: radial-gradient(circle, transparent 60%, #000 61%);
border-radius: 50%;
}
שֶׁז mask קו הוא כל הטריק מאחורי כל מחוון התקדמות סופגנייה שאתה ' אי פעם ראית, וזה 's בערך שש שורות של CSS במקום ספריית SVG.
איך אני שולט היכן נוחתים הצבעים?
הצבע מפסיק
תן עצירה תנוחה ואתה שולט במעבר תן עצירה שתיים עמדות ואתה מקבל יתרון קשה - אין אינטרפולציה בכלל.
/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);
/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);
/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
to right,
#4466EE 0 25%,
#E99537 25% 50%,
#34D399 50% 75%,
#0F172A 75% 100%
);
רמזים לאינטרפולציה (נקודת האמצע שעשית ' לא יודע שאתה יכול לזוז)
אחוז חשוף בין שני צבעים מזיזים את נקודת האמצע של 50/50. זו חתיכת תחביר השיפוע הכי לא בשימוש שאני מכיר:
/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);
/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);
השתמש בו עבור scrims תמונה. א to top, rgba(0,0,0,.8), transparent שכבת-על בדרך כלל אוכלת יותר מדי מהתמונה; להפיל א 35% רמז פנימה והחושך קורס לכיוון התחתית היכן שהכיתוב נמצא.
שיפועים חוזרים לדפוסים
.hatched {
background: repeating-linear-gradient(
45deg,
#0F172A 0 10px,
#1E293B 10px 20px
);
}
שורה אחת, ללא קובץ תמונה, ניתן להרחבה לאין שיעור. Just don't להחיל אותו על אלמנט של עמוד שלם ואז לתהות מדוע גלילה מגמגמת באנדרואיד בטווח בינוני - צביעה מחדש של שיפוע גדול שחוזר על עצמו במהלך הגלילה היא עבודה אמיתית עבור הקומפוזיטור.
למה השיפוע שלי נראה בוצי באמצע?
שתי סיבות נפרדות, ואנשים מערבבים ביניהן ללא הרף.
סיבה 1: אינטרפולציה של sRGB
כברירת מחדל, דפדפנים משלבים עצירות שיפוע ב-sRGB, ערוץ אחר ערוץ. עבור שני צבעים שיושבים זה ליד זה על הגלגל - כחול עד סגול, כתום עד אדום - זה ' בסדר. עבור צבעים משלימים הוא מייצר פס אפור מת באמצע, כי נקודת האמצע המתמטית של שני צבעי sRGB מנוגדים הוא אפור בערך. כחול עד צהוב הוא העבריין הקלאסי.
CSS Images Level 4 מתקן זאת על ידי מתן שם למרחב האינטרפולציה:
/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);
/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);
oklch שומר על קלילות נתפסת וכרומה יציבה על פני התערובת. תמיכת דפדפן עבור in <colorspace> התחביר טוב ב-Chrome, Safari ו-Firefox הנוכחיים, אבל אם אתה צריך לתמוך בדפדפנים ישנים יותר, החזרה היא התיקון הידני הישן: הוסף עצירת ביניים ונווט את התערובת בעצמך.
סיבה 2: דוהה ל transparent- והטעות השנייה שלי
transparent מוגדר כ rgba(0, 0, 0, 0). שָׁקוּף שחור. אם הדפדפנים ביצעו אינטרפולציה נאיבית, linear-gradient(#E99537, transparent) היה מחליק דרך כתום כהה ואפור יותר בהדרגה בדרכו לכלום.
דפדפנים מודרניים don' אל תעשה את זה - המפרט דורש אינטרפולציה פנימה מכפיל מראש אלפא חלל, אשר עוקף את הבעיה לחלוטין.But ישן יותר WebKit לא עשה זאת, ואני שלחתי גיבור באתר לקוח שנראה נקי על המכונה שלי ונראה כמו כתם מלוכלך על iPad בן השנתיים שלהם הגרסה חסינת כדורים, אשר עולה לך כלום ועדיין עובד בכל מקום:
/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));
אני עדיין כותב את זה כך מתוך רקמת צלקת.
ממה עלי להיזהר עם נגישות?
הניגודיות צריכה להחזיק על פני כל השיפוע
WCAG 2.1 SC 1.4.3 דורש 4.5:1 עבור טקסט רגיל ו-3:1 עבור טקסט גדול (18pt, או 14pt מודגש). שיפוע אומר שצבע הרקע שלך שונה בכל פיקסל, ולכן יש לעמוד בדרישה מול המקרה הגרוע ביותר נקודה - התיקון הבהיר ביותר אם הטקסט שלך לבן, הכהה ביותר אם הוא 's שחור.
התבנית האמינה היא להפסיק לנסות להפוך את השיפוע עצמו לקריאה, ולשכב סריג למעלה:
.hero {
background:
linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
linear-gradient(135deg, #4466EE, #E99537);
color: #fff;
}
כעת הטקסט יושב על טווח כהה ידוע ללא קשר למה שהשיפוע שמתחתיו עושה. בדוק את הקצוות עם בוחר צבעים לפני המשלוח - הליכת הניגודיות המלאה, כולל צבע המותג ששלחתי ב-2.38:1, נמצאת ב- מדריך Color Picker.
טקסט שיפוע הוא דלת פח
זה זה שבעצם שרף אותי בדף נחיתה של הפקה:
.gradient-heading {
background: linear-gradient(135deg, #4466EE, #E99537);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
אם background-clip: text does't להגיש בקשה מכל סיבה שהיא - דפדפן ישן, הרחבה חוסמת תמונות רקע, גיליון סגנונות הדפסה - אתה'נשאר עם color: transparent וא כותרת בלתי נראית. הטקסט עדיין ב-DOM, אז קורא מסך קורא אותו בשמחה ואין לך מושג שמשהו לא בסדר השתמש @supports לשער את זה:
.gradient-heading { color: #0F172A; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.gradient-heading {
background: linear-gradient(135deg, #4466EE, #E99537);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
צבע אחיד כברירת מחדל, שיפוע כשיפור. That' איך זה היה צריך להיכתב בפעם הראשונה.
שיפועים מונפשים זקוקים לפתח מילוט בתנועה
אתה יכול't שיפוע מעבר צבעים- הדפדפן זכה 't אינטרפולציה בין שניים <image> ערכים. מה שאנשים מחייה במקום זה background-position על פני שיפוע גדול מדי:
.animated {
background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
background-size: 600% 600%;
animation: shift 12s ease infinite;
}
@keyframes shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.animated { animation: none; }
}
הבלוק האחרון אינו אופציונלי. תנועת רקע מתמשכת היא טריגר מתועד להפרעות וסטיבולריות, וכבוד prefers-reduced-motion הוא שלושה קווים.
(החלופה המודרנית היא רישום נכס בהתאמה אישית עם @property אז הסוג שלו ידוע ו לכן ניתן להנפשה, ואז להשתמש בו בתוך השיפוע. It's נקי, it's נתמך בדפדפנים הנוכחיים, ו-it's עדיין שווה את מגן התנועה המופחתת.)
איך אני בונה אחד עם הכלי?
- פתח את מחולל שיפוע.
- בחר סוג - ליניארי, רדיאלי או חרוטי.
- לחץ על עצירה כדי לשנות את צבעו; גרור אותו כדי להזיז את מיקומו. לחץ על הסרגל כדי להוסיף עצירה; גרור אותו כדי להסיר אותו.
- לליניארי גרור את הזווית צפה במספר: כאן ה
0deg-מוסכמה של האם-אפ מפסיקה להיות מופשטת. - עבור רדיאלי, מחזור ארבע מילות מפתח גודל ולצפות מה משתנה. It's הדרך המהירה ביותר לבנות אינטואיציה עבורם.
- העתק את ה-CSS.
שני צבעים הם בדרך כלל התשובה הנכונה. כל שיפוע I' התחרט על חמש עצירות.
שיפועים ששווה לגנוב
/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);
/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);
/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);
/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);
/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
הזן את צבעי המותג שלך לתוך בוחר צבעים ראשית, קח את ערכי ה-HSL, ואז שנה קלילות ולא גוון - זה ' איך אתה מקבל עצירות שמתמזגות בצורה נקייה במקום להילחם.
שאלות נפוצות
למה שיפוע ה-CSS שלי הולך בכיוון הלא נכון?
מכיוון שזוויות שיפוע CSS מתחילות ב- טופ ולהגדיל בכיוון השעון, בניגוד לטריגונומטריה, SVG או קנבס, שמתחילים מימין והולכים נגד כיוון השעון. to right הוא 90deg, to bottom הוא 180deg, ואלכסון משמאל למעלה לימין למטה הוא 135deg, לא 45deg.
האם אני עדיין צריך -webkit- קידומות עבור שיפועים CSS?
לא עבור linear-gradient(), radial-gradient(), או conic-gradient()- שלושתם עובדים ללא קידומת בכל דפדפן נוכחי. המקום היחיד שבו הקידומת עדיין זוכה לשמירה הוא -webkit-background-clip: text לטקסט שיפוע, היכן שספארי ישן יותר צריך את זה. שלח את שתי ההצהרות לשם.
האם אני יכול להנפיש שיפוע CSS?
לא ערך השיפוע עצמו - שיפוע הוא <image>, והדפדפן זכה 't אינטרפולציה בין שתי תמונות. הפתרון הסטנדרטי הוא להפוך את השיפוע לגדול בהרבה מהקופסה שלו (background-size: 600% 600%) ולהחיות background-position. הגישה המודרנית רושמת נכס מותאם אישית עם @property אז יש לו סוג ידוע והופך להנפשה בתוך השיפוע. כך או כך, שמור עליו prefers-reduced-motion.
למה השיפוע שלי נראה אפור או בוצי באמצע?
כמעט תמיד אינטרפולציה של sRGB בין צבעים שיושבים זה מול זה על הגלגל - כחול לצהוב הוא הקלאסי. נקודת האמצע של sRGB שלהם באמת קרובה לאפור. תקן את זה על ידי מתן שם למרחב אינטרפולציה טוב יותר, linear-gradient(in oklch, to right, blue, yellow), או על ידי הוספת עצירת ביניים כדי לנווט את התערובת בעצמך.
למה דועך ל transparent נראה מלוכלך?
transparent מוגדר כ rgba(0, 0, 0, 0)- שקוף שחור. הדפדפנים הנוכחיים מבצעים אינטרפולציה במרחב אלפא מוכפל מראש כך שזו כבר לא בעיה, אבל WebKit הישן יותר גרר את השיפוע באפור בדרכו החוצה. אם אתה תומך במכשירים ישנים, כתוב את גרסת האפס אלפא של הצבע שלך במפורש: rgba(233, 149, 55, 0) במקום transparent.
איך אני עושה גבול שיפוע?
שתי אפשרויות. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; הוא שורה אחת אבל הורג בשקט border-radius. אם אתה צריך פינות מעוגלות, שכבה שני רקעים עם שונה background-clip ו background-origin ערכים, או לשים את השיפוע על פסאודו-אלמנט מאחורי התיבה.
האם שיפוע CSS רע לביצועים?
שיפוע סטטי הוא זול - זול יותר מהורדת תמונה מקבילה, והוא משתנה לכל גודל בחינם. העלויות מופיעות כאשר שיפוע גדול חייב להיות נצבע מחדש שוב ושוב: שיפוע חוזר של עמוד שלם במהלך הגלילה, או מספר שיפועים שכבות מתחת ל-a backdrop-filter. אם דף מרגיש דביק בנייד, זה ' זה הדבר הראשון I'd בדוק ב-DevTools' פרופיל צבע.
כמה עצירות צבע צריך להיות לשיפוע?
שתיים, רוב הזמן.שלושה כאשר אתה רוצה לנווט את התערובת דרך גוון ספציפי. מעבר לכך אתה & #39; בדרך כלל מגיעים למשהו ששיפוע רשת (מספר רדיאלים ממוקמים) עושה טוב יותר, וכל עצירה נוספת היא דבר נוסף שיכול להיראות לא בסדר בתצוגה של מישהו אחר 's.
איך אני עושה רקע שיפוע ב-CSS?
הגדר את background (או background-image) תכונה לפונקציית שיפוע. background: linear-gradient(to right, #4466EE, #E99537); צובע תערובת משמאל לימין ללא קובץ תמונה כלל. radial-gradient() ו conic-gradient() בצע את אותו דפוס עבור תערובות מעגליות וסוחפות. מכיוון שהתוצאה נוצרת במקום הורדה, היא נשארת חדה בכל גודל.
כיצד אוכל ליצור טקסט שיפוע ב-CSS?
שים את השיפוע על background, ואז להגדיר background-clip: text (עם ה -webkit- קידומת לספארי) ו color: transparent, אז האותיות ממולאות על ידי השיפוע במקום צבע אחיד. שמור את הטקסט האמיתי בסימון במקום לאפות אותו בתמונה, כך שהוא יישאר לבחירה וקריא על ידי קוראי המסך.
עוטף
שיפועים הם אחת מתכונות ה-CSS הבודדות שנותנות לך עושר ויזואלי אמיתי עבור עלות רשת אפסית - ללא בקשת תמונה, ללא בעיות ביחס היבט, ללא רזולוציה לפי בנייה התחביר קטן המלכודות הן ספציפיות וניתנות לדעת: מוסכמות הזווית, מילות המפתח בגודל רדיאלי, בוץ sRGB ודלת הכותרת הבלתי נראית בטקסט שיפוע.
בנה אותם במקום שבו תוכל לראות אותם. The מחולל שיפוע הוא בחינם, פועל כולו בדפדפן שלך, ומעתיק CSS נקי. חבר אותו עם ה בוחר צבעים לעצירות שמחזיקות את הניגודיות שלהן, וה ממיר CSS כאשר אתה' מוכנים להטביע אותו. שאר המדף הקדמי נמצא ב- מדריך כלי פרודוקטיביות למפתחים.
