هذا الدرس من الدورة التدريبية: دورة تدريبية لغة 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 لإنشاء تصاميم وتنسيق صفحات الإنترنت