מסננים

הפודקאסט בשירות ה-CSS – 023: מסננים

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

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

הנכס filter

תמיכה בדפדפן

  • Chrome: 53.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 9.1.

מקור

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

blur

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

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

brightness

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

contrast

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

grayscale

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

invert

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

opacity

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

saturate

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

sepia

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

hue-rotate

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

drop-shadow

תמיכה בדפדפן

  • Chrome: 18.
  • קצה: 12.
  • Firefox: 35.
  • Safari: 6.

מקור

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

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

מידע נוסף על סוגי הצלליות במודול הצלליות

url

תמיכה בדפדפן

  • Chrome: 5.
  • קצה: 12.
  • Firefox: 3.
  • Safari: 6.

מקור

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

מסנן רקע

תמיכה בדפדפן

  • Chrome: 76.
  • קצה: 79.
  • Firefox: 103.
  • Safari: 18.

מקור

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי מסננים

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

grayscale()
🎉
invert()
🎉
flip()
כדאי לנסות שוב.
multiply()
כדאי לנסות שוב.
blur()
🎉
brightness()
🎉

האם שירות CSS יכול להשתמש במסנני SVG?

כן
פונקציית הסינון url() מאפשרת
לא
כדאי לנסות שוב.