ال تم إدخال أنماط جديدة في CSS3 منح محترفي الويب القدرة على إضافة تأثيرات تشبه Photoshop إلى صفحاتهم. تأثير مرئي واحد يمكنك إضافته باستخدام CSS3 هو جعل صفحات الويب تفاعلية من خلال إنشاء مناطق باهتة يتم التركيز عليها عندما يفعل زائر الموقع شيئًا ، مثل التمرير فوق هذا العنصر. يستخدم هذا التأثير مزيجًا من العتامة والانتقال.
تغيير التعتيم على Hover
أحد العناصر التفاعلية هو تغيير عتامة الصورة عندما يحوم العميل فوق هذا العنصر. في هذا المثال (يتم عرض HTML أدناه) ، نستخدم صورة لها صفة class جرايدوت.
لجعلها غير نشطة ، أضف قواعد الأنماط التالية إلى ورقة أنماط CSS الخاصة بك:
.greydout {
- عتامة مجموعة الويب: 0.25 ؛
-موز-عتامة: 0.25 ؛
العتامة: 0.25 ؛
}
تترجم إعدادات التعتيم هذه إلى 25 بالمائة. هذا يعني أنه سيتم عرض الصورة على أنها 1/4 من شفافيتها العادية. سيكون التعتيم تمامًا بدون شفافية 100 بالمائة ، بينما سيكون 0 بالمائة شفافًا تمامًا.
بعد ذلك ، لتوضيح الصورة (أو بشكل أكثر دقة ، لتصبح معتمة تمامًا) عند تحريك الماوس فوقها ، يمكنك إضافة ما يلي:
.greydout: مرر {
- عتامة مجموعة الويب: 1 ؛
-موز-عتامة: 1 ؛
العتامة: 1 ؛
}
المزيد من تعديلات التعتيم
ستلاحظ ، بالنسبة لهذه الأمثلة ، أننا نستخدم إصدارات القاعدة التي يسبقها البائع لضمان التوافق مع الإصدارات السابقة للإصدارات الأقدم من تلك المتصفحات. في حين أن هذه ممارسة جيدة ، تدعم المتصفحات قاعدة العتامة جيدًا، ومن الآمن إسقاط تلك السطور التي يبدأها البائع.
ومع ذلك ، لا يوجد سبب لعدم تضمين هذه البادئات إذا كنت تريد ضمان دعم إصدارات المستعرض الأقدم. فقط تأكد من اتباع أفضل الممارسات المقبولة لإنهاء الإعلان بالإصدار العادي غير المسبوق من النمط.
عند نشره على موقع ما ، فإن ضبط العتامة هذا هو تغيير مفاجئ. أولاً ، إنه رمادي ، وبعد ذلك ليس كذلك ، مع عدم وجود حالات مؤقتة بين هاتين الدولتين. إنه مثل مفتاح الضوء - تشغيل أو إيقاف. قد يكون هذا هو ما تريده ، ولكن قد ترغب أيضًا في تجربة تغيير أكثر تدريجيًا.
لإضافة تأثير لطيف وجعل هذا التلاشي تدريجيًا ، أضف ملف انتقال منشأه:
.greydout
فئة: .greydout {
- عتامة مجموعة الويب: 0.25 ؛
-موز-عتامة: 0.25 ؛
العتامة: 0.25 ؛
-webkit- الانتقال: كل 3s سهلة ؛
-موز-الانتقال: سهولة كل 3 ثانية ؛
-ms- الانتقال: كل 3s سهولة ؛
-o-Transition: كل 3s سهلة ؛
الانتقال: سهولة كل 3 ثوانٍ ؛
}