افکت سفید و سیاه (Grayscale) کردن تصاویر توسط CSS

برای انجام این کار کافی است کد CSS زیر را به تصویر مورد نظر خود اختصاص دهید. در این مثال فرض بر آن است که شما قصد دارید تصویر در حالت پیش فرض به صورت سفید و سیاه باشد:

در این مطلب که از نامش پیداست،  افکت سفید و سیاه (Grayscale) کردن تصاویر توسط CSS را توسط کد CSS برای شما شرح دهیم.

در زیر قطعه کدی را آورده ایم که شرح افکت سیاه و سفید یا Grayscale روی تصاویر را نشان می دهد.

 img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

و برای آنکه تصویر با موس اور کاربر به حالت عادی و رنگی بازگردد می توانید از کد CSS زیر استفاده نمایید:

 img:hover {
filter: none;
-webkit-filter: grayscale(0);