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

شروع موضوع توسط maryamsitedar ‏27 سپتامبر 2014 در انجمن زبان HTML

کلمات کلیدی:
  1. maryamsitedar

    maryamsitedar New Member

    ارسال‌ها:
    25
    تشکر شده:
    4
    امتیاز دستاورد:
    1

    برای انجام این کار کافی است کد CSS زیر را به تصویر مورد نظر خود اختصاص دهید. در این مثال فرض بر آن است که شما قصد دارید تصویر در حالت پیش فرض به صورت سفید و سیاه باشد:
    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);
    }
    سورس:
    افکت سفید و سیاه (Grayscale) کردن تصاویر
     
    آخرین ویرایش: ‏27 سپتامبر 2014
    نوشته شده توسط maryamsitedar در ‏27 سپتامبر 2014

به اشتراک بگذارید