מסננים

The CSS Podcast – 023: Filters

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

שילוב של פילטרים של CSS ו-backdrop-filter מאפשר לנו להחיל אפקטים ולטשטש את מה שצריך בזמן אמת. טשטוש ואופקטים של שקיפיות הם שניים מתוך הפילטרים הרבים שזמינים. בואו נעבור על כל הפילטרים ונראה איך משתמשים בהם.

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

הנכס filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

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

blur

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

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: brightness(80%);
}

הערה: אפשר גם להשתמש בערכים עשרוניים במקום בערכים באחוזים במסננים כמו brightness. כדי להגדיר בהירות של 80% עם מספר עשרוני, כותבים 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

מגדירים ערך בין 0% ל-100% כדי להקטין או להגדיל את הניגודיות, בהתאמה.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

בדומה ל-grayscale, אפשר להעביר את הערך 1 או 0 לפונקציה invert() כדי להפעיל או להשבית אותה. כשהיא מופעלת, הצבעים של הרכיב מוחלפים לגמרי. אפשר גם להשתמש בערכי אחוזים או עשרוניים כדי להחיל היפוך צבעים חלקי בלבד. אם לא מעבירים אף ארגומנט לפונקציה invert(), הרכיב יופיע הפוך לגמרי.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

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

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

אפשר להחיל צללית מודגשת שמתאימה לעקומה כמו בכלי עיצוב, למשל Photoshop עם drop-shadow. הצל הזה מיושם על מסכת אלפא, ולכן הוא שימושי מאוד להוספת צל לתמונה חתוכה. המסנן drop-shadow מקבל פרמטר של צל שמכיל ערכים של offset-x, ‏ offset-y, ‏ blur ו-color שמופרדים באמצעות רווחים. הוא כמעט זהה ל-box-shadow, אבל אין תמיכה במילות המפתח ובערך הפצה של inset.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

מידע נוסף על הסוגים השונים של הצללים זמין במודול shadows.

url

Browser Support

• 5
• 12
• 3
• 6

Source

המסנן url מאפשר להחיל מסנן SVG מאלמנט SVG מקושר או מקובץ SVG מקושר. מידע נוסף על מסנני SVG

מסנן של קולאז' תמונות ברקע

Browser Support

• 76
• 79
• 103
• 18

Source

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

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

בדיקת ההבנה

מבחן בנושא מסננים

אילו מהאפשרויות הבאות הן פונקציות סינון של CSS?

grayscale()

🎉

invert()

🎉

flip()

כדאי לנסות שוב.

multiply()

כדאי לנסות שוב.

blur()

🎉

brightness()

🎉

האם אפשר להשתמש במסנני SVG ב-CSS?

כן

פונקציית המסנן url() מאפשרת לעשות זאת

לא

כדאי לנסות שוב.