הסבר על האפקטים של סינון CSS

מבוא

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

העבר, ההווה והעתיד של אפקטים של פילטר

אפקטים של סינון נוצרו כחלק ממפרט Scalable Vector Graphics (SVG). הם נוצרו כדי להחיל מספר אפקטים שונים של תמונה המבוססים על פיקסלים על ציור וקטורי. עם הזמן, כשספקי הדפדפנים הוסיפו לדפדפנים שלהם יכולות SVG, התבררה התועלת שבמסננים. רוברט או'קלהן (Robert O’Callahan) מ-Mozilla הגה את הרעיון המבריק לשימוש במסנני SVG באמצעות יישום של CSS בתוכן HTML 'רגיל'. רוברט יצר אב-טיפוס של גרסה מוקדמת שהוכיחה עד כמה השילוב של פילטרים וסגנון CSS יכול להיות חזק. בקבוצות העבודה של CSS ושל SVG ב-W3C החליטו לשלב את השימוש במסננים ל-HTML וגם ל-SVG בסגנון CSS. כתוצאה מכך, הוקם המאפיין 'filter' ל-CSS. נכון לעכשיו, צוות משימה משותף של אנשים שעובדים על CSS ו-SVG משקיע הרבה עבודה כדי להפוך את המסננים לשימושי לכולם. כאן תוכלו למצוא את המפרט הנוכחי של כל הפריטים האלה.

חיים חדשים לנכס ה-CSS 'filter'

לפעמים Deja Vu מכה מפתח אתרים כשהוא רואה את המילה 'filter' בסגנונות CSS. הסיבה לכך היא שבגרסאות ישנות של Internet Explorer היה מאפיין 'filter' שנחשף באמצעות CSS כדי לבצע פונקציונליות מסוימת לפלטפורמה. האפשרות הזו הוצאה משימוש לטובת הנכס הרגיל 'filter', שכיום הוא חלק מ-CSS3. לכן, כאשר אתם רואים 'סינון' באופן טבעי בכמה דפי אינטרנט ישנים, אין צורך להתבלבל. המאפיין החדש 'מסנן' הוא המקום שבו כל הפעולה נמצאת, וגרסאות חדשות של IE מטמיעות אותו באותו אופן כמו כל הדפדפנים המודרניים.

כיצד פועלים המסננים

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

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

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

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

מסננים שהוגדרו באמצעות SVG ו-CSS

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

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

איך להחיל מסנן CSS

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

div { { % mixin filter: grayscale(100%); % } }

כתוצאה מכך, התוכן בכל <div>הרכיבים בדף יהפוך לאפור. אפשרות מעולה ל לגרום לדף שלך להיראות כמו תמונת טלוויזיה משנות ה-40 של המאה ה-20.

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

div { { % mixin filter: grayscale(50%); % } }

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

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

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

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

אילו אפקטים של סינון זמינים באמצעות CSS

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

נבחן כל אחת מהן ונראה מה היא עושה.

גווני אפור(סכום)

הפעולה הזו ממירה את הצבע בתמונת הקלט לגוון אפור. ההגדרה 'סכום' קובעת כמה המרה תהיה באפור. אם הערך הוא 100%, אז הכול יהיה בגוון אפור. אם הערך הוא 0%, הצבעים לא ישתנו. אפשר להשתמש כאן במספר נקודה צפה (floating-point). אם אתם מעדיפים אותו על פני אחוזים, כלומר, 0 פועל כמו 0% ואילו 1.0 פועל באופן זהה ל-100%.

חום-ספיה(סכום)

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

רוויה(סכום)

הפעולה הזו מחילה אפקט של רוויית צבע על הצבעים ויוצרת מהם מראה מציאותי יותר. זה אפקט מגניב שיכול לגרום לתמונות להיראות כמו פוסטרים או סרטים מצוירים.האפקט הזה גם מאפשר להשתמש בערך שגדול מ-100% כדי להדגיש באמת את הרוויה. בהחלט אפקט שיכול לגרום לדברים להיראות די מוזרים!

סיבוב גוון(זווית)

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

invert(amount)

האפקט הזה הופך את הצבעים, כך שאם ה'סכום' הוחל ב-100%, הפלט נראה כמו תמונת דחייה שלילית שהייתה ישנה במצלמות הימים הקודמים של המצלמות! בדיוק כמו קודם, שימוש בערכים קטנים מ-100% יחיל בהדרגה את אפקט ההיפוך.

opacity(amount)

אם אתם רוצים שהתוכן המסונן ייראה שקוף למחצה, זו האפשרות שמתאימה לכם. הערך 'amount' מגדיר עד כמה הפלט יהיה אטום. כלומר, ערך של 100% הוא אטום לחלוטין, כך שהפלט יהיה זהה לחלוטין לקלט. ככל שהערך יורד מתחת ל-100%, תמונת הפלט תהיה פחות אטומה (שקופה יותר) ויופיעו פחות ופחות פרטים. כמובן שפירוש הדבר שאם הוא חופף למשהו אחר בדף, הדברים שמתחתיו יתחילו להיות גלויים. המשמעות של 'סכום' של 0% היא שהוא ייעלם לחלוטין. עם זאת, עדיין אפשר להגדיר שאירועים כמו קליקים על העכבר וכו' יתרחשו באובייקטים שקופים לחלוטין. כדאי להשתמש באפשרות הזאת אם אתם רוצים ליצור אזורים קליקביליים בלי להציג דבר.

הפעולה הזו פועלת באותו אופן כמו נכס 'אטימוּת' שאתם כבר מכירים. באופן כללי, המאפיין 'אטימות' ב-CSS אינו האץ באמצעות חומרה, אבל דפדפנים מסוימים שמטמיעים מסננים באמצעות האצת חומרה יאיצו את גרסת המסנן של השקיפות כדי להשיג ביצועים טובים בהרבה.

בהירות(סכום)

הפעולה הזו זהה לבקרת הבהירות בטלוויזיה. הפרמטר הזה מתאים את הצבעים בין שחור לחלוטין לצבע המקורי באופן יחסי לפרמטר 'amount'. אם תגדירו את הערך הזה ל-0%, לא תראו דבר חוץ מ-100%. עם זאת, ככל שהערך עולה לכיוון 100%, התמונה המקורית מתבהרת, עד שתגיע ל-100% כשהיא זהה לתמונת הקלט. כמובן שאפשר פשוט להמשיך - לכן הגדרת ערך של 200% תהפוך את התמונה לבהירה פי שניים מהמקור - מעולה להתאמת התמונות בתאורה חלשה!

ניגודיות(סכום)

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

טשטוש(רדיוס)

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

drop-shadow(shadow)

זה כל כך כיף שיש לכם אפשרות ליצור תוכן שנראה כאילו הוא בחוץ בשמש עם צל על הקרקע מאחוריו, וזה כמובן מה שעושים בעזרת 'הטלת צללית'. התכונה הזו יוצרת צילום מסך של התמונה, יוצרת לה צבע אחד, מטשטשת אותה ואז מקזזת קצת את התוצאה כך שתיראה כמו צל של התוכן המקורי. הפרמטר 'shadow' שהועבר הוא קצת יותר מורכב מערך יחיד. זוהי סדרה של ערכים המופרדים באמצעות רווח – וגם חלק מהערכים הם אופציונליים! ערכי ה'צל' קובעים את מיקום הצללית, מידת הטשטוש, צבע הצללית וכו'. כדי לקבל פרטים מלאים על הפעולות של ערכי 'צל', המפרט של CSS3 Backgrounds מגדיר את 'box-shadow' בפירוט רב יותר. הדוגמאות הבאות אמורות לתת לכם מושג סביר לגבי האפשרויות השונות.

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

כתובות URL שמפנות למסנני SVG

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

לדוגמה, תגי העיצוב של SVG למסנן יכולים להיות:

<filter id="foo">...</filter>

ואז מ-CSS תוכלו לעשות משהו פשוט כמו:

div { { % mixin filter: url(#foo); % } }

זהו! כל תווי ה-<div> במסמך יסווגו לפי הגדרות המסנן של SVG.

מותאם אישית (בקרוב)

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

שיקולי ביצועים

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

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

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

כשיוצרים blur, המערכת משלבת את הצבעים של הפיקסלים מסביב לפיקסל הפלט כדי ליצור תוצאה מטושטשת. לכן, נניח שאם הפרמטר radius הוא 2, המסנן צריך לבחון 2 פיקסלים בכל כיוון סביב כל פיקסל פלט כדי ליצור את הצבע המעורב. זה קורה לכל פיקסל פלט, כלומר, הרבה חישובים שפשוט גדלים כשמגדילים את radius. מכיוון שהפונקציה blur מסתכלת לכל כיוון, הכפלת ה'רדיוס' פירושה שצריך להסתכל על פי 4 פיקסלים, כך שלמעשה הוא איטי פי 4 לכל הכפלה של radius. המסנן drop-shadow מכיל blur כחלק מההשפעה שלו, כך שגם הוא פועל בדיוק כמו blur כשמשנים את החלקים radius ו-spread של הפרמטר shadow.

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

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

זמינות בדפדפנים מודרניים

חלק מהאפקטים של filter ב-CSS זמינים כרגע בדפדפנים מבוססי WebKit וב-Mozilla. אנחנו מצפים לראות אותן בקרוב ב-Opera וגם ב-IE10. מכיוון שהמפרט עדיין נמצא בפיתוח, חלק מספקי הדפדפנים יישמו את הדברים האלה באמצעות קידומות של ספקים. לכן ב-WebKit עליך להשתמש ב--webkit-filter, ב-Mozilla תצטרכו להשתמש ב--moz-filter ולשים לב להטמעות דפדפן אחרות כפי שהן מופיעות.

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

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

אפקט הסינון	תמיכת דפדפן	ביצועים
grayscale	Chrome	מהיר מאוד
חום-ספיה	Chrome	מהיר מאוד
רוויה	Chrome	מהיר מאוד
סיבוב גוון	Chrome	מהירים
להפוך	Chrome	מהיר מאוד
opacity	Chrome	יכול להיות איטי
בהירות	Chrome	מהירים
ניגודיות	Chrome	מהירים
טשטוש	Chrome	איטי אלא אם הוא מואצת
drop-shadow	Chrome	יכול להיות איטי
url()	Chrome, Mozilla	משתנה, מהיר לאט

משאבים טובים אחרים

אפליקציה מדהימה של ציור מופשט אינטראקטיבי עם פילטרים, שמאפשרת לערוך ניסויים ולשתף את הגרפיקה כדאי לעיין בדף המסנן האינטראקטיבי המעולה של אריק Bidelman מדריך נהדר על מסננים עם דוגמאות מפרט הטיוטה הרשמי של W3C מסנן 1.0 http://dev.w3.org/fxtf/filters/ ExampleUI נוצר באמצעות מסננים