انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: ظلال الصناديق في لغة CSS

Inner Shadows With Inset Keyword الظلال الداخلية بالكلمة inset

صمم عمقاً بصرياً واقعياً للبطاقات والأزرار عبر ظلال الصناديق في لغة CSS باستخدام الإزاحة والتمويه ونصف قطر الانتشار والظلال الغائرة وحلقات التركيز الدائرية دون التأثير في التخطيط.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تقلب الكلمة المفتاحية inset اتجاه الرسم من ظل خارجي إلى ظل داخلي غائر يرتسم داخل حدود الإطار مباشرة فوق خلفية الصندوق وتحت نصوصه. ويُستثمر هذا الأسلوب بكثرة في حقول الإدخال النصية ومسارات المؤشرات وحالة الضغط الفعلي :active على الأزرار.

الصف 2 كود برمجي
CSS 
.text-well {
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.16);
}
جرّب بنفسك

جميع فقرات هذا الدرس (ظلال الصناديق في لغة CSS)