إنشاء المظاهر الديناميكية ب css (الحيوية )

 المظاهر الديناميكية

css يمكننا أيضا من إضافة تأثيرات بطريقة حيوية أو بديناميكية. يعني تغيير الأشكال دون إعادة تحميل الصفحة وهذه ميزة جميلة في css .
سنرى اليوم أربع طرق:
- الماوس فوق العنصر؛
- عند الضغط؛
- عند الإختيار؛
- شيء سبق وزرناه؛
ف css عالم جميل كل يوم تكتشف شيء يبهرك.

الماوس فوق العنصر

لتغيير مظهر عنصر فقط عند مرور الماوس عليه نضيف الصيغة الزائفة hover: لأي وسم أو class كهذا الشكل:

a:hover
{
}

hover: تغيير العنصر الدي فوقه ماوس. a:hover ستطرجم إلى تغيير الرابط الدي فوقه الفأرة الآن يمكنك التلاعب بالروابط لأنه لا حدود لما قد تضيفه لها أنت و دوق أما أنا فهذا ما اخترته:

a
{
text-decoration: none;
color: red;
font-style: italic;
}
a:hover
{
text-decoration: underline;
color: green;
}

هنا أضافنا خاصيتين:

الإفتراضي الذي يظهر مباشرة للزائر.

عند مرور الفأرة عليه.

هكذا سيظهر:

أنا أضفت المتال على الروابط ولكن يمكن أن تجربها على أي شيء مثلا على النصوص:

p:hover 
{
}

عند الضغط

الآن كيف نضع شكل خاص بالضغط تستعمل فقط في الروابط عن طريق active: الرابط يحتفظ على الشكل ما دام أصبعك لا يزال فوق الزر الأيسر للفأرة:

a:active
{
background-color: #FFCF66;
}

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

focus: تقوم بتطبيق النمط عند تحديد العنصر و هذه الطريقة تعمل مع أوسمة أخرى لم نراها بعد المهم لتجربتها أدخل من IE لأنها لا تعمل على جوجل كروم:

a:focus 
{
background-color: #FFCC66;
}

الروابط التي سبق زيارتها:

هذه الطريقة تكون إفترادية في معضم المتصفحات لكن يمكنك إضافتها و تغيير الألوان الإفترادية عن طريق visited:

a:visited 
{
color: #AAA; 
}

و هكذا ستظهر الروابط التي سبق زيارتها باللون الرمادي.لو أرت أن تظهر الروابط التي سبق زيارتها كالأخرى فاجعل لهم نفس اللون. لكن تبقى هذه الخاصية جميلة فحتى جوجل تستعملها. أتمنى أن يكون الدرس قد نال إعجابكم.