تأثيرات التركيز (Focus)
جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 9 من 43.
تتيح لك الفئة الزائفة :focus تنسيق عنصر عندما يحصل على التركيز، كما يحدث عند النقر عليه أو الانتقال إليه باستخدام مفتاح الجدولة في لوحة المفاتيح. إنها طريقة رائعة لإبراز العنصر الذي تتفاعل معه! على سبيل المثال:
<input type="text">نسّق عنصر input عند حصوله على التركيز:
input {
border: 2px solid #ccc;
}
input:focus {
border-color: #4285f4;
box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}عندما ينقر المستخدم على حقل input هذا أو ينتقل إليه باستخدام مفتاح الجدولة، سيتغير لون border إلى blue وسيظهر shadow أزرق خفيف حوله.
التحدي
سهلأنشئ قاعدة CSS تطبّق تنسيقًا خاصًا على text input عندما يحصل على focus.
- عند focus، يغيّر border إلى البرتقالي rgb(255, 152, 0)
- عند focus، يضيف background color أصفر rgb(255, 243, 224)
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<title>Focus Effects</title>
<style>
input{
border: 2px solid gray;
padding: 8px;
outline: none;
}
/* Write your CSS here */
</style>
</head>
<body>
<h3>Focus Effects Demo</h3>
<input type="text" placeholder="Type here...">
<button>Click Me</button>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة2الفئات الزائفة التفاعلية
الفئات الزائفة (Pseudo-Classes)تأثيرات التمرير (Hover)تأثيرات التركيز (Focus)الأنماط النشطة (Active)تحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعةتدرّب بنفسك: Playground لـ Web