🎚️מחולל מסננים CSS

פונקציות ויחידות של filter

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

• px (פיקסל)：פונקציית blur מציינת את רדיוס הטשטוש ב-px, וכאשר צוין 4px, הצבע חופף בטווח של 4 פיקסלים.
• % (אחוז)：הפונקציות brightness ו-sepia מציינות את עוצמת האפקט ב-%, כאשר 100% הוא הקיביות המקורית ו-120% הוא 20% יותר בהיר.
• deg (מעלות)：פונקציית hue-rotate מציינת את הזווית של סיבוב הצבע בחוג הגוון ב-deg, וכאשר צוין 180deg, הצבע עובר לגוון ההפוך.

מדוע התוצאה משתנה בהתאם לסדר הכתיבה

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

ההבדל בין backdrop-filter

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

• filter：filter הוא תכונה המוסיפה אפקטים למראה של הרכיב המצוין (תמונה, טקסט וכו').
• backdrop-filter：backdrop-filter הוא תכונה המוסיפה אפקטים לחלק הנראה מאחורי הרכיב המצוין, וזה משמש ביטויים כמו זכוכית מטורלית.