הcss filter נכס נראה כמו קיצור דרך לעיצוב: שורה אחת הופכת תמונה לשחור-לבן, מטשטשת רקע או מחממת תמונה ממוזערת, ללא עורך תמונות מעורב. זהו זה. זה גם משנה את האופן שבו הדפדפן ממקם ומשכב את האלמנט עליו הוא מוחל, וזו הסיבה שמסנן שנוסף לאפקט ריחוף יכול לשבור בשקט שלושה רכיבים נפתחים.
מדריך זה מכסה מה כל פונקציית סינון עושה לערכי הפיקסלים, מדוע אותן פונקציות בסדר שונה מייצרות תמונה שונה, כיצד מסננים מתנהגים בפריסה ובאנימציה, והיכן הם עולים ביצועים. זה משתמש בחינם מחולל מסנן CSS כדי לבנות את ההצהרות, אבל כל דוגמה היא CSS רגיל אתה יכול להדביק בכל מקום.
TL;DR: הcss
filterתכונה מחילה אפקטים גרפיים כגון טשטוש, בהירות, ניגודיות, גווני אפור, ספיה, רוויה, הפוך, גוון-סיבוב ואטימות על אלמנט וכל מה שבתוכו, לפי סדר כתיבת הפונקציות כל ערך מלבדnoneיוצר גם הקשר הערמה והופך לבלוק המכיל עבור ילדים קבועים וממוקמים לחלוטין, וזו הסיבה הרגילה של " המודאל שלי תקוע בתוך כרטיס". מחולל מסנן Toolz CSS בונה את ההצהרה עם מחוונים ותצוגה מקדימה חיה, כותב רק את הפונקציות ששינית, ומריץ צד לקוח, בחינם, ללא הרשמה.
מהו מאפיין מסנן ה-CSS?
המאפיין מסנן CSS מחיל אפקטים של עיבוד תמונה על אלמנט לפני שהוא מצויר בדף האפקט מכסה את האלמנט's עיבוד שלם: הרקע שלו, גבולות, טקסט, תמונות ורכיבי צאצא. זה מוגדר ב-W3C מודול אפקטי סינון רמה 1 ונתמך בכל הדפדפנים הנוכחיים; ה התייחסות MDN למסנן מפרט פרטי תאימות.
הצהרה היא רשימה מופרדת ברווח של פונקציות סינון:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
הפונקציות רצות משמאל לימין כל אחת לוקחת את הפלט של הקודמת כקלט שלה, וזה המפתח להבנה למה הסדר חשוב.
מסננים אינם משנים את קובץ התמונה הדפדפן מחיל אותם בכל פעם שהוא מצייר, כך שהמקור נשאר ללא נגיעה ותוכל לשנות או להסיר את האפקט עם שורה אחת של CSS.
מה עושה כל פונקציית סינון?
לכל פונקציה יש ערך זהות שמשאיר את האלמנט ללא שינוי מחולל Toolz משתמש בזה כדי לשמור על הפלט קצר: כל פונקציה שנותרה בערך הזהות שלה מושמטת מה-CSS.
| פונקציה | מה שזה עושה | זהות Identity | טווח מחוון גנרטור |
|---|---|---|---|
blur() |
טשטוש גאוס עם הרדיוס הנתון | 0px |
0 עד 20 פיקסלים |
brightness() |
מכפיל כל ערוץ צבע | 100% |
0 עד 200% |
contrast() |
דוחף ערוצים הרחק או לכיוון אמצע אפור | 100% |
0 עד 200% |
saturate() |
מגביר או מקטין את עוצמת הצבע | 100% |
0 עד 200% |
grayscale() |
מתערבב לעבר אפור בעל בהירות שווה | 0% |
0 עד 100% |
sepia() |
משתלב לכיוון גוון חום חם | 0% |
0 עד 100% |
invert() |
הופך כל ערוץ לכיוון ההפוך שלו | 0% |
0 עד 100% |
hue-rotate() |
מסובב צבעים סביב גלגל הצבעים | 0deg |
0 עד 360 מעלות |
opacity() |
הופך את האלמנט לשקוף יותר | 100% |
0 עד 100% |
המפרט מאפשר ערכים מעבר לחלק מהטווחים הללו, כגון brightness(300%). המחוונים מכסים את הטווחים המועילים להתאמות בסגנון צילום; אתה יכול להקליד ערך גדול יותר ב-CSS שלך ביד.
המפרט גם מגדיר drop-shadow(), אשר הגנרטור אינו כולל. בניגוד box-shadow, drop-shadow() עוקב אחר הצורה הנראית לעין של תמונות שקופות כגון אייקוני PNG, ולא את הקופסה המלבנית של element's. עבור צללים מלבניים, ה מדריך צללים מכסה את הנכס הגמיש יותר.
כיצד מסנני הצבע משנים ערכי פיקסלים?
רוב מסנני הצבע הם אריתמטיקה פשוטה בערוצים האדומים, הירוקים והכחולים, כל אחד מהם מטופל כמספר מ-0 עד 1. מפרט אפקטי המסנן מגדיר כל אחד כנוסחה או מטריצה של 3 על 3. עבדו על כמה צבעים, הם הופכים להיות צפויים.
בהירות (150%) מכפיל כל ערוץ ב-1.5. אפור בינוני של rgb (100, 100, 100) הופך ל-rgb (150, 150, 150). ערכים שיעברו את 255 נחתכים, וזו הסיבה שהבהירות הגבוהה שוטפת את הדגשות ללבן טהור.
ניגודיות (200%) חל (ערך - 0.5) × 2 + 0.5 על כל ערוץ.A אפור כהה ב 0.25 (כ 64) הופך (0.25 - 0.5) × 2 + 0.5 = 0, שחור.A אפור בהיר ב 0.75 הופך 1.0, לבן הכל מתפשט הרחק מן האמצע.
גווני אפור (100%) מחליף כל פיקסל באפור המבוסס על בהירות, תוך שימוש במשקלים של 0.2126 לאדום, 0.7152 לירוק ו-0.0722 לכחול. אדום טהור, rgb (255, 0, 0), הופך ל-0.2126 × 255 = כ-54, אז rgb (54, 54, 54). ירוק טהור הופך לאפור בהיר בהרבה של כ-182. לכן המרה בגווני אפור שומרת על התחושה שירוק בהיר יותר מאדום.
ספיה (100%) מערבב ערוצים עם מקדמים בעלי משקל חם עבור פלט אדום הנוסחה היא 0.393R + 0.769G + 0.189B. לבן נכנס כמו (1, 1, 1) ויוצא בערך (1.35, 1.20, 0.94), אשר קליפס ל-rgb (255, 255, 239): לבן הופך לקרם קלוש.
נתונים אלה מגיעים מיישום המפרט's נוסחאות ישירות. על המסך, עיגול וניהול צבע יכולים להעביר תוצאה ביחידה או שתיים.
מדוע סדר פונקציות הסינון משנה את התוצאה?
מסננים מוחלים ברצף, כך שכל פונקציה עובדת על הפונקציה הקודמת's פלט. כאשר פונקציה מסירה מידע, כגון הסרת צבע בגווני אפור, לכל דבר שפועל אחריה יש פחות מה לעבוד איתו.
קח כחול טהור, rgb (0, 0, 255), והחל גווני אפור וספיה ב-100% בשני ההזמנות.
filter: grayscale(100%) sepia(100%);
- תחילה בגווני אפור: לכחול יש בהירות 0.0722, כך שהפיקסל הופך לאפור כהה של 0.0722 בכל ערוץ, בערך rgb (18, 18, 18).
- ספיה שנייה: אדום הופך ל-0.0722 × (0.393 + 0.769 + 0.189) = 0.0975, ירוק הופך ל-0.0722 × 1.203 = 0.0869, כחול הופך ל-0.0722 × 0.937 = 0.0677.
- תוצאה: בערך rgb(25, 22, 17), חום חם כהה מאוד.
filter: sepia(100%) grayscale(100%);
- ספיה תחילה: אדום הופך ל-0.189, ירוק 0.168, כחול 0.131, חום כהה.
- שני בגווני אפור: הבהירות היא 0.2126 × 0.189 + 0.7152 × 0.168 + 0.0722 × 0.131 = 0.170.
- תוצאה: בערך rgb(43, 43, 43), אפור ניטרלי ללא גוון כלל.
אותן שתי פונקציות, סדר שונה, ותוצאה אחת היא גוון בעוד שהשנייה לא. הכלל הכללי: שים פונקציות להסרת צבע תחילה אם אתה רוצה שפונקציה מאוחרת יותר תגוון את התוצאה, ואחרון אם אתה רוצה תמונה סופית ניטרלית.
המחולל תמיד כותב פונקציות בסדר קבוע אחד: טשטוש, בהירות, ניגודיות, רוויה, גווני אפור, ספיה, הפוך, גוון-סיבוב, אטימות אז גווני אפור תמיד באים לפני ספיה, מה שנותן את הגרסה הגונה אם אתה צריך סדר אחר, העתק את ה-CSS וסדר מחדש את הפונקציות ביד.
מה מייצרים הקביעות המוגדרות מראש?
המחולל נפתח על הקביעה המוגדרת מראש של Vintage. אלו ההצהרות המדויקות שכל הגדרה מראש כותבת:
| מוגדר מראש | CSS שנוצר |
|---|---|
| אף אחד | filter: none; |
| גווני אפור | filter: grayscale(100%); |
| וינטג' | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| חם | filter: brightness(105%) saturate(140%) sepia(25%); |
| מגניב | filter: saturate(120%) hue-rotate(200deg); |
| דרמטי | filter: brightness(90%) contrast(150%) saturate(120%); |
| דהוי | filter: brightness(110%) saturate(80%) opacity(80%); |
| הפוך | filter: invert(100%); |
| לְטַשׁטֵשׁ | filter: blur(4px); |
Presets הם נקודות התחלה לחץ על Warm, ולאחר מכן גרור את Blur ל-2px, והפלט הופך filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. לחץ על אין או איפוס והוא חוזר אל filter: none;.
ההגדרה המוגדרת מראש של Cool חזקה יותר ממה ששמה מרמז: סיבוב גוון של 200 מעלות מזיז תפוזים לכיוון כחול וכחול לכיוון כתום. זה נקרא "cool" על תמונות חמות וכשינוי צבע כבד בכל השאר.
התצוגה המקדימה היא מדגם קבוע של שיפוע כחול, כתום וירוק עם כמה צורות, לא העלאה. זה מראה איך כל פונקציה מזיזה צבע, ניגודיות וטשטוש, אבל תמיד בדוק את ה-CSS המועתק בתמונה האמיתית שלך, כי מסנן שמחמיא לשיפוע יכול להיראות בוצי על גוון העור.
איך בונים פילטר עם הגנרטור?
- פתח את מסנן מחולל CSS. זה מתחיל ב-Vintage.
- בחר הגדרה מראש הקרובה ביותר למראה הרצוי, או לחץ על אין כדי להתחיל ללא מסננים.
- גרור את המחוונים. התצוגה המקדימה מתעדכנת תוך כדי תנועה, וקו ה-CSS שנוצר מתעדכן איתה.
- לחץ על העתק CSS כדי לשים את המלא
filter: ...;הצהרה על הלוח שלך. - הדבק אותו על הבורר עבור התמונה או האלמנט שלך, ולאחר מכן בדוק אותו בדף האמיתי.
רק פונקציות שהשתנו מופיעות בפלט, כך שהזזת Brightness חזרה ל-100% בדיוק מסירה brightness() מהקו במקום לעזוב brightness(100%) מאחור.
מדוע מסנן שובר אלמנטים קבועים וממוקמים לחלוטין?
כי כל filter מלבד none הופך את האלמנט לבלוק מכיל עבור צאצאיו הממוקמים באופן מוחלט וקבוע, ויוצר הקשר ערימה חדש. מפרט אפקטי המסנן קובע את שניהם. זה לא באג בדפדפן; כך מוגדר המאפיין.
בפועל, זה מייצר שני באגים קלאסיים.
מודאלי קבוע שאינו קבוע. בדרך כלל position: fixed מציב אלמנט ביחס לנמל התצוגה. בתוך אב קדמון מסונן הוא ממוקם ביחס לאותו אב קדמון במקום:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
ירידה מוסתרת מתחת לשכנים. האלמנט המסונן הופך להקשר הערימה שלו, אז ילד עם z-index: 1000 כבר לא יכול להתעלות מעל אלמנטים מחוץ לכרטיס הוא נמצא רק למעלה בתוך הכרטיס.
התיקונים זהים לשניהם החל את המסנן על אלמנט צר יותר, כגון img בתוך הכרטיס ולא בכרטיס עצמו. או render the modal or dropdown outside the filtered element, which is what "portal" components in UI frameworks do. The transform תכונה גורמת לאותה התנהגות בלוק מכיל, אז ה מדריך טרנספורמציה של CSS שימושי אם אתה פוגש באג זה עם שני המאפיינים במשחק.
איך מסננים בהשוואה למסנן רקע ואטימות?
מספר מאפיינים חופפים לפונקציות הסינון, ובחירה נכונה מונעת תופעות לוואי.
| נכס | משפיע | שימוש אופייני |
|---|---|---|
filter |
האלמנט ותכניו | אפקטי תמונה, לוגו בגווני אפור, טשטוש על תמונה |
backdrop-filter |
מה שלא יהיה מאחורי האלמנט | לוחות זכוכית חלביים, שכבות מטושטשות |
opacity |
האלמנט ותכניו | דהיית אלמנט פנימה או החוצה |
filter: opacity() |
האלמנט ותכניו | שקיפות כחלק משרשרת מסננים |
mix-blend-mode |
איך האלמנט משתלב עם מה שעומד מאחוריו | שכבות צבע, אפקטים דואוטונים |
backdrop-filter לוקח את אותן פונקציות כמו filter, אבל מיישם אותם על התוכן שמאחורי האלמנט, וכך לוחות זכוכית מטשטשים את הדף שמתחתיו. ה מחולל זכוכיתמורפיזם בונה את ההצהרות האלה.
לדהיית אלמנט בפני עצמו, פשוט opacity היא הבחירה הברורה יותר. opacity() בתוך שרשרת סינון שימושי כאשר אתה כבר כותב מסנן ורוצה שקיפות באותה שורה.
האם אתה יכול להנפיש מסנני CSS?
כן כן. filter ניתן להנפשה, ודוגמה נפוצה היא לוגו בגווני אפור שהופך לצבע בריחוף:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
הדפדפן מתערב בין grayscale(100%) ו none בגלל none מתייחסים אליו כאל הפונקציות התואמות בערכי הזהות שלהן אינטרפולציה פועלת בצורה נקייה כאשר שני המצבים מפרטים את אותן פונקציות באותו סדר אם רשימות ההתחלה והסיום שונות לפי הסדר, התוצאה יכולה לקפוץ במקום להנפיש בצורה חלקה, אז כתוב את שני המצבים עם אותו סדר פונקציות.
האם מסנני CSS פוגעים בביצועים?
מסננים עולים זמן רינדור, וטשטוש עולה הכי הרבה דפדפנים בדרך כלל מריצים מסננים ב-GPU, מה שהופך את רוב מסנני הצבע לזולים. blur() שונה: העבודה גדלה הן עם רדיוס הטשטוש והן עם גודל השטח, כך שרדיוס גדול על אלמנט מסך מלא, במיוחד כזה שמחייה או יושב מאחורי תוכן גלילה, יכול להפיל פריימים במכשירים איטיים יותר.
גבולות מעשיים:
- שמור על רדיוסי טשטוש קטנים על אלמנטים גדולים, והימנע מהנפשת הרדיוס עצמו.
- טשטוש אלמנט קטן יותר או תמונה מוקטנת במקום עטיפה של עמוד שלם.
- לתנועה, אנימטיב
transformוopacity, אילו דפדפנים מטפלים ביעילות, ושומרים על המסנן סטטי. - בדיקה בטלפון בינוני, לא רק בשולחן עבודה.
שאלות נפוצות לגבי השפעות ספציפיות
כמה אפקטים עולים לעתים קרובות מספיק כדי לכתוב.
תמונה בשחור-לבן: filter: grayscale(100%); ערכים מתחת ל-100% משאירים קצת צבע, אז grayscale(50%) נותן מבט מושתק.
תמונת רקע מעומעמת מאחורי טקסט: filter: brightness(60%); על רכיב התמונה. בדוק את ניגודיות הטקסט לאחר מכן במקום לנחש; ה בודק ניגודיות צבעים נותן יחס WCAG.
מצב כהה גס עבור מסמך או דיאגרמה משובצים: filter: invert(100%) hue-rotate(180deg); היפוך הופך בהיר וכהה אך גם הופך גוונים להפכים שלהם; סיבוב הגוון ב-180 מעלות מחזיר את רוב הצבעים לכיוון הגוון המקורי שלהם. זה קירוב, ותמונות בפנים ייראו לא נכונות, אז אל תכלול אותן.
גוון שחור ולבן: filter: grayscale(100%) sepia(60%); כפי שעבד למעלה.
הסט המלא של בוני CSS, כולל צל טקסט וטרנספורמציות, נמצא על רכזת כלי CSS.
הגנרטור פרטי?
כן התצוגה המקדימה וה-CSS נוצרים בדפדפן שלך עם JavaScript שום דבר לא מועלה, אין תמונה להעלות מלכתחילה, והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף העתקת ה-CSS נחשבת למגבלת שימוש יומית ומתעדת רק שהעתקה קרתה.
