מאפיין filter

מאפיין filter מחיל אפקטים גרפיים על אלמנט — טשטוש, שינוי בהירות וניגודיות, hue rotation, גרייסקייל, שיפוף וכו'. ניתן לשרשר מספר פונקציות פילטר ברצף, או להשתמש בהפניית url() לאלמנט filter ב-SVG.

.photo { filter: blur(4px); }

.vintage { filter: sepia(60%) contrast(110%) brightness(95%) drop-shadow(2px 4px 8px rgba(0,0,0,0.3)); }

noneאין אפקט פילטר (ברירת המחדל).

blur()מחיל טשטוש Gaussian. תחביר: blur(<length>) — לדוגמה blur(4px).

brightness()מכפיל ליניארי של הבהירות. 0% = שחור, 100% = ללא שינוי. תחביר: brightness(<number> | <percentage>).

contrast()מתאים את הניגודיות. 0% = אפור אחיד, 100% = ללא שינוי. תחביר: contrast(<number> | <percentage>).

drop-shadow()מחיל אפקט צל. תחביר: drop-shadow(<offset-x> <offset-y> <blur-radius>? <color>?).

grayscale()ממיר לגרייסקייל. 100% = שחור-לבן מלא. תחביר: grayscale(<number> | <percentage>).

hue-rotate()מסובב את הגוון על גלגל הצבעים. תחביר: hue-rotate(<angle>) — לדוגמה hue-rotate(90deg).

invert()הופך את הצבעים. 100% = היפוך מלא, 0% = ללא שינוי. תחביר: invert(<number> | <percentage>).

opacity()מחיל שקיפות. 0% = שקוף לחלוטין, 100% = אטום. תחביר: opacity(<number> | <percentage>).

saturate()משנה את הרוויה. 0% = גרייסקייל, 100% = ללא שינוי, יותר מ-100% = רוויה מוגברת. תחביר: saturate(<number> | <percentage>).

sepia()ממיר לגוון ספיה (חום-זהב). 100% = ספיה מלאה, 0% = ללא שינוי. תחביר: sepia(<number> | <percentage>).

url()הפניה לאלמנט filter ב-SVG (חיצוני או פנימי). דוגמה: url(#myFilter).

Filter Effects Module Level 1

Editor's Draft

W3C MDN

Show all code

ערוך CSS און-ליין

התוסף שזוכר עבורך מאות פריטי CSS

כל פרופרטי CSS — בהדגמה חיה

מקור הייחוס הדו-לשוני ל-CSS

previous next