إنشاء تأثيرات دينامية على المظهر

ما كان يحلم به مشرفو مواقع الويب أصبح حقيقةً وواقعاً ملموساً بفضل CSS3 .

اليوم أصبح متاحاً لنا التحكم بتأثيرات  مظهر عناصر صفحات الويب، وهي من الميزات التي كان ينتظرها السواد الأعظم من أصحاب المواقع، بحيث أن مطوري الواجهات الأمامية أصبحوا يقتصرون على HTML و CSS لإنشاء تأثيرات الانتقال « Transitions » و الحركة « Animations » ، وهذا يعتبر إحدى نقاط القوة التي تتميز بها لغة CSS ! فبمجرد تحميل الصفحة يصبح تغيير العناصر أمراً متاحاً.

وهنا سوف نستخدم ميزة قوية في CSS: تسمى  التنسيقات الزائفة أو الأشكال الزائفة ( les pseudo-formats.) 

إذن اربطوا أحزمتكم وركزوا جيداً ! إننا سننطلق إلى عالم  « الصيغ التي تغير المظهر » : 

  • التغيير عند تمرير الماوس فوق العنصر
  • التغيير عند النقر عليه 
  • التغيير أثناء التركيز  على العنصر المحدد 
  • التغيير عندما يتم اسهداف الرابط.

ومن خلال هاته التنسيقات سنـرى أن لغة CSS ذاهبة في غمرنا بالمفاجآت!

 

تمرير الماوس فوق العنصر au survol


خلال هاته الفقرة سنكتشف العديد من الصيغ و التنسيقات الزائفة ل CSS:

   أول ما سنبدأ به هو  :hover   . مثل كل التنسيقات الزائفة الأخرى التي سنراها ، فهذه هي المعلومات التي نضيفها بعد إسم الرمز  في CSS ، مثل هذا:

 

 

hover:  تعني “التمرير فوق

a:hover يمكن ترجمتها على النحو التالي: « عندما نمرر الماوس فوق الرابط ».

عندما ندرج هذا الرمز يبقى لك كامل الحرية في تحديد المظهر الذي تحبه أن يظهر به الرابط عند مرور الماوس عليه .  والصيغة يجب أن تضعها بين المعقوفتين {…} 

إذن إمنح الحرية لِخَيَالِك ، لأنه لا يوجد أي قيد أو شرط .

لا ترتبك!  فإنني لن أتركك تطيل التفكير، لأنني أعلم أن  وقتك ثمين، وَجِّهْ تفكيرك إلى ما سوف أقدم عليه! 🎯 سأدرج هنا مثال على سبيل الاستئناس لا الحصر، ولك أن تنطلق بخيالك في عالم الابداع: 👣

 

 

في هذا المثال حددنا نسختين من أنماط الروابط:

  1. صيغة للروابط الافتراضية ، غير خاضعة لأي تأثير عند تمرير الماوس فوقها.
  2. صيغة الروابط التي يتغير مظهرها عند تمرير الماوس فوقها.

والنتيجة هي في الشكل التالي:

 

تغيير المظهر عند تمرير الماوس فوق الرابط

 

من خلال التأثيرات التي رأينا للتّو، يتبين لنا أن CSS برهن لنا أنه قادر على خلق تأثيرات ممتعة على الروابط،! ولكن هذا لا يعني أننا سنبقى حبيسي الروابط ، بل سنتعداها إلى استخدام  تغييرات المظهر على أي عنصر في صفحتنا، على سبيل المثال، يمكننا تغيير مظهر الفقرات حين تمرر الماوس فوقها تماماً مثل الروابط:

هنا مثلا يتم تغيير لون الفقرة مع التشطيب على الكتابة بسطر

تابع الدرس في الصفحة الموالية

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

عدد المشاهدات لهذه المقالة : 330
انتقل إلى أعلى
%d مدونون معجبون بهذه: