افکت سفید و سیاه (Grayscale) کردن تصاویر توسط CSSReviewed by Datacss.ir on Feb 2Rating:
برای انجام این کار کافی است کد CSS زیر را به تصویر مورد نظر خود اختصاص دهید. در این مثال فرض بر آن است که شما قصد دارید تصویر در حالت پیش فرض به صورت سفید و سیاه باشد:
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
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);
filter: none;
-webkit-filter: grayscale(0);
سایر مقالات مرتبط :
- آشنایی با ساختار نوشتاری CSS
- مزایای طراحی سایت با وردپرس
- معرفی روش‌های تشخیص مشکل در لپ تاپ و کامپیوتر
- معرفی شرکت طراحی سایت ریگل
- مزایای داشتن یک سایت خوب چیست؟
- برای بهبود فروش در اینستاگرام چه باید کرد؟
- 3 اصل جادویی و قدرتمند برای طراحی سایت حرفه ای
- سئو سایت چیست و چه کاربردی دارد؟
- چرا به وبسایت نیاز داریم؟
- اهمیت ریسپانسیو بودن یک وب سایت
- نکاتی پیرامون طراحی سایت شرکتی و فروشگاهی که باید توجه شود ؟!
- نمایش قسمت مخفی سایت برای اعضای سایت