CSS Academy · درس

Outline وBox-Shadow

أضف مخططات التركيز وتأثيرات الظلال حول العناصر باستخدام outline وbox-shadow.

Outline وBox-Shadow درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

خاصية outline

ترسم outline خطًا خارج الحدود. ولا تؤثر في التخطيط، لذلك لا تتحرك العناصر المحيطة بها. ويشبه تنسيقها المختصر تنسيق border: العرض، والنمط، واللون.

<button class="focus-demo">Focused Button</button>

outline-offset

تُبعد outline-offset الإطار عن حافة الحدود. تدفعه القيم الموجبة إلى الخارج، بينما تنقله القيم السالبة إلى الداخل، مما ينتج تأثير القص.

<button class="focus-demo">Keyboard-focused Button</button>

outline مقارنةً بـ border

الاختلافات الأساسية:

لا يؤثر Outline في تدفق التخطيط
لا يمكن ضبط Outline لكل جانب على حدة، فلا توجد outline-top
يمكن أن يكون Outline غير مستطيل، إذ يتبع أشكال حلقات التركيز في بعض المتصفحات
يوجد Outline دائمًا خارج الحدود

:focus-visible مقارنةً بـ :focus

يُفضّل استخدام :focus-visible لحلقات التركيز الناتجة عن لوحة المفاتيح. إذ يعرض الإطار فقط عندما ينتقل التركيز عبر لوحة المفاتيح، لا عند النقر بالماوس، مما يتجنب التشويش البصري لمستخدمي المؤشر مع الحفاظ على إمكانية الوصول.

<button class="focus-demo">Keyboard focus vs mouse click</button>

أساسيات box-shadow

تضيف box-shadow تأثير ظل حول العنصر. والصيغة المختصرة هي: offset-x offset-y blur-radius spread-radius color.

<div class="card">Card with soft shadow</div>

شرح قيم box-shadow

كل قيمة في box-shadow:

offset-x: الإزاحة الأفقية، والسالب منها يعني إلى اليسار
offset-y: الإزاحة الرأسية، والسالب منها يعني إلى الأعلى
blur-radius: درجة التمويه، حيث تعني القيمة 0 حواف حادة
spread-radius: تكبير أو تصغير حجم الظل
color: لون الظل، ويُوصى باستخدام RGBA

<div class="raised">Raised</div>
<div class="deep">Deep</div>

ظل الصندوق الداخلي inset

أضف الكلمة المفتاحية inset لرسم الظل داخل العنصر، وإنشاء مظهر مضغوط أو غائر.

<input class="input focus-demo" type="text" value="Focused input" />

ظلال صناديق متعددة

افصل بين الظلال المتعددة بفواصل. وتُرصّ هذه الظلال من الأمام إلى الخلف:

<span class="badge">3</span>

box-shadow مقارنةً بـ filter: drop-shadow

يتعامل box-shadow مع شكل الصندوق فقط. أما filter: drop-shadow() فيتبع الشكل الناتج، بما في ذلك الشفافية، ولذلك فهو مثالي لأيقونات PNG ذات الخلفيات الشفافة.

<div class="icon">&#9733;</div>

نظام الارتفاع باستخدام box-shadow

تحدد Material Design والأنظمة المشابهة مستويات متعددة من الظلال للتعبير عن الارتفاع البصري. اربط متغيرات CSS بقيم الظلال:

<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>

تحريك box-shadow بكفاءة

يؤدي تحريك box-shadow إلى إعادة الرسم في كل إطار. ولتحسين الأداء، حرّك opacity لظل عنصر زائف، أو استخدم filter: drop-shadow() الذي يمكن دمجه في طبقة مركبة.

تحقق سريع

ما الكلمة المفتاحية في box-shadow التي ترسم الظل داخل العنصر؟

مراجعة

ترسم outline خارج الحدود من دون التأثير في التخطيط، لذا استخدمها لمؤشرات التركيز. وتضيف box-shadow ظلالًا تعطي إحساسًا بالعمق باستخدام الإزاحة والتمويه والانتشار واللون. استخدم inset للظلال الداخلية. ويمكن تكديس الظلال المتعددة باستخدام الفواصل.

الأسئلة الشائعة

هل درس «Outline وBox-Shadow» مجاني؟

نعم — نص درس «Outline وBox-Shadow» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Outline وBox-Shadow»؟

أضف مخططات التركيز وتأثيرات الظلال حول العناصر باستخدام outline وbox-shadow. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Outline وBox-Shadow»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy