فیلترهای تصویری

استفاده از filter در CSS: blur، brightness، grayscale، sepia و افکت‌های اینستاگرامی

فیلترهای CSS

ویژگی filter جلوه‌های گرافیکی روی عناصر اعمال می‌کند — مثل فیلترهای اینستاگرام.

توابع filter

تابعتوضیحمثال
blur()تاریblur(5px)
brightness()روشناییbrightness(1.5)
contrast()کنتراستcontrast(2)
grayscale()خاکستریgrayscale(100%)
sepia()قهوه‌ای قدیمیsepia(100%)
hue-rotate()چرخش رنگhue-rotate(90deg)
invert()معکوس رنگinvert(100%)
saturate()اشباع رنگsaturate(2)
drop-shadow()سایهdrop-shadow(4px 4px 8px #000)

ترکیب چند فیلتر

.vintage {
        filter: sepia(0.5) contrast(1.2) brightness(0.9);
    }

افکت Hover با فیلتر

.card img {
        filter: grayscale(100%);
        transition: filter 0.5s;
    }
    .card:hover img {
        filter: grayscale(0%);
    }

backdrop-filter (افکت شیشه‌ای)

.glass {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.2);
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط