The CSS Podcast – 023: מסננים
נניח שצריך לבנות אלמנט עם אפקט אטום במידה מועטה של זכוכית חלבית שנמצא מעל התמונה. הטקסט צריך להיות טקסט פעיל ולא תמונה. איך עושים את זה?
השילוב של מסנני CSS ו-backdrop-filter מאפשר לנו להשתמש באפקטים ולטשטש את מה שצריך בזמן אמת.
טשטוש ושקיפות הם שניים מתוך מגוון הפילטרים הזמינים, ולכן בואו נעבור בקצרה על כל מה שהם עושים ונסביר איך להשתמש בהם.
הנכס filter
אפשר להחיל אחד או יותר מהמסננים הבאים כערך של filter.
אם תחילו מסנן בצורה שגויה, שאר המסננים שהוגדרו ל-filter לא יעבדו.
blur
המערכת מחילה טשטוש גאוסיאני והארגומנט היחיד שאפשר להעביר הוא radius, כלומר רמת הטשטוש.
הערך הזה צריך להיות יחידת אורך, כמו 10px. אחוזים לא קבילים.
.my-element {
filter: blur(0.2em);
}
brightness
כדי להגביר או להפחית את הבהירות של אלמנט מסוים, משתמשים בפונקציית הבהירות. ערך הבהירות מבוטא כאחוז, כאשר התמונה שלא השתנתה מבוטאת כערך של 100%. הערך 0% הופך את התמונה לשחורה לחלוטין, ולכן ערכים שבין 0% ל-100% הופכים את התמונה לפחות בהירה. כדי להגביר את הבהירות, צריך להשתמש בערכים מעל 100%.
.my-element {
filter: brightness(80%);
}
contrast
מגדירים ערך בין 0% ל-100% כדי להפחית או להגדיל את הניגודיות, בהתאמה.
.my-element {
filter: contrast(160%);
}
grayscale
אפשר להחיל אפקט לגווני אפור לחלוטין על ידי שימוש ב-1 כערך של grayscale(), או ב-0 כדי לקבל רכיב רוויי לחלוטין.
אפשר גם להשתמש בערכים באחוזים או בערכים עשרוניים כדי להחיל רק אפקט חלקי של גווני אפור.
אם לא תעבירו ארגומנטים, הרכיב יוצג בגווני אפור לחלוטין.
אם מעבירים ערך שגדול מ-100%, הוא יוגבל ל-100%.
.my-element {
filter: grayscale(80%);
}
invert
בדיוק כמו ב-grayscale, אפשר להעביר את הפונקציה 1 או 0 אל הפונקציה invert() כדי להפעיל או להשבית אותה.
כשהרכיב מופעל, הצבעים של הרכיב מתהפכים לחלוטין.
אפשר גם להשתמש בערכים באחוזים או בערכים עשרוניים כדי להחיל רק היפוך צבעים חלקי.
אם לא מעבירים ארגומנטים כלשהם לפונקציה invert(), הרכיב הפוך לחלוטין.
.my-element {
filter: invert(1);
}
opacity
המסנן opacity() פועל בדיוק כמו המאפיין opacity, שבו אפשר להעביר מספר או אחוז כדי להגדיל או להקטין את השקיפות.
אם לא מעבירים ארגומנטים, הרכיב גלוי במלואו.
.my-element {
filter: opacity(0.3);
}
saturate
המסנן הרוויה דומה מאוד למסנן brightness ומקבלים את אותו ארגומנט: מספר או אחוז.
במקום להגביר או להפחית את אפקט הבהירות, saturate מעלה או מקטין את רווית הצבע.
.my-element {
filter: saturate(155%);
}
sepia
אפשר להוסיף אפקט של גוון חום-ספיה עם המסנן הזה שפועל כמו grayscale().
גוון חום-ספיה הוא טכניקת הדפסה בתמונות שממירה גוונים שחורים לגוונים חומים כדי לחמם אותם.
אפשר להעביר מספר או אחוז כארגומנט של sepia(), כדי להגדיל או להקטין את ההשפעה.
העברת ארגומנטים לא מוסיפה אפקט חום-ספיה מלא (מקביל ל-sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
בשיעור הצבעים למדתם איך הגוון ב-hsl מתייחס לסיבוב של גלגל הצבעים, והפילטר הזה פועל בצורה דומה.
אם מעבירים זווית, כמו מעלות או פניות, היא משנה את הגוון של כל הצבעים של הרכיב, ומשנה את החלק בגלגל הצבעים שאליו הוא מפנה. אם לא תעבירו ארגומנט, לא יקרה כלום.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
אפשר להשתמש באפקט של הטלת צללית שמתחבקת עקומה כמו בכלי עיצוב, כמו Photoshop, בעזרת drop-shadow.
הצללית הזו מוחלת על מסכת אלפא, שמאפשרת להוסיף צללית לתמונה של חיתוך.
המסנן drop-shadow משתמש בפרמטר של צללית ומכיל ערכים מופרדים ברווחים - היסט-x, היסט-y, טשטוש וצבע.
היא כמעט זהה ל-box-shadow, אבל מילת המפתח inset וערך ההפצה לא נתמכים.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
מידע נוסף על סוגי הצלליות במודול הצלליות
url
המסנן url מאפשר להחיל מסנן SVG מרכיב או קובץ SVG מקושרים.
למידע נוסף על מסנני SVG
מסנן רקע
המאפיין backdrop-filter מקבל את כל הערכים של פונקציית המסנן כמו filter.
ההבדל בין backdrop-filter ל-filter הוא שהמאפיין backdrop-filter מחיל את המסננים רק על הרקע, כאשר המאפיין filter מחיל אותו על כל הרכיב.
הדוגמה בתחילת השיעור הזה היא הדוגמה המושלמת, כי לא רוצים שהטקסט יטושטש, ורצוי שלא יהיה צורך להוסיף רכיבי HTML נוספים. היכולת להחיל פילטרים רק על הרקע מאפשרת זאת.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי מסננים
אילו מהאפשרויות הבאות הן פונקציות סינון ב-CSS?
grayscale()invert()flip()multiply()blur()brightness()האם שירות CSS יכול להשתמש במסנני SVG?
url() מאפשרת