Box Shadow CSS تعليمي - كيفية إضافة الظل المسقط إلى أي عنصر HTML

يمكننا إضافة الظل المسقط لأي عنصر HTML باستخدام خاصية CSS box-shadow. إليك الطريقة.

إضافة الظل الأساسي

لنقم أولاً بإعداد بعض عناصر HTML الأساسية لإضافة ظلال الإسقاط إلى:

 Box1 Box2 Box3 

ثم أضف بعض CSS الأساسي:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

والنتيجة هي ثلاثة مربعات سوداء فقط سيكون من السهل علينا إضافة ظلال مسقطة إليها من خلال استدعاء معرفهم الفريد:

إعداد عناصر HTML

لإضافة ظل مسقط أساسي ، دعنا نستخدم box-shadowالخاصية في المربع 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
إضافة الظل المسقط الأساسي إلى المربع 1

لدينا 3 معلمات هنا. أول 2 هما ، على التوالي ، إزاحة x وإزاحة y. قاموا بتعيين موقع الظل المسقط.

الإزاحة مرتبطة بالأصل ، والذي يكون دائمًا في الركن الأيسر العلوي للعنصر في HTML. ستعمل إزاحة x الموجبة على تحريك الظل إلى اليمين ، وستحرك إزاحة y الإيجابية الظل إلى أسفل.

المعلمة الثالثة هي لون الظل المسقط.

ضع في اعتبارك أنه على الرغم من أننا استخدمنا العناصر هنا ، box-shadowيمكن تطبيق الخاصية على أي عنصر HTML آخر أيضًا.

إضافة Blur Radius

إذا أردنا أن يبدو الظل أكثر واقعية ، فسنرغب في تجربة blur-radiusالمعلمة.

تتحكم هذه المعلمة في مقدار تعتيم الظل بحيث يصبح أكبر وأخف وزنًا. دعنا نطبقه على المربع 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
إضافة نصف قطر تمويه إلى المربع 2

تحدد قيمة 4 بكسل نصف قطر التمويه لتطبيقه على الظل المسقط.

مضيفا انتشار الشعاع

إذا أردنا التحكم في حجم الظل ، فيمكننا استخدام spread-radiusالمعلمة التي تتحكم في مقدار نمو الظل أو تقليصه.

دعونا نضيف نصف قطر انتشار 8 بكسل إلى المربع 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
إضافة نصف قطر انتشار بالإضافة إلى تمويه إلى المربع 2

تذكر ترتيب هذه المعلمات!

الجمع بين عدة ظلال في خاصية واحدة

إذا أردنا أن نكون خياليين ، فيمكننا إضافة ظلال إسقاط متعددة إلى عنصر باستخدام box-shadowخاصية واحدة .

لنفعل ذلك مع المربع 3 عن طريق إضافة ظل مسقط أزرق وأخضر في نفس الوقت:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
الجمع بين عدة ظلال إسقاط

المكافأة: إنشاء ظل داخلي

في حين أنه لن ينشئ ظلًا مسقطًا ، insetيمكن أيضًا استخدام المعلمة مع box-shadowالخاصية.

كما يوحي الاسم ، تخلق هذه المعلمة ظلًا داخليًا (أي ظل داخل صندوق).

و insetالمعلمة يمكن وضعها إما في بداية أو نهاية

box-shadowخاصية. هنا نوضح استخدامه مع blockquoteعنصر.

لغة البرمجة:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
قم بإنشاء ظل داخلي

بالطبع يمكنك إضافة بعض التمويه والانتشار لتحسين الظل أو حتى ظلال متعددة:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
يتم دمج الظل الداخلي مع الظل المسقط

باستخدام box-shadowالخاصية ، يمكننا بسهولة إبراز العناصر الموجودة على صفحة الويب لإنشاء تأثير إضاءة ثلاثي الأبعاد لطيف.

إذا كنت تريد إجراء بعض التجارب بنفسك ، فإليك قلم رمز أنشأته باستخدام الأمثلة المستخدمة في هذا البرنامج التعليمي.

العب حولها وشاهد ما يمكنك التوصل إليه!

تريد أن ترى المزيد من نصائح تطوير الويب والمعرفة؟

  • اشترك في رسالتي الإخبارية الأسبوعية
  • قم بزيارة مدونتي في 1000 Mile World
  • تابعني على تويتر