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

 

عند النقر  وأثناء التحديد


هنا سنكتشف كيف يتم التفاعل بشكل أكثر دقة في CSS. و سنرى هنا كيفية تغيير مظهر العناصر عندما نضغط عليها وعندما يتم تحديدها!

active: لحظة النقر

التنسيق الزائف active: يسمح بتطبيق نمطٍ معينٍ لحظة النقر. من الناحية العملية ، يتم استخدامه فقط على الروابط.

هذا الرابط يحتفظ بمظهر التأثير لوقت قصيرٍ جدًا:  وذلك لأن  التغيير يحدث عند الضغط على زر الماوس. ولن يكون مرئياً بالضرورة دائماً .

 

على سبيل المثال ، يمكننا تغيير لون خلفية الرابط عندما نضغط عليه:

 

يتغير لون خلفية الرابط  عندما ينقر المستخدم على الرابط

 

  focus:  عند تحديد العنصر

هنا الأمر مختلف عن سابقه  قليلاً. التنسيق الزائف:  focus: يسمح بتطبيق نمطٍ معينٍ عند تحديد العنصر.

ماذا يعني هذا؟

بمجرد النّقر على الرابط، يحتفظ هذا الرابط  بصفته كعنصر محدد بحيث  تظهر حدود  صغيرة من حول الرابط.

دعونا نطبق هذا التأثير في الوقت الراهن على الروابط:

 

إذا كنت تستعمل  المتصفح  Google Chrome أو  Safari ،  فإن التأثير لن يكون مرئياً إلا إذا ضغطت على المفتاح  Tab.

 

 

إذا كان الرابط محدداً سلفاً


في الغالب و بشكل افتراضي يقوم المتصفح بتلوين الروابط التي تم استهدافها بلون أرجواني (violet) ! يرى البعض أن هذا اللَّون غير مرغوب فيه و يجب تغيير النمط ليكون أكثر جاذبية!

و لفعل ذلك فإن CSS يسمح لنا بتغيير هذا المظهر باستعمال :visited  الذي يعني أن هذا الرابط تمَّتْ زيارته .  من ناحية الممارسة العملية ، فإننا لن نستطيع فعل الكثير على مظهر الروابط سوى تغيير لونها .

نبقى مع التطبيق في المثال التالي:

 

 

الروابط التي تمت زيارتها باللون الوردي اللامع

 

إذا كنت لا ترغب في تلوين الروابط التي تمت زيارتها بالفعل، فإنه فيتعين عليك تطبيق نفس لون الروابط . ” تقوم العديد من مواقع الويب بهذا بما في ذلك jabism.com! “.

الإستثناء الواضـح:
 محرك البحث Google يقوم بتلوين الروابط التي تم زيارتها ، وهذا أعتبره ميزة مطلوبة في محرك البحث حتى لا نقوم كل مرة بالدخول لنفس الرابط، أو العكس ، تلوينها يساعد الباحث على العثور بسرعة على الرابط الذي سبق له زيارته، والذي هو في الأصل هدف بحته.

 

 خلاصة الــدرس:


في CSS ، يمكنك استعمال عدة تأثيرات على مظهر عناصر معينة عن طريق الحركة والتنقل ،وذلك بعد تحميل الصفحة. و نستخدم لهذا الغرض التنسيقات الزائفة.

  • يتيح لك التنسيق الزائف: hover: تغيير مظهر  عبر تمرير الماوس فوق العنصر المقصود.
  • على سبيل المثال:   a: hover لتغيير مظهر الروابط عند تمرير الماوس عليه.
  • يقوم التنسيق الزائف: active: بتعديل مظهر الروابط لحظة النقر 
  • يقوم التنسيق الزائف: visited: بتعديل مظهر الروابط للإشارة بأن الرابط تم زيارته.
  • يتيح لك التنسيق الزائف: focus:  تغيير مظهر العنصر المحدد.

إلى هنا تكون حصة اليوم قد انتهت ، وستكون لنا حصة خاصة بالتأثير على الصور باستعمال CSS

فـــــي أمـــان الله

اترك تعليقًا

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

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