Filterها در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

تا اینجا با Transform، Transition و Animation آشنا شدیم و یاد گرفتیم چگونه ظاهر و رفتار عناصر صفحه را تغییر دهیم. اما گاهی اوقات لازم است خودِ ظاهر یک تصویر یا عنصر را تغییر دهیم؛ مثلاً یک تصویر را سیاه‌وسفید کنیم، کمی تار کنیم، روشن‌تر یا تیره‌تر کنیم، رنگ آن را تغییر دهیم یا برای آن سایه‌ای متناسب با شکل واقعی تصویر ایجاد کنیم.

CSS برای این کار ویژگی بسیار کاربردی filter را در اختیار ما قرار می‌دهد.

با استفاده از Filterها می‌توانیم افکت‌های گرافیکی مختلفی را مستقیماً در مرورگر ایجاد کنیم و روی تصاویر، پس‌زمینه‌ها، متن‌ها، Borderها و سایر عناصر اعمال کنیم. این افکت‌ها حتی می‌توانند همراه با transition یا animation استفاده شوند.

در این مقاله تمام Filterهای مهم CSS را بررسی می‌کنیم و در پایان یک پروژه عملی می‌سازیم که در آن از چند Filter به صورت هم‌زمان استفاده خواهیم کرد.

Filter در CSS چیست؟

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

ساختار ساده آن به شکل زیر است:

.element {
    filter: filter-function(value);
}

برای مثال:

img {
    filter: grayscale(100%);
}

در این مثال تصویر کاملاً سیاه‌وسفید می‌شود.ویژگی filter به صورت پیش‌فرض مقدار none دارد؛ یعنی هیچ افکتی روی عنصر اعمال نمی‌شود.

اولین مثال با Filter

فرض کنید چنین تصویری داریم:

<img src="image.jpg" alt="تصویر نمونه">

می‌توانیم با CSS آن را سیاه‌وسفید کنیم:

img {
    filter: grayscale(100%);
}

یا تصویر را تار کنیم:

img {
    filter: blur(5px);
}

یا روشنایی آن را افزایش دهیم:

img {
    filter: brightness(150%);
}

نکته مهم این است که Filter معمولاً تصویر اصلی را تغییر نمی‌دهد؛ بلکه مرورگر هنگام نمایش، افکت را روی خروجی بصری عنصر اعمال می‌کند.

مهم‌ترین Filterهای CSS

CSS چندین Filter Function آماده در اختیار ما قرار می‌دهد:

این توابع را می‌توان به صورت جداگانه یا ترکیبی استفاده کرد.

۱. فیلتر با blur

تابع blur باعث تار شدن عنصر می‌شود.

img {
    filter: blur(5px);
}

هرچه مقدار بیشتر باشد، میزان تاری نیز بیشتر خواهد شد.

مثلاً:

.blur-small {
    filter: blur(2px);
}

.blur-medium {
    filter: blur(5px);
}

.blur-large {
    filter: blur(10px);
}

کاربردهای رایج

از blur می‌توان برای موارد زیر استفاده کرد:

ایجاد پس‌زمینه تار
ایجاد افکت عمق
محو کردن بخشی از تصویر
ساخت UIهای مدرن
ایجاد جلوه‌های بصری در Hero Section

مثلاً:

.hero-image {
    filter: blur(3px);
}

۲. فیلتر با brightness

brightness میزان روشنایی عنصر را تغییر می‌دهد.

img {
    filter: brightness(150%);
}

مقدار 100% تقریباً بدون تغییر است.

filter: brightness(100%);

مقادیر کمتر از 100 درصد تصویر را تاریک‌تر می‌کنند:

filter: brightness(70%);

و مقادیر بیشتر از 100 درصد آن را روشن‌تر می‌کنند:

filter: brightness(130%);

حتی می‌توان از مقدار اعشاری استفاده کرد:

filter: brightness(0.7);

که تصویر را تاریک‌تر می‌کند.

filter: brightness(1.3);

که تصویر را روشن‌تر می‌کند.

مثال کاربردی brightness

یکی از کاربردهای بسیار رایج این Filter، تیره کردن تصویر هنگام Hover است:

.card img {
    transition: filter 0.3s ease;
}

.card:hover img {
    filter: brightness(70%);
}

این تکنیک در کارت‌های محصولات و تصاویر مقالات بسیار کاربردی است.

۳. فیلتر با contrast

تابع contrast میزان کنتراست تصویر را تغییر می‌دهد.

img {
    filter: contrast(150%);
}

مقدار 100 درصد حالت اصلی را حفظ می‌کند:

filter: contrast(100%);

کنتراست کمتر:

filter: contrast(70%);

کنتراست بیشتر:

filter: contrast(150%);

برای مثال:

.product-image {
    filter: contrast(120%);
}

این روش می‌تواند برای تقویت تفاوت بین قسمت‌های روشن و تاریک تصویر مفید باشد.

۴. فیلتر با grayscale

یکی از محبوب‌ترین Filterهای CSS، grayscale() است.

این تابع رنگ تصویر را به طیف خاکستری تبدیل می‌کند.

img {
    filter: grayscale(100%);
}

تصویر کاملاً سیاه‌وسفید می‌شود.

اما می‌توان مقدار کمتری نیز استفاده کرد:

img {
    filter: grayscale(50%);
}

در این حالت تصویر به صورت کامل سیاه‌وسفید نمی‌شود.

تبدیل تصویر سیاه‌وسفید به رنگی هنگام Hover

این یکی از افکت‌های کلاسیک وب است:

.gallery img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.gallery img:hover {
    filter: grayscale(0%);
}

در حالت عادی:

سیاه‌وسفید

و هنگام Hover:

رنگی

این تکنیک برای گالری تصاویر، تصاویر تیم، نمونه‌کارها و کارت‌های اعضای تیم بسیار مناسب است.

۵. فیلتر با sepia

تابع sepia ظاهری شبیه تصاویر قدیمی و قهوه‌ای‌رنگ ایجاد می‌کند.

img {
    filter: sepia(100%);
}

برای افکت ملایم‌تر:

img {
    filter: sepia(40%);
}

مثلاً:

.old-photo {
    filter: sepia(80%);
}

این Filter بیشتر برای طراحی‌های خاص، تصاویر تاریخی، سایت‌های هنری یا ایجاد حس Vintage استفاده می‌شود.

۶. فیلتر با saturate

saturate میزان اشباع رنگ‌ها را تغییر می‌دهد.

img {
    filter: saturate(150%);
}

مقدار:

filter: saturate(100%);

حالت عادی را حفظ می‌کند.

مقدار کمتر:

filter: saturate(50%);

باعث کاهش شدت رنگ‌ها می‌شود.

و مقدار بیشتر:

filter: saturate(200%);

رنگ‌ها را شدیدتر می‌کند.

۷. فیتلر با hue-rotate

این Filter کمی پیشرفته‌تر است.

hue-rotate رنگ‌های تصویر را روی چرخه رنگ جابه‌جا می‌کند.

img {
    filter: hue-rotate(90deg);
}

می‌توان زاویه‌های مختلفی استفاده کرد:

filter: hue-rotate(45deg);

filter: hue-rotate(180deg);

filter: hue-rotate(270deg);

مقدار 0deg تغییری ایجاد نمی‌کند.

مثال

.logo:hover {
    filter: hue-rotate(90deg);
}

البته این افکت باید با دقت استفاده شود؛ چون ممکن است رنگ‌های اصلی برند را تغییر دهد.

۸. فیلتر با invert

invert رنگ‌های تصویر را معکوس می‌کند.

img {
    filter: invert(100%);
}

برای افکت کمتر:

img {
    filter: invert(50%);
}

مقدار صفر:

filter: invert(0%);

یعنی بدون تغییر.

این Filter در برخی رابط‌های کاربری، آیکون‌ها و افکت‌های خلاقانه کاربرد دارد.

۹. فیلتر با opacity

opacity میزان شفافیت عنصر را تغییر می‌دهد.

img {
    filter: opacity(50%);
}

مقدار:

filter: opacity(100%);

عنصر کاملاً قابل مشاهده است.

و:

filter: opacity(0%);

عنصر کاملاً شفاف می‌شود.

با این حال در بسیاری از مواقع بهتر است برای کنترل شفافیت از ویژگی اصلی opacity استفاده کنیم:

img {
    opacity: 0.5;
}

بنابراین filter: opacity بیشتر زمانی مفید است که بخواهیم آن را در کنار سایر Filterها در یک زنجیره استفاده کنیم.

۱۰. فیلتر با drop-shadow

drop-shadow یکی از مهم‌ترین Filterهاست.

مثلاً:

img {
    filter: drop-shadow(10px 10px 10px #000);
}

ساختار کلی:

drop-shadow(offset-x offset-y blur-radius color)

مثال:

filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));

تفاوت مهم آن با box-shadow این است که drop-shadow بیشتر بر اساس شکل واقعی خروجی عنصر، به‌خصوص تصاویر دارای بخش‌های شفاف، سایه ایجاد می‌کند.

تفاوت `box-shadow` و `drop-shadow`

فرض کنید یک PNG با پس‌زمینه شفاف داریم:

<img src="logo.png" class="logo">

با box-shadow:

.logo {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

سایه بیشتر بر اساس جعبه عنصر ایجاد می‌شود.

اما:

.logo {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

سایه می‌تواند شکل واقعی تصویر را بهتر دنبال کند.

برای لوگوها و PNGهای شفاف، drop-shadow معمولاً انتخاب جذابی است.

ترکیب چند Filter

یکی از ویژگی‌های قدرتمند filter این است که می‌توانیم چند Filter را با هم ترکیب کنیم.

مثلاً:

img {
    filter: brightness(120%) contrast(110%) saturate(130%);
}

در این مثال سه Filter داریم:

افزایش روشنایی
افزایش کنتراست
افزایش اشباع رنگ

طبق رفتار CSS، Filterها به ترتیب نوشته‌شدن اعمال می‌شوند؛ بنابراین ترتیب آن‌ها می‌تواند روی نتیجه نهایی تأثیر بگذارد.

مثال ترکیبی

img {
    filter:
        brightness(110%)
        contrast(120%)
        saturate(130%)
        drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

می‌توانیم این ساختار را برای تصاویر یک کارت محصول استفاده کنیم.

چرا ترتیب Filterها مهم است؟

فرض کنید داریم:

filter: brightness(120%) contrast(120%);

و سپس ترتیب را تغییر دهیم:

filter: contrast(120%) brightness(120%);

ممکن است نتیجه بصری دقیقاً یکسان نباشد، زیرا هر Filter روی نتیجه Filter قبلی اعمال می‌شود.

بنابراین در Filterهای ترکیبی بهتر است ترتیب را آگاهانه انتخاب کنیم.

حذف فیلتر با `none`

اگر بخواهیم Filter را حذف کنیم:

filter: none;

مثلاً:

.image {
    filter: grayscale(100%);
}

.image:hover {
    filter: none;
}

در حالت عادی تصویر سیاه‌وسفید است و هنگام Hover به حالت طبیعی برمی‌گردد.

فیلتر و Transition

Filter زمانی جذاب‌تر می‌شود که آن را با transition ترکیب کنیم.

مثلاً:

.card img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.card:hover img {
    filter: grayscale(0%);
}

یا:

.card img {
    filter: brightness(80%);
    transition: filter 0.3s ease;
}

.card:hover img {
    filter: brightness(110%);
}

نکته مهم این است که transition را روی وضعیت پایه عنصر قرار دهیم، نه فقط روی :hover.

فیلتر و Transform

Filter را می‌توان همراه transform نیز استفاده کرد:

.card img {
    filter: grayscale(100%);
    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

.card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

حالا هنگام Hover:

تصویر رنگی می‌شود.
کمی بزرگ می‌شود.
حرکت به صورت نرم انجام می‌شود.

این ترکیب در کارت‌های مدرن بسیار کاربردی است.

فیلتر و Animation

از آنجا که filter می‌تواند متحرک شود، می‌توانیم آن را داخل @keyframes نیز استفاده کنیم.

مثلاً:

@keyframes glow {
    from {
        filter: brightness(80%);
    }

    to {
        filter: brightness(130%);
    }
}

.logo {
    animation: glow 2s ease-in-out infinite alternate;
}

در این مثال روشنایی عنصر به صورت مداوم تغییر می‌کند.

ساخت افکت تصویر تار برای Background

یکی از کاربردهای بسیار جذاب Filter، ایجاد پس‌زمینه تار است.

HTML:

<section class="hero">
    <div class="hero-background"></div>

    <div class="hero-content">
        <h1>طراحی وب مدرن</h1>
        <p>ساخت تجربه‌های حرفه‌ای برای کاربران</p>
    </div>
</section>

CSS:

.hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.hero-background {
    position: absolute;
    inset: -20px;

    background: url("hero.jpg") center / cover;
    filter: blur(8px);

    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
}

در این روش تصویر پس‌زمینه تار می‌شود و محتوای اصلی خوانایی بیشتری پیدا می‌کند.

یک نکته مهم درباره Blur

اگر فقط این کار را انجام دهیم:

.hero-background {
    filter: blur(10px);
}

ممکن است اطراف تصویر، لبه‌های نامطلوب ایجاد شود.

به همین دلیل در مثال بالا از:

inset: -20px;

استفاده کردیم تا عنصر پس‌زمینه کمی بزرگ‌تر از محدوده اصلی باشد و لبه‌های Blur بیرون از محدوده قابل مشاهده قرار بگیرند.

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

یکی از رایج‌ترین کاربردهای Filter، طراحی گالری تصاویر است.

مثلاً:

<div class="gallery">
    <img src="image-1.jpg" alt="تصویر اول">
    <img src="image-2.jpg" alt="تصویر دوم">
    <img src="image-3.jpg" alt="تصویر سوم">
</div>

CSS:

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery img {
    width: 100%;
    display: block;

    filter: grayscale(100%);
    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

.gallery img:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
}

این یکی از الگوهای ساده و کاربردی برای طراحی Gallery است.

ساخت کارت محصول مدرن با فیلتر

حالا یک مثال کامل‌تر ایجاد کنیم.

HTML

<div class="product-card">

    <div class="product-image">
        <img src="product.jpg" alt="محصول نمونه">
    </div>

    <div class="product-content">
        <h2>محصول حرفه‌ای</h2>

        <p>
            توضیح کوتاهی درباره محصول در این قسمت قرار می‌گیرد.
        </p>

        <a href="#" class="product-button">
            مشاهده محصول
        </a>
    </div>

</div>

CSS

.product-card {
    width: 320px;
    overflow: hidden;

    background: #fff;
    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.product-image {
    overflow: hidden;
}

.product-image img {
    width: 100%;
    display: block;

    filter: grayscale(80%) brightness(90%);

    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.product-card:hover img {
    filter: grayscale(0%) brightness(105%) saturate(115%);
    transform: scale(1.05);
}

.product-content {
    padding: 24px;
}

.product-content h2 {
    margin-bottom: 10px;
}

.product-content p {
    color: #666;
    line-height: 1.8;
}

.product-button {
    display: inline-block;
    margin-top: 15px;

    padding: 10px 18px;

    border-radius: 10px;

    background: #111;
    color: #fff;

    text-decoration: none;
}

در این پروژه هنگام Hover چند اتفاق هم‌زمان رخ می‌دهد:

تصویر از حالت تقریباً سیاه‌وسفید خارج می‌شود.
روشنایی کمی افزایش پیدا می‌کند.
اشباع رنگ بیشتر می‌شود.
تصویر کمی بزرگ می‌شود.
کارت به سمت بالا حرکت می‌کند.
سایه کارت تغییر می‌کند.

این دقیقاً همان نوع ترکیبی است که در طراحی رابط‌های کاربری مدرن به آن نیاز داریم.

استفاده از CSS Variable برای فیلتر

اگر بخواهیم مقدار Filter را راحت‌تر مدیریت کنیم، می‌توانیم از متغیرهای CSS استفاده کنیم.

.image {
    --image-brightness: 100%;

    filter: brightness(var(--image-brightness));
}

حالا می‌توانیم مقدار آن را تغییر دهیم:

.image:hover {
    --image-brightness: 120%;
}

یا چند مقدار را ترکیب کنیم:

.image {
    --brightness: 100%;
    --saturation: 100%;

    filter:
        brightness(var(--brightness))
        saturate(var(--saturation));
}

این روش زمانی که تعداد زیادی کارت یا کامپوننت مشابه داریم بسیار مفید است.

فیلتر روی متن

Filter فقط برای تصاویر نیست.

مثلاً:

.title {
    filter: blur(1px);
}

یا:

.title {
    filter: brightness(150%);
}

اما باید توجه داشته باشیم که استفاده بیش از حد از Filter روی متن می‌تواند خوانایی را کاهش دهد.

در طراحی حرفه‌ای، Filter باید برای ایجاد یک هدف بصری مشخص استفاده شود، نه صرفاً برای اینکه عنصر «جذاب‌تر» به نظر برسد.

Filter روی کل یک Container

می‌توانیم Filter را روی یک Container نیز اعمال کنیم:

.panel {
    filter: grayscale(100%);
}

در این حالت تمام محتوای داخل Container نیز تحت تأثیر قرار می‌گیرد.

بنابراین باید دقت کنیم Filter را روی کدام عنصر قرار می‌دهیم.

برای مثال اگر فقط می‌خواهیم تصویر سیاه‌وسفید شود:

.card img {
    filter: grayscale(100%);
}

بهتر از این است که بنویسیم:

.card {
    filter: grayscale(100%);
}

چون در حالت دوم متن و سایر بخش‌های کارت نیز تحت تأثیر قرار می‌گیرند.

فیلتر و `backdrop-filter`

یک مفهوم نزدیک به filter، ویژگی backdrop-filter است.

تفاوت مهم این است که:

filter

روی خود عنصر اعمال می‌شود، اما:

backdrop-filter

می‌تواند ظاهر محتوای پشت عنصر را تحت تأثیر قرار دهد.

این ویژگی در طراحی‌های شیشه‌ای یا Glassmorphism بسیار کاربرد دارد.

مثلاً:

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

در این حالت Blur روی محتوای پشت عنصر اعمال می‌شود، نه مستقیماً روی محتوای داخل آن.

در این مقاله تمرکز ما روی filter است و backdrop-filter را در مباحث طراحی رابط کاربری مدرن می‌توانیم عمیق‌تر بررسی کنیم.

اشتباهات رایج در استفاده از فیلتر

اشتباه اول: استفاده بیش از حد از فیلتر

این کد را ببینید:

filter:
    blur(2px)
    brightness(150%)
    contrast(180%)
    saturate(250%)
    hue-rotate(90deg)
    invert(20%);

از نظر CSS ممکن است کاملاً معتبر باشد، اما نتیجه بصری احتمالاً مناسب نیست.

Filter باید هدف مشخص داشته باشد.

اشتباه دوم: استفاده از Blur زیاد

مثلاً:

filter: blur(30px);

برای بسیاری از تصاویر رابط کاربری، Blur بسیار زیاد می‌تواند جزئیات را کاملاً از بین ببرد.

بهتر است از مقادیر کم شروع کنیم:

filter: blur(2px);

و سپس در صورت نیاز مقدار را افزایش دهیم.

اشتباه سوم: تغییر رنگ برند با Hue Rotate

اگر لوگوی برند را داریم:

.logo:hover {
    filter: hue-rotate(180deg);
}

ممکن است رنگ اصلی برند کاملاً تغییر کند.

در رابط‌های حرفه‌ای بهتر است هویت بصری برند حفظ شود.

اشتباه چهارم: فراموش کردن Transition

اگر این را بنویسیم:

img:hover {
    filter: grayscale(0%);
}

تغییر بلافاصله اتفاق می‌افتد.

برای افکت نرم‌تر:

img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

img:hover {
    filter: grayscale(0%);
}

نکات عملکردی

Filterها افکت‌های بصری هستند و استفاده بسیار زیاد از افکت‌های پیچیده می‌تواند هزینه پردازشی بیشتری داشته باشد؛ به‌خصوص زمانی که تعداد زیادی عنصر به صورت هم‌زمان متحرک باشند.

بنابراین بهتر است:

Filter را فقط جایی استفاده کنیم که واقعاً ارزش بصری ایجاد می‌کند.
از ترکیب‌های بسیار پیچیده بدون دلیل استفاده نکنیم.
تعداد افکت‌های هم‌زمان را کنترل کنیم.
روی دستگاه‌های ضعیف، افکت‌های سنگین را با دقت بیشتری بررسی کنیم.

به طور کلی، کاهش افکت‌های غیرضروری یکی از توصیه‌های مهم برای حفظ عملکرد رابط کاربری است.

Accessibility و افکت‌های حرکتی

اگر Filter را همراه Animation یا Transition استفاده می‌کنیم، بهتر است به تنظیمات دسترسی کاربران نیز توجه داشته باشیم.

CSS قابلیت prefers-reduced-motion را در اختیار ما قرار می‌دهد تا بتوانیم برای کاربرانی که در سیستم‌عامل خود حرکت‌های کمتر را ترجیح داده‌اند، افکت‌های حرکتی را کاهش دهیم.

مثلاً:

.image {
    transition: filter 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .image {
        transition: none;
    }
}

این موضوع مخصوصاً در رابط‌هایی که Filter، Transform و Animation را با هم ترکیب می‌کنند اهمیت بیشتری پیدا می‌کند.

پروژه عملی: گالری تصاویر تعاملی

در این پروژه یک گالری ساده می‌سازیم که:

تصاویر در ابتدا سیاه‌وسفید هستند.
هنگام Hover رنگی می‌شوند.
کمی بزرگ می‌شوند.
روشنایی و Saturation تغییر می‌کند.
افکت به صورت نرم اجرا می‌شود.

HTML

<section class="gallery">

    <article class="gallery-item">
        <img src="image-1.jpg" alt="تصویر اول">
    </article>

    <article class="gallery-item">
        <img src="image-2.jpg" alt="تصویر دوم">
    </article>

    <article class="gallery-item">
        <img src="image-3.jpg" alt="تصویر سوم">
    </article>

</section>

CSS

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 18px;
}

.gallery-item img {
    width: 100%;
    height: 280px;

    display: block;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(90%);

    transition:
        filter 0.5s ease,
        transform 0.5s ease;
}

.gallery-item:hover img {
    filter:
        grayscale(0%)
        brightness(105%)
        saturate(120%);

    transform: scale(1.08);
}

این پروژه یک نمونه ساده اما واقعی از استفاده هم‌زمان چند مفهوم CSS است:

Filter
   ↓
Transition
   ↓
Transform
   ↓
Hover
   ↓
Interactive UI

تمرین‌های این مقاله

تمرین ۱

یک تصویر ایجاد کنید و آن را کاملاً سیاه‌وسفید کنید.

شرط:

grayscale(100%)

باید استفاده شود.

تمرین ۲

یک تصویر ایجاد کنید که در حالت عادی تار باشد و هنگام Hover واضح شود.

راهنما:

filter: blur(...);

و:

transition: filter ...;

تمرین ۳

یک کارت طراحی کنید که هنگام Hover:

روشن‌تر شود.
رنگ‌های آن قوی‌تر شوند.
کمی بزرگ شود.

از این Filterها استفاده کنید:

brightness()
saturate()

و در کنار آن:

transform: scale()

تمرین ۴

یک PNG شفاف پیدا کنید و تفاوت این دو را بررسی کنید:

box-shadow

و:

filter: drop-shadow()

تفاوت نتیجه را مشاهده کنید.

جمع‌بندی

Filterها یکی از ابزارهای قدرتمند CSS برای ایجاد تغییرات بصری هستند. با استفاده از ویژگی filter می‌توانیم بدون تغییر فایل اصلی تصویر، ظاهر آن را در مرورگر تغییر دهیم.

مهم‌ترین توابعی که در این مقاله یاد گرفتیم عبارت‌اند از:

blur()
brightness()
contrast()
grayscale()
sepia()
saturate()
hue-rotate()
invert()
opacity()
drop-shadow()

همچنین یاد گرفتیم که می‌توان چند Filter را با هم ترکیب کرد:

filter:
    brightness(110%)
    contrast(120%)
    saturate(130%);

و با ترکیب Filter با transition و transform می‌توان رابط‌های کاربری بسیار جذاب‌تری ساخت:

.card img {
    filter: grayscale(100%);
    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

.card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

اما نکته مهم این است که طراحی حرفه‌ای به معنی استفاده از بیشترین تعداد افکت نیست؛ بلکه به معنی استفاده درست و هدفمند از افکت‌هاست.

مقاله بعدی چه خواهد بود؟

تا اینجا بخش مهمی از مباحث CSS3 را پشت سر گذاشتیم و با ویژگی‌هایی مثل:

Border
Shadow
Gradient
Transform
Transition
Animation
Filter

آشنا شدیم.

۰۰

نظرات

هنوز نظری ثبت نشده است.

Filterها در CSS

Filter در CSS چیست؟

اولین مثال با Filter

مهم‌ترین Filterهای CSS

۱. فیلتر با blur

کاربردهای رایج

۲. فیلتر با brightness

مثال کاربردی brightness

۳. فیلتر با contrast

۴. فیلتر با grayscale

تبدیل تصویر سیاه‌وسفید به رنگی هنگام Hover

۵. فیلتر با sepia

۶. فیلتر با saturate

۷. فیتلر با hue-rotate

مثال

۸. فیلتر با invert

۹. فیلتر با opacity

۱۰. فیلتر با drop-shadow

تفاوت box-shadow و drop-shadow

ترکیب چند Filter

مثال ترکیبی

چرا ترتیب Filterها مهم است؟

حذف فیلتر با none

فیلتر و Transition

فیلتر و Transform

فیلتر و Animation

ساخت افکت تصویر تار برای Background

یک نکته مهم درباره Blur

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

ساخت کارت محصول مدرن با فیلتر

HTML

CSS

استفاده از CSS Variable برای فیلتر

فیلتر روی متن

Filter روی کل یک Container

فیلتر و backdrop-filter

اشتباهات رایج در استفاده از فیلتر

اشتباه اول: استفاده بیش از حد از فیلتر

اشتباه دوم: استفاده از Blur زیاد

اشتباه سوم: تغییر رنگ برند با Hue Rotate

اشتباه چهارم: فراموش کردن Transition

نکات عملکردی

Accessibility و افکت‌های حرکتی

پروژه عملی: گالری تصاویر تعاملی

HTML

CSS

تمرین‌های این مقاله

تمرین ۱

تمرین ۲

تمرین ۳

تمرین ۴

جمع‌بندی

مقاله بعدی چه خواهد بود؟

نظرات

تفاوت `box-shadow` و `drop-shadow`

حذف فیلتر با `none`

فیلتر و `backdrop-filter`