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