הפודקאסט בשירות ה-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
מסנן רקע
מסנן הרקע
המאפיין מקבל את כל הערכים של פונקציית הסינון כמו filter
.
ההבדל בין backdrop-filter
לבין filter
המאפיין backdrop-filter
מחיל את המסננים רק על הרקע,
כאשר המאפיין filter
מחיל אותו על כל הרכיב.
הדוגמה בתחילת השיעור הזה היא הדוגמה המושלמת, כיוון שלא רוצים שהטקסט יטושטש, ורצוי לא להוסיף רכיבי HTML נוספים. היכולת להחיל פילטרים רק על הרקע מאפשרת זאת.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי מסננים
אילו מהאפשרויות הבאות הן פונקציות סינון ב-CSS?
grayscale()
invert()
flip()
multiply()
blur()
brightness()
האם שירות CSS יכול להשתמש במסנני SVG?
url()
מאפשרת