إنشاء تأثيرات دينامية على المظهر ب CSS
ما كان يحلم به مشرفو مواقع الويب أصبح حقيقةً وواقعاً ملموساً بفضل CSS3 .
اليوم أصبح متاحاً لنا التحكم بتأثيرات مظهر عناصر صفحات الويب، وهي من الميزات التي كان ينتظرها السواد الأعظم من أصحاب المواقع، بحيث أن مطوري الواجهات الأمامية أصبحوا يقتصرون على HTML و CSS لإنشاء تأثيرات الانتقال « Transitions » و الحركة « Animations » ، وهذا يعتبر إحدى نقاط القوة التي تتميز بها لغة CSS ! فبمجرد تحميل الصفحة يصبح تغيير العناصر أمراً متاحاً.
وهنا سوف نستخدم ميزة قوية في CSS: تسمى التنسيقات الزائفة أو الأشكال الزائفة ( les pseudo-formats.)
إذن اربطوا أحزمتكم وركزوا جيداً ! إننا سننطلق إلى عالم « الصيغ التي تغير المظهر » :
- ∴ التغيير عند تمرير الماوس فوق العنصر
- ˜ التغيير عند النقر عليه
- ˜ التغيير أثناء التركيز على العنصر المحدد
- ∴ التغيير عندما يتم اسهداف الرابط.
ومن خلال هاته التنسيقات سنـرى أن لغة CSS ذاهبة في غمرنا بالمفاجآت!
تمرير الماوس فوق العنصر au survol
خلال هاته الفقرة سنكتشف العديد من الصيغ و التنسيقات الزائفة ل CSS:
أول ما سنبدأ به هو :hover . مثل كل التنسيقات الزائفة الأخرى التي سنراها ، فهذه هي المعلومات التي نضيفها بعد إسم الرمز في CSS ، مثل هذا:
|
1 2 3 4 |
a:hover { } |
hover: تعني “التمرير فوق” a:hover يمكن ترجمتها على النحو التالي: « عندما نمرر الماوس فوق الرابط ».
عندما ندرج هذا الرمز يبقى لك كامل الحرية في تحديد المظهر الذي تحبه أن يظهر به الرابط عند مرور الماوس عليه . والصيغة يجب أن تضعها بين المعقوفتين {…}
إذن إمنح الحرية لِخَيَالِك ، لأنه لا يوجد أي قيد أو شرط .
لا ترتبك! فإنني لن أتركك تطيل التفكير، لأنني أعلم أن وقتك ثمين،⏰ وَجِّهْ تفكيرك إلى ما سوف أقدم عليه! 🎯 سأدرج هنا مثال على سبيل الاستئناس لا الحصر، ولك أن تنطلق بخيالك في عالم الابداع: 👣
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a /* هنا يكون الرابط افتراضي لا يخدع لتأثيرات */ { text-decoration: none; color: green; font-style: italic; } a:hover /* هنا يظهر التأثير على الرابك عند تمرير الماوس فوقه */ { text-decoration: underline; color: red; } |
في هذا المثال حددنا نسختين من أنماط الروابط:
- صيغة للروابط الافتراضية ، غير خاضعة لأي تأثير عند تمرير الماوس فوقها.
- صيغة الروابط التي يتغير مظهرها عند تمرير الماوس فوقها.
والنتيجة هي في الشكل التالي:
تغيير المظهر عند تمرير الماوس فوق الرابط
من خلال التأثيرات التي رأينا للتّو، يتبين لنا أن CSS برهن لنا أنه قادر على خلق تأثيرات ممتعة على الروابط،! ولكن هذا لا يعني أننا سنبقى حبيسي الروابط ، بل سنتعداها إلى استخدام تغييرات المظهر على أي عنصر في صفحتنا، على سبيل المثال، يمكننا تغيير مظهر الفقرات حين تمرر الماوس فوقها تماماً مثل الروابط:
|
1 2 3 4 5 |
p:hover /* عندما نمرر الماوس فوق الفقرة */ { text-decoration: line-through; color: #800080; } |
هنا مثلا يتم تغيير لون الفقرة مع التشطيب على الكتابة بسطر
عند النقر وأثناء التحديد
هنا سنكتشف كيف يتم التفاعل بشكل أكثر دقة في CSS. و سنرى هنا كيفية تغيير مظهر العناصر عندما نضغط عليها وعندما يتم تحديدها!
active: لحظة النقر
التنسيق الزائف active: يسمح بتطبيق نمطٍ معينٍ لحظة النقر. من الناحية العملية ، يتم استخدامه فقط على الروابط.
هذا الرابط يحتفظ بمظهر التأثير لوقت قصيرٍ جدًا: وذلك لأن التغيير يحدث عند الضغط على زر الماوس. ولن يكون مرئياً بالضرورة دائماً .
على سبيل المثال ، يمكننا تغيير لون خلفية الرابط عندما نضغط عليه:
|
1 2 3 4 |
a:active /* عندما ينقر المستخدم على الرابط */ { background-color: #A6FFA6; } |
يتغير لون خلفية الرابط عندما ينقر المستخدم على الرابط
focus: عند تحديد العنصر
هنا الأمر مختلف عن سابقه قليلاً. التنسيق الزائف: focus: يسمح بتطبيق نمطٍ معينٍ عند تحديد العنصر.
ماذا يعني هذا؟
بمجرد النّقر على الرابط، يحتفظ هذا الرابط بصفته كعنصر محدد بحيث تظهر حدود صغيرة من حول الرابط.
دعونا نطبق هذا التأثير في الوقت الراهن على الروابط:
|
1 2 3 4 |
a:focus /* عندما يقوم الزائر باختيار الرابط */ { background-color: #A6FFA6; } |
إذا كنت تستعمل المتصفح Google Chrome أو Safari ، فإن التأثير لن يكون مرئياً إلا إذا ضغطت على المفتاح Tab.
إذا كان الرابط محدداً سلفاً
في الغالب و بشكل افتراضي يقوم المتصفح بتلوين الروابط التي تم استهدافها بلون أرجواني (violet) ! يرى البعض أن هذا اللَّون غير مرغوب فيه و يجب تغيير النمط ليكون أكثر جاذبية!
و لفعل ذلك فإن CSS يسمح لنا بتغيير هذا المظهر باستعمال :visited الذي يعني أن هذا الرابط تمَّتْ زيارته . من ناحية الممارسة العملية ، فإننا لن نستطيع فعل الكثير على مظهر الروابط سوى تغيير لونها .
نبقى مع التطبيق في المثال التالي:
|
1 2 3 4 |
a:visited /* عندما يتم زيارة الرابط من طرف الزائر */ { color: #DC32BE; } |
إنشاء تأثيرات دينامية على المظهر ب CSS
الروابط التي تمت زيارتها باللون الوردي اللامع
إذا كنت لا ترغب في تلوين الروابط التي تمت زيارتها بالفعل، فإنه فيتعين عليك تطبيق نفس لون الروابط . ” تقوم العديد من مواقع الويب بهذا بما في ذلك jabism.com! “.
خلاصة الــدرس:
في CSS ، يمكنك استعمال عدة تأثيرات على مظهر عناصر معينة عن طريق الحركة والتنقل ،وذلك بعد تحميل الصفحة. و نستخدم لهذا الغرض التنسيقات الزائفة.
- يتيح لك التنسيق الزائف: hover: تغيير مظهر عبر تمرير الماوس فوق العنصر المقصود.
- على سبيل المثال: a: hover لتغيير مظهر الروابط عند تمرير الماوس عليه.
- يقوم التنسيق الزائف: active: بتعديل مظهر الروابط لحظة النقر
- يقوم التنسيق الزائف: visited: بتعديل مظهر الروابط للإشارة بأن الرابط تم زيارته.
- يتيح لك التنسيق الزائف: focus: تغيير مظهر العنصر المحدد.
إلى هنا تكون حصة اليوم قد انتهت ، وستكون لنا حصة خاصة بالتأثير على الصور باستعمال CSS
فـــــي أمـــان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.