كيفية تطبيق خاصية Opacity and Hover فى Css

الدرس: كيفية تطبيق خاصية Opacity and Hover فى Css

المدة: 5 دقائق

وصف مختصر:

تعلم كيفية ضبط شفافية العناصر وتغييرها عند التفاعل، وتخصيص الروابط التي تمت زيارتها باستخدام CSS لتحسين تجربة المستخدم.

وصف الدرس

تعلم تأثير الشفافية والتفاعل باستخدام CSS


في هذه الدرس، سنتناول كيفية استخدام خاصية الشفافية (Opacity) في CSS لتغيير مظهر العناصر وجعلها شفافة أو ظاهرة حسب التفاعل. سنتعلم أيضًا كيفية تخصيص الألوان للروابط المزارة باستخدام :visited.

ما الذي ستتعلمه؟



  • استخدام opacity لجعل العناصر شفافة تمامًا (قيمة 0) أو شفافة بنسب مئوية (من 0.1 إلى 1).

  • تغيير شفافية العناصر عند تمرير مؤشر الماوس باستخدام :hover.

  • تحديد لون مخصص للروابط التي تمت زيارتها باستخدام :visited.


أهمية هذه المهارات


تتيح لك هذه المهارات تحسين تجربة المستخدم وإضفاء لمسات إبداعية على تصميمات مواقعك. ستتعلم كيفية:

  • إنشاء تأثيرات بصرية متجاوبة.

  • تعزيز التفاعل مع المستخدم.

  • تحسين إمكانية قراءة المحتوى والتنقل بين الروابط.


مثال عملي


إليك مثال يوضح كيفية تطبيق هذه المفاهيم:

/* تغيير شفافية عنصر */
.element {
opacity: 0.5; /* شفافية بنسبة 50% */
}

/* إظهار العنصر عند التمرير */
.element:hover {
opacity: 1; /* يظهر العنصر بالكامل */
}

/* تخصيص لون الروابط المزارة */
.element:visited {
color: purple; /* لون البنفسجي للروابط المزارة */
}

ابدأ الآن واحصل على شهادة معتمدة


مع كل درس تكمل تعلمه، تقترب خطوة من الحصول على شهادة معتمدة في تطوير الويب. انضم الآن إلى دبلومة تطوير الويب وكن محترفًا في CSS.

استعد لتصميم مواقع ويب مميزة تجذب الانتباه وتحسن تجربة المستخدم.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي كيفية تطبيق خاصية Opacity and Hover فى Css

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

ملفات السي اس اس اكواد تنسيق عناصر صفحة الويب لهذا الدرس

ملفات html اكواد تنسيق عناصر صفحة الويب لهذا الدرس

ملحقات ال PDF

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF

كتاب شرح مساعد لفهم Position,opacity,overflow,mouse events

الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

has been added to the cart. View Cart