הפודקאסט של CSS – 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() מפעילה