מבוא
מסננים הם כלי יעיל שבעזרתו יוצרים באינטרנט יכולים ליצור אפקטים חזותיים מעניינים. במאמר הזה נסביר על ההיסטוריה של אפקטים של מסננים, מה הם עושים ואיך משתמשים בהם. נציג דוגמאות לכל המסננים המוגדרים מראש ל-CSS. בנוסף, נסביר על שיקולים לגבי ביצועים כשמשתמשים בהם במחשבים ובמכשירים ניידים, כי חשוב לדעת איך המסננים משפיעים על המהירות כדי לספק חוויית משתמש טובה. לבסוף, נבדוק את המצב הנוכחי של ההטמעה בדפדפנים מודרניים.
העבר, ההווה והעתיד של אפקטים של פילטרים
אפקטים של מסנן הם חלק ממפרט Scalable Vector Graphics (SVG). הם נוצרו כדי להחיל מספר אפקטים שונים של תמונות שמבוססים על פיקסלים על ציור וקטור. עם הזמן, כאשר יצרני הדפדפנים הוסיפו יכולות SVG לדפדפנים שלהם, התברר עד כמה המסננים שימושיים. רוברטו או'קאלאהאן (Robert O'Callahan) מ-Mozilla הגה את הרעיון המבריק של שימוש במסנני SVG באמצעות החלת CSS על תוכן HTML 'רגיל'. רועי יצר אב טיפוס של גרסה מוקדמת שאפשרה לראות עד כמה השילוב של מסננים וסגנונות CSS יכול להיות יעיל. קבוצות העבודה של CSS ו-SVG ב-W3C החליטו לשלב את השימוש במסננים גם ב-HTML וגם ב-SVG באמצעות עיצוב CSS, וכך נולד המאפיין 'סינון' ל-CSS. כרגע צוות משימה משותף של אנשים שעובדים על CSS ו-SVG משקיע המון עבודה כדי שהמסננים יהיו שימושיים לכולם. המפרט הנוכחי של כל הדברים האלה זמין כאן.
חיים חדשים לנכס CSS של 'מסנן'
לפעמים מפתחי אתרים חווים תחושה של 'דז'ה וו' כשהם רואים את המילה 'מסנן' בסגנונות CSS. הסיבה לכך היא שבגרסאות ישנות של Internet Explorer הייתה תכונת 'מסנן' שחשופה דרך CSS כדי לבצע פונקציונליות מסוימת ספציפית לפלטפורמה. הנכס הזה הווצא משימוש לטובת הנכס הסטנדרטי 'filter', שהוא עכשיו חלק מ-CSS3. לכן, אם תראו את המילה 'מסנן' בדפים מסוימים באינטרנט, אל תתבלבלו. המאפיין החדש 'filter' הוא המקום שבו מתרחשת כל הפעולה, וגרסאות חדשות של IE מטמיעות אותו בדיוק כמו כל הדפדפנים המודרניים.
איך פועלים המסננים
אז מה בדיוק עושה מסנן? הדרך הקלה ביותר להתייחס למסנן היא כשלב עיבוד נתונים לאחר העיבוד, שמבצע פעולה קסומה אחרי שכל תוכן הדף תוכנן וצויר.
כשדפדפן טוען דף אינטרנט, הוא צריך להחיל סגנונות, לבצע פריסה ואז ליצור את הדף כדי שיהיה משהו שאפשר להציג. המסננים נכנסים לתוקף אחרי כל השלבים האלה וממש לפני שהדף מועתק למסך. הם מצלמים תמונת מצב של הדף שעבר עיבוד כתמונה בפורמט bitmap, מבצעים קסם גרפי מסוים על הפיקסלים בתמונת המצב ומציירים את התוצאה מעל תמונת הדף המקורית. אחת הדרכים להסתכל עליהם היא כמו פילטר שמוצב על החלק הקדמי של עדשת המצלמה. מה שאתם רואים דרך העדשה הוא העולם החיצוני שעבר שינוי באמצעות אפקט המסנן.
כמובן, המשמעות היא שדרוש זמן כדי לצייר דף עם פילטרים, אבל שימוש נכון בהם ישפיע במידה מינימלית על מהירות האתר.
כמו כן, בדיוק כמו שאפשר לערום מספר מסננים זה על גבי זה על עדשת המצלמה, אפשר להחיל מספר שרירותי של מסננים אחד אחרי השני כדי להשיג כל מיני אפקטים.
מסננים שהוגדרו באמצעות SVG ו-CSS
מאחר שהמסננים מקורם ב-SVG, יש כמה דרכים להגדיר אותם ולהשתמש בהם. בפורמט SVG עצמו יש רכיב <filter> שעוזר הגדרות של אפקטים שונים של סינון באמצעות תחביר XML. קבוצת המסננים שמוגדרת על ידי CSS מתבססת על אותו מודל גרפי, אבל הן הגדרות פשוטות הרבה יותר שקל להשתמש בהן בגיליון סגנונות.
אפשר להביע את רוב המסננים של CSS במונחים של מסנני SVG, ו-CSS מאפשר גם להפנות למסנן שצוין ב-SVG אם רוצים. מעצבי המסננים של CSS השקיעו מאמצים רבים כדי להקל על מחברי האתרים להחיל מסנן, ולכן במאמר הזה נסקור רק את המסננים שזמינים ישירות מ-CSS, בלי להתייחס להגדרות ה-SVG בינתיים.
איך מחילים מסנן CSS
כדי להשתמש במסננים מ-CSS, משתמשים במאפיין 'filter' שמוחלים על כל אלמנט גלוי בדף האינטרנט. לדוגמה פשוטה מאוד, אפשר לכתוב משהו כזה
div { { % mixin filter: grayscale(100%); % } }
וכתוצאה מכך, התוכן בתוך כל הרכיבים מסוג <div> בדף יהפוך לאפור. נהדר כדי להפוך את הדף למראה של תמונה בטלוויזיה משנות ה-40.
רוב המסננים כוללים פרמטר כלשהו כדי לקבוע את מידת הסינון. לדוגמה, אם רוצים לעצב את התוכן כך שיהיה באמצע בין הצבע המקורי לבין גרסה בגווני אפור, צריך לעשות זאת כך:
div { { % mixin filter: grayscale(50%); % } }
אם רוצים להחיל כמה מסננים זה אחרי זה, אין בעיה. פשוט צריך למקם אותם לפי הסדר ב-CSS כך:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
בדוגמה הזו, קודם כל כל הצבעים המקוריים יהיו בגווני אפור, ואז יוחל אפקט דהוי. התוצאה תהיה:
הגמישות של החלת מסננים אחד אחרי השני מאפשרת ליצור כל מיני אפקטים – הכול תלוי בדמיון שלכם. תוכלו להתנסות ביצירת תוצאות מדהימות.
אילו אפקטים של מסננים זמינים באמצעות CSS
לכן, מנגנון המסנן המקורי של SVG הוא חזק אבל השימוש בו יכול להיות מרתיע. לכן, ב-CSS יש כמה אפקטים רגילים של מסננים שקל מאוד להשתמש בהם.
נבחן כל אחת מהן ונראה מה היא עושה.
- גווני אפור(סכום)
- הפעולה הזו ממירה את הצבע בתמונה הקלט שלנו לגוון אפור. הסכום שהוחל קובע את מידת ההמרה האפורה שתחול. אם הערך הוא 100%, הכל יהיה בגוון אפור. אם הערך הוא 0%, הצבעים לא ישתנו. אפשר להשתמש כאן במספר עשרוני אם מעדיפים אותו על אחוזים. כלומר, 0 פועל כמו 0% ו-1.0 פועל כמו 100%.
- sepia(amount)
- הצבעים מועברים עם גוון צהוב-חום, כמו בתמונות ישנות. הערך 'כמות' פועל באותו אופן כמו המסנן 'רמת אפור' – כלומר, הערך 100% הופך את כל הצבעים לגווני ספיה לחלוטין, וערכים קטנים יותר מאפשרים להחיל את האפקט בפרופורציות קטנות יותר.
- saturate(amount)
- הפעולה הזו מחילה אפקט של רוויית צבע על הצבעים שגורמים להם להיראות ססגוניים יותר. זהו אפקט מגניב שיכול להפוך תמונות לפוסטרים או לקריקטורות. האפקט הזה מאפשר גם להשתמש בערך גבוה מ-100% כדי להדגיש את הרוויה. בהחלט אפקט שעלול לגרום לדברים להיראות די מגניבים!
- hue-rotate(angle)
- זהו אפקט קצת 'גיקי' של צבעים, שאפשר להשתמש בו כדי לקבל תוצאות מעניינות. הפונקציה הזו משמשת להזזת הצבעים כדי שתמונה שהזנתם תיראה שונה לגמרי. אם אפשר לדמיין ספקטרום צבעים שמתחיל באדום ומסתיים בסגול סביב גלגל צבעים, האפקט הזה מקבל את הצבע המקורי בגלגל כקלט ומסובב אותו לפי הפרמטר 'angle' כדי ליצור את הצבע בגלגל שאליו הוא סובב כערך הצבע של הפלט. כך, כל הצבעים בתמונה משתנים לפי אותה 'זווית' על הגלגל. זוהי כמובן הפשטה של הפעולה שלו, אבל אני מקווה שהיא קרובה מספיק כדי להבין את העניין.
- invert(amount)
- האפקט הזה הופך את הצבעים – כך שאם הערך של 'כמות' הוא 100%, הפלט נראה כמו תמונה שלילית מהימים הישנים של מצלמות צילום סרטים! בדיוק כמו קודם, שימוש בערכים קטנים מ-100% יחול בהדרגה את אפקט ההיפוך.
- opacity(amount)
- אם אתם רוצים שהתוכן מסונן ייראה שקוף למחצה, זה התוכן שמתאים לכם. הערך של 'amount' קובע את מידת האטימות של הפלט. לכן, ערך של 100% הוא ערך אטום לחלוטין, כך שהפלט יהיה זהה לחלוטין לקלט. ככל שהערך יורד מתחת ל-100%, תמונה הפלט תהיה פחות אטומה (יותר שקופה) ותראו אותה פחות ופחות. כמובן, אם הוא יחפוף משהו אחר בדף, התוכן שמתחתיו יתחיל להיות גלוי. 'כמות' של 0% פירושה שהאובייקט ייעלם לגמרי. עם זאת, חשוב לזכור שעדיין אפשר ליצור אירועים כמו קליקים בעכבר וכו' באובייקטים שקופים לגמרי, כך שזו תכונה שימושית אם רוצים ליצור אזורים שניתן ללחוץ עליהם בלי להציג שום דבר.
זה פועל כמו נכס ה'אטימוּת' המוכר לכם. באופן כללי, המאפיין 'opacity' ב-CSS לא מואץ באמצעות חומרה, אבל בדפדפנים מסוימים שמטמיעים מסננים באמצעות האצת חומרה, גרסת המסנן של האטימות מואצת כדי לשפר את הביצועים בצורה משמעותית.
- brightness(amount)
- הפעולה הזו דומה לשליטה בבהירות בטלוויזיה. הפונקציה מתאימה את הצבעים בין שחור מוחלט לבין הצבע המקורי, בהתאם לפרמטר 'amount'. אם תגדירו את הערך הזה ל-0%, לא תראו כלום חוץ משחור, אבל ככל שהערך יתקרב ל-100%, כך יותר ויותר מהתמונה המקורית תתבהר, עד שתגיעו ל-100% והיא תהיה זהה לתמונה שהזנתם. כמובן שאפשר פשוט להמשיך - כך שהגדרה של משהו כמו 200% תהפוך את התמונה לבהירה פי שניים מזו המקורית. היא מעולה להתאמת התמונות בתאורה חלשה!
- contrast(amount)
- אמצעי בקרה נוספים ממערכת הטלוויזיה שלך! הפעולה הזו תשנה את ההבדל בין החלק הכהה ביותר לחלק הבהיר ביותר של תמונת הקלט. אם תשתמשו ב-0% בסוף תקבלו צבע שחור כמו 'בהירות', אז זה לא מעניין יותר מדי. עם זאת, ככל שמגדילים את הערך עד 100%, ההבדל בחושך משתנה עד שמגיעים ל-100% והתמונה חוזרת למצב המקורי. אפשר גם לחרוג מ-100% בשביל האפקט הזה, וכך מגדילים עוד יותר את ההבדל בין צבעים בהירים לכהים.
- blur(radius)
- אם רוצים שיהיו לתוכן קצוות רכים, אפשר להוסיף טשטוש. העיצוב הזה נראה כמו ורוד וסליין הקלאסי על משטח של מראה זכוכית ששימש בעבר כשיטה פופולרית ליצירת סרטים. הוא מערבב את כל הצבעים ומפיץ את ההשפעה שלהם – כמו כשהעיניים לא ממוקדות. הפרמטר 'radius' משפיע על מספר הפיקסלים במסך שמשתלבים זה בזה, כך שערך גדול יותר יוצר טשטוש חזק יותר. אם לא תזינו ערך, התמונה לא תשתנה.
- הטלת צללית(צללית)
- כמה כיף שאפשר ליצור תוכן שנראה כאילו הוא צולם בחוץ בשמש עם צל על הקרקע מאחוריו, וזה כמובן מה ש'צל מודגש' עושה. המערכת מצלמת תמונת מצב של התמונה, הופכת אותה לצבע אחד, מטשטשת אותה ואז מעבירה את התוצאה קצת הצידה כדי שהיא תיראה כמו צל של התוכן המקורי. הפרמטר 'צל' שמוענק הוא קצת יותר מורכב מערך יחיד. זוהי סדרה של ערכים מופרדים בפסיקים – וחלק מהערכים הם אופציונליים! הערכים של 'shadow' קובעים איפה תהיה ההצללה, את מידת הטשטוש, את צבע ההצללה וכו'. למידע מלא על הפעולות של הערכים של 'shadow', אפשר לעיין במפרט CSS3 Backgrounds שבו מוגדר 'box-shadow' בפירוט רב. הדוגמאות הבאות יספקו לכם מושג ברור לגבי האפשרויות השונות.
זוהי פעולת סינון נוספת שדומה לפונקציות קיימות ב-CSS שזמינות דרך הנכס 'box-shadow'. השימוש בגישה של מסנן אומר שחלק מהדפדפנים עשויים להשתמש בשיפור מהירות באמצעות חומרה, כפי שתיארנו למעלה לגבי הפעולה 'אטימות'.
- כתובות URL שמפנות למסנני SVG
- מכיוון שהמסננים הם חלק מ-SVG, הגיוני בלבד שתהיה לכם אפשרות לעצב את התוכן באמצעות מסנן SVG. אפשר לעשות זאת בקלות באמצעות ההצעה הנוכחית לנכס 'מסנן'. כל המסננים ב-SVG מוגדרים עם מאפיין מזהה שיכול לשמש להתייחס לאפקט המסנן. לכן, כדי להשתמש במסנן SVG כלשהו מ-CSS, כל מה שצריך לעשות הוא להפנות אליו באמצעות תחביר 'url'.
לדוגמה, תגי העיצוב מסוג SVG למסנן יכולים להיות בערך כך:
<filter id="foo">...</filter>
לאחר מכן, ב-CSS תוכלו לעשות משהו פשוט כמו:
div { { % mixin filter: url(#foo); % } }
וזהו זה! כל התגים <div> במסמך יותאמו לסגנון של הגדרות המסנן ב-SVG.
- בהתאמה אישית (בקרוב)
- בקרוב נוסיף מסננים מותאמים אישית. הם מנצלים את העוצמה של המעבד הגרפי כדי להשתמש בשפת הצללה מיוחדת כדי ליצור אפקטים מדהימים, שהגבול שלהם הוא רק הדמיון שלכם. חלק זה של מפרט ה'מסנן' עדיין נמצא בדיון ושוטף, אבל ברגע שהוא יתחיל להגיע לדפדפן שנמצא בקרבתכם, נקפיד לכתוב לכם יותר על מה שאפשר.
שיקולי ביצועים
אחד הדברים החשובים לכל מפתח אתרים הוא הביצועים של דף האינטרנט או האפליקציה שלו. פילטרים של CSS הם כלי יעיל ליצירת אפקטים חזותיים, אבל הם עשויים להשפיע על ביצועי האתר.
חשוב להבין מה הם עושים ואיך הם משפיעים על הביצועים, במיוחד אם אתם רוצים שהאתר יפעל היטב במכשירים ניידים שתומכים במסנני CSS.
ראשית, לא כל המסננים נוצרים באופן שווה! למעשה, רוב המסננים יפעלו מהר מאוד בכל פלטפורמה, וההשפעה שלהם על הביצועים תהיה זניחה. עם זאת, מסננים שמבצעים טשטוש סוג כלשהו נוטים להיות איטיים יותר מהמסננים האחרים. הכוונה היא כמובן ל'טשטוש' ול'צללית'. זה לא אומר שאסור להשתמש בהם, אבל כדאי להבין איך הם פועלים.
כשמבצעים blur, המערכת מערבבת את הצבעים מפיקסלים שמסביב לפיקסל הפלט כדי ליצור תוצאה מטושטשת. לדוגמה, אם הפרמטר radius הוא 2, המסנן צריך לבדוק 2 פיקסלים בכל כיוון סביב כל פיקסל פלט כדי ליצור את הצבע המעורב. זה קורה לכל פיקסל פלט ולכן מתבצעים חישובים רבים, שגדלים רק כשמגדילים את ה-radius. מכיוון ש-blur מביט בכל הכיוונים, כשמוסיפים פי 2 ל'רדיוס' צריך לבדוק פי 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, הביצועים של האפקטים האיטיים יותר משתפרים משמעותית. כרגיל, בדיקה בדפדפנים שונים היא הדרך הטובה ביותר להעריך את הביצועים.
| אפקט המסנן | תמיכה בדפדפנים | ביצועים |
|---|---|---|
| גווני אפור | Chrome | מהיר מאוד |
| חום-ספיה | Chrome | מהיר מאוד |
| רוויה | Chrome | מהיר מאוד |
| hue-rotate | Chrome | מהר |
| היפוך | Chrome | מהיר מאוד |
| opacity | Chrome | יכול להיות איטי |
| בהירות | Chrome | מהר |
| ניגודיות | Chrome | מהר |
| טשטוש | Chrome | איטית, אלא אם היא מואצת |
| drop-shadow | Chrome | יכול להיות איטי |
| url() | Chrome, Mozilla | משתנה, מהיר עד איטי |
מקורות מידע טובים אחרים
אפליקציה מדהימה של ציור מופשט אינטראקטיבי עם פילטרים שמאפשרת להתנסות ולשתף את הגרפיקה כדאי לעיין בדף מסנן אינטראקטיבי מעולה של אריק בדלמן מדריך נהדר על מסננים עם דוגמאות מפרט הטיוטה הרשמי של W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/ דוגמה נוצרה באמצעות מסננים