28
تشکر

خاصیت filter در CSS

CSS3

CSS3

با استفاده از خاصیت filter در CSS میتوان عملیاتی مانند تار کردن, سیاه و سفید کردن, کنتراست و … را روی تصاویر سفارشی کرد.

این خاصیت فعلا توسط مروگر کروم و سافاری پشتیبانی میشود. Caniuse

در این مطلب قرار است توابع موجود در خاصیت filter را با هم بررسی کنیم.

در ادامه با ما همراه باشید…

برای استفاده از خاصیت filter باید مانند زیر عمل کرد:

filter: <filter-function> [<filter-function>]* | none

تابع Blur

با استفاده از این تابع میتوان میزان تاری تصویر را مشخص کرد. مثال:

.img{
  -webkit-filter: blur(1px);
  filter: blur(1px);
}
آرامگاه حافظ

آرامگاه حافظ

تابع brightness

توسط این تابع میتوان میزان روشنایی در تصویر را تنظیم کرد.

.img{
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}
آرامگاه حافظ

آرامگاه حافظ

تابع contrast

همانطور که از نام این تابع بر می آید بوسیله آن میزان کنتراست تصویر مشخص میشود.

.img{
  -webkit-filter: contrast(200%);
  filter: contrast(200%)
}
آرامگاه حافظ

آرامگاه حافظ

تابع grayscale

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

.img{
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
آرامگاه حافظ

آرامگاه حافظ

تابع invert

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

.img{
  -webkit-filter: invert(100%);
  filter: invert(100%)
}
آرامگاه حافظ

آرامگاه حافظ

چنیدین تابع دیگر مانند opacity یا drop-shadow نیز وجود دارند که به دلیل استفاده کم از گفتن آنها صرف نظر میکنم.

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

  • مهدی می‌گه:

    من این فیلتر ها رو توی یه کتاب به صورت پی دی اف که اموزش CSS3 برای سال 2010 بود خوندم ولی اصلا کار نمیکنه و میشه یه تگ div رو روی عکس قرار داد یعنی z-index اون رو بیشتر از عکس قرار بدیم تا عکس رو بپوشونه بعد یه رنگ به تگ div بدیم و در اخر میشه opacity این تگ رو کم کرد و هر ته رنگی رو به عکس داد و یا از خاصیت rgba برا تعیین رنگ استفاده کرد .
    بازم راه های زیادی هست برای دستکاری عکس ها میشه از convas استفاده کرد و یکم خلاق بود.

  • یاشار می‌گه:

    اصلا برای من کار نکرد .

  • ali abdollahzade می‌گه:

    : )


  • نظرات این مطلب بسته است.