• 0

كيف أحول الصورة إلى نمط Grayscale باستخدام html/css؟

رأيت في أحد المواقع أن الصورة تتغير إثر مرور مؤشر الفأرة فوقها إلى نمط Grayscale، فكيف يمكنني فعل ذلك باستخدام html/css فقط؟ وهل هذا ممكن؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

هناك خاصية في css3 تدعى filter مع إضافة اسم المتصفح :

-webkit-filter //chrome
  -moz-filter //mozila
  -ms-filter //IE
  -o-filter // Opera

هذه الخاصية تقبل القيمة

grayscale(100%);

مع إمكانية تغيير النسبة المئوية، حسب الرغبة في شدة الفلتر.

مثال،:

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

مصادر:

1

2

3

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن