تأثير الإزاحة عند التركيز

الدرس 15 من 19 في دورة محاكاة صفحة تسجيل الدخول لـ Netflix | مشروع Front-end على Coddy.

كما نرى أدناه، هناك إزاحة طفيفة في نص التسمية (label) بعد النقر على حقول الإدخال.

هذا الكود عبارة عن مقتطف CSS يقوم بتنسيق عناصر التحكم في النموذج بناءً على حالتها باستخدام الفئة الزائفة (pseudo-class) :is().

.form-control input:is(:focus,:valid): يستهدف هذا المحدد عناصر <input> التي تحمل الفئة .form-control والتي تكون إما في حالة التركيز (:focus) أو تحتوي على إدخال صالح (:valid). عند استيفاء أي من هذين الشرطين، يتم تعيين لون الخلفية إلى #444، ويتم ضبط الحشو (padding) إلى 16px 20px 0.
.form-control input:is(:focus, :valid)~label: يستهدف هذا المحدد عناصر <label> التي تأتي كأشقاء (siblings) لعناصر <input> المحددة مسبقاً بنفس الشروط: إما في حالة التركيز أو تحتوي على إدخال صالح. عند استيفاء أي من الشرطين، يتم تعيين حجم الخط للتسمية إلى 0.75 rem، ويتم إزاحتها رأسياً للأعلى بنسبة -130%، غالباً لإنشاء تأثير التسمية العائمة (floating label) فوق حقل الإدخال.

التحدي

سهل

استخدم كود التلميح كإجابة، ولكن جربه بنفسك أولاً.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>