فیلتر در CSS

با ویژگی فیلتر در CSS آشنا می شویم.

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

ویژگی فیلتر CSS بدون استفاده از برنامه های ویرایش عکس مانند Adobe Photoshop ، جلوه های بصری را به تصاویر یا سایر عناصر اضافه می کند:

img.blurred {
    -webkit-filter: blur(10px); /* Opera, Chrome, Safari */
    filter: blur(10px);
}

می توانید چندین فیلتر را تنظیم و متحرک سازی کنید:

Description	Filter
تصویر را تار می کند	()blur
روشنایی تصویر را کم یا زیاد می کند	()brightness
کنتراست تصویر را کم یا زیاد می کند	()contrast
سایه ای را در پشت تصویر اضافه می کند	()dropshadow
تصویر را سیاه و سفید می کند	()grayscale
رنگ تصویر را تغییر می دهد	()hue-rotate
رنگ های تصویر را معکوس می کند	()invert
شفافیت تصویر را اصلاح می کند	()opacity
میزان اشباع تصویر را کم یا زیاد می کند	()saturate
تصویر را به رنگ قهوه ای تنظیم می کند	()sepia

در بخش های بعدی ، ما به طور کامل در مورد هر فیلتر CSS بحث خواهیم کرد.

توجه: اگر یک فیلتر از درصد به عنوان مقادیر استفاده کند ، مقادیر اعشاری نیز پذیرفته می شوند (75٪ برابر با 0.75 خواهد بود).

تغییر رنگ های تصویر

بیشتر فیلترهای CSS به شما امکان می دهد رنگ تصویر را دستکاری کنید. بیایید آنها را با استفاده از مثالهای کد گویا مرور کنیم.

روشنایی()

فیلتر روشنایی CSS () ضریب خطی تصاویر را تنظیم می کند:

img.bright {
    -webkit-filter: brightness(150%); /* Opera, Chrome, Safari */
    filter: brightness(150%);
}

مقادیر کمتر از 100٪ تصاویر را تیره تر می کند. مقادیر بالاتر از 100٪ تصاویر را روشن تر می کند.

تضاد()

فیلتر کنتراست () CSS کنتراست تصاویر را کنترل می کند:

img.contrast {
    -webkit-filter: contrast(150%); /* Opera, Chrome, Safari */
    filter: contrast(150%);
}

مقادیر کمتر از 100٪ کنتراست را کاهش می دهد و کسانی که بیش از 100٪ هستند آن را افزایش می دهند.

رنگ-چرخش ()

فیلتر hue-rotate در CSS به تصاویر اثر چرخش hue می دهد:

img.hue {
    -webkit-filter: hue-rotate(45deg); /* Opera, Chrome, Safari */
    filter: hue-rotate(45deg);
}

مقدار زاویه تعداد درجه اطراف دایره رنگی را که نمونه های ورودی تنظیم می شود ، نشان می دهد. مقدار پیش فرض 0 درجه تصویر را تغییر نمی دهد.

تیرگی ()

فیلتر CSS opacity () میزان شفافیت مشخصی را برای تصویر اعمال می کند:

img.opacity {
    -webkit-filter: opacity(50%); /* Opera, Chrome, Safari */
    filter: opacity(50%);
}

مقدار 100٪ شفافیت اصلی تصاویر را به جا می گذارد و 0٪ آن را کاملا شفاف می کند. شما نمی توانید از مقادیر منفی استفاده کنید.

اشباع ()

فیلتر CSS saturate () شدت رنگها را در تصاویر تنظیم می کند:

img.saturated {
    -webkit-filter: saturate(200%); /* Opera, Chrome, Safari */
    filter: saturate(200%);
}

مقدار 0٪ تصویر را سیاه و سفید می کند. همچنین می توانید مقادیر بیش از 100٪ را اعمال کنید ، اما این امر باعث شدت رنگ بسیار بالا می شود. شما نمی توانید از مقادیر منفی استفاده کنید.

تبدیل طرح های رنگی

برای تغییر کامل رنگ بندی تصویر ، می توانید از سه فیلتر CSS استفاده کنید: مقیاس خاکستری () ، قهوه ای () و معکوس ().

مقیاس خاکستری ()

فیلتر مقیاس خاکستری CSS تصاویر سیاه و سفید ایجاد می کند:

img.gray {
    -webkit-filter: grayscale(20%); /* Opera, Chrome, Safari */
    filter: grayscale(20%);
}

با نشان دادن درصد های خاص می توانید نسبت مقیاس خاکستری CSS را کنترل کنید: 100٪ تصویری کاملاً در مقیاس خاکستری ایجاد می کند و 0٪ تصویری را تغییر نمی دهد. بین این دو مقدار را انتخاب کنید تا رنگ ها را به میزان لازم کاهش دهید.

sepia ()

فیلتر CSS sepia () رنگ قهوه ای مایل به قرمز را برای تصاویر اعمال می کند:

img.sepia {
    -webkit-filter: sepia(80%); /* Opera, Chrome, Safari */
    filter: sepia(80%);
}

یک مقدار 100٪ تصاویر را کاملاً به رنگ قهوه ای تبدیل می کند. فیلتر با مقادیر منفی کار نمی کند.

img.multiple-filters {
    -webkit-filter: saturate(150%) blur(5px);  /* Opera, Chrome, Safari */
    filter: saturate(150%) blur(5px);
}

معکوس کردن ()

فیلتر CSS معکوس () طرح رنگ تصویر را معکوس می کند ، به این معنی که هر رنگ دقیقاً عکس آن می شود. به عنوان مثال ، رنگ قرمز فیروزه ای و سبز به سرخابی تبدیل می شود:

img.inverted {
    -webkit-filter: invert(80%); /* Opera, Chrome, Safari */
    filter: invert(80%);
}

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

تاری ()

تاری CSS () تاری گاوسی را به تصاویر اضافه می کند. می توانید مقادیر طول را در پرانتز اضافه کنید و نشان دهید که چند پیکسل اثر در یکدیگر ترکیب می شود:

img.blur {
    -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
    filter: blur(10px);
}

توجه: CSS blur() درصدی را قبول نمی کند.

سایه افتادن ()

فیلتر CSS drop-shadow () جلوه ای سایه بر تصاویر اعمال می کند

img.shadow {
    -webkit-filter: drop-shadow(5px 5px 15px blue); /* Chrome, Safari, Opera */
    filter: drop-shadow(5px 5px 15px blue);
}

سایه CSS می تواند پنج مقدار داشته باشد:

• offset-x و offset-y نشان دهنده جابجایی سایه است.
• blur-radius میزان تاری بودن سایه را نشان می دهد.
• شعاع گسترش نشان می دهد که سایه چه مقدار فضای را اشغال می کند.
• رنگ نشان دهنده رنگ سایه است.

استفاده از چندین فیلتر در CSS

می توانید چندین فیلتر CSS را با هم ترکیب کنید تا حتی نتایج بهتری بگیرید. برای تعریف چندین اثر ، باید آنها را در یک عبارت بنویسید ، و آنها را با کاما از هم جدا کنید.

مثال زیر هم از تاری () CSS و هم از روشنایی () استفاده می کند:

img.multiple-filters {
    -webkit-filter: saturate(150%) blur(5px);  /* Opera, Chrome, Safari */
    filter: saturate(150%) blur(5px);
}

فیلترهای متحرک

فیلترهای CSS قابل انیمیشن هستند. بنابراین ، می توانید ترکیبات مختلفی ایجاد کنید و تصاویر را دگرگون کنید:

@-webkit-keyframes TRANSITION-IN {
    0% {
        -webkit-transform: scale(0.5);
        opacity: 0;
        -webkit-filter: blur(70px);
    }
    100% {
        -webkit-transform: scale(1);
        -webkit-filter: blur(0px) !important;
    }   
}

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

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