الظل المسقط هو تأثير يسقط أو يضيف ظلًا خلف عناصر HTML المحددة عند تقديمه على صفحة الويب. يمكن تحقيق هذا التأثير باستخدام ' شبح الهبوط() 'كقيمة لـ CSS' منقي 'أو استخدام' مربع الظل ' ملكية. من خلال استخدام خاصية 'box-shadow' ، يمكن رسم التحسين المرئي وتجربة المستخدم والتركيز والتركيز على عنصر HTML مستهدف محدد.
يوضح هذا الدليل الإجراء الخاص بعمل تأثير الظل المسقط باستخدام خاصية box-shadow:
-
- إنشاء ظل ثابت باستخدام خاصية box-shadow
- قم بعمل ظل قطرة ضبابية باستخدام خاصية box-shadow
- قم بتوسيع منطقة الظل المسقط
كيفية عمل Drop Shadows في CSS3 باستخدام خاصية box-shadow؟
ال ' مربع الظل 'تسمح خاصية' للمطور بإنشاء تسلسل هرمي مرئي من خلال الإشارة إلى الموضع النسبي للعناصر على الصفحة. باستخدامه ، يمكن لمنشئي صفحات الويب إنشاء وهم كائنات تلقي بظلالها على الأسطح ، مما يمنح العناصر إحساسًا أكثر تفاعلية.
بناء الجملة
تحتوي خاصية 'box-shadow' على صيغة:
ظل الصندوق: [ تعويض الأفقي ] [ الإزاحة الرأسية ] [ نصف قطر طمس ] [ انتشار الشعاع ] [ لون ] ؛
شرح للمصطلحات المستخدمة في بناء الجملة أعلاه:
-
- في البداية ، ' تعويض الأفقي 'يسترجع / يخزن موضع المحور السيني ، و' سلبي 'تعين القيمة الظل إلى اليسار والعكس صحيح.
- ال ' الإزاحة الرأسية 'يخزن موضع المحور ص ، إيجابي 'تعين القيمة الظل في الاتجاه الهبوطي ، والعكس بالعكس في حالة' سلبي ' قيمة.
- بعد ذلك ، ' نصف قطر طمس 'قيمة من الاسم تعين ضبابية الظل.
- ال ' انتشار الشعاع تحدد قيمة 'نصف القطر الذي يجب أن يتوسع فيه الظل.
- ال ' لون 'تعيين لون الظل ، ويمكن أن يكون في' HSL ' أو ' RGB '.
الآن ، دعونا نستعرض بعض الأمثلة لفهم أفضل:
مثال 1: تطبيق Solid Drop Shadow باستخدام خاصية box-shadow
لتعيين الظل الثابت المصمت ، يتم إدراج الاتجاهات ولون الظل فقط كقيمة إلى ' مربع الظل ' ملكية:
< أسلوب >.boxShadowExample {
العرض: 210 بكسل ؛
الحدود: 2 بكسل حرير ذرة صلب ؛
الارتفاع: 210 بكسل ؛
لون الخلفية: # f0f0f0 ؛
مربع الظل: 10 بكسل 10 بكسل فورستجرين ؛
}
أسلوب >
في الكود أعلاه:
-
- أولاً ، يتم تحديد عنصر HTML به فئة ' مربع الظل مثال '. وقيمة ' 210 بكسل 'إلى' ارتفاع ' و ' عرض ' ملكيات. أيضًا ، استخدم ' حدود ' و ' لون الخلفية 'لتصور أفضل.
- بعد ذلك ، حدد قيمة ' 10 بكسل 10 بكسل فورست جرين 'إلى' مربع الظل 'CSS. ال ' 10 بكسل 'هو الإزاحة الأفقية والرأسية التي تحدد الموقع حيث يجب تطبيق الظل. و ال ' فورستجرين 'هو لون الظل.
بعد التجميع ، تظهر صفحة الويب على النحو التالي:
يؤكد الإخراج أن الظل المسقط المصمت قد تم وضعه باستخدام خاصية box-shadow.
مثال 2: تطبيق Blurry Drop Shadow باستخدام خاصية box-shadow
لجعل الظل المطبق بالفعل ضبابيًا ، يتم إدخال قيمة عددية أخرى قبل لون ' مربع الظل ' ملكية. قم بزيارة الرمز المحدث أدناه:
< أسلوب >.boxShadowExample {
العرض: 210 بكسل ؛
الحدود: 2 بكسل من حرير الذرة الصلب ؛
الارتفاع: 210 بكسل ؛
لون الخلفية: whitesmoke.
مربع الظل: 10 بكسل 10 بكسل 15 بكسل فورست جرين ؛
}
أسلوب >
وفقًا للكود أعلاه ، أصبح الظل الآن ' 15 بكسل 'غير واضح. بعد نهاية مرحلة التجميع ، تبدو صفحة الويب كما يلي:
يوضح الشكل أعلاه أن الظل غير واضح الآن.
مثال 3: توسيع منطقة الظل المسقط
يتم توفير قيمة السبريد إلى ' مربع الظل 'لتوسيع منطقة الظل. يجب أن تكون قيمة السبريد بتنسيق رقمي. كما هو الحال في مقتطف الشفرة أدناه ، يتم توسيع منطقة الظل إلى ' 20 بكسل ':
< أسلوب >.boxShadowExample {
العرض: 210 بكسل ؛
الحدود: 2 بكسل من حرير الذرة الصلب ؛
الارتفاع: 210 بكسل ؛
لون الخلفية: whitesmoke.
مربع الظل: 10 بكسل 10 بكسل 15 بكسل 20 بكسل فورست جرين ؛
}
أسلوب >
بعد التنفيذ ، يظهر الظل المسقط الآن على النحو التالي:
كما ترى فإن منطقة الظل تزداد الآن بمقدار 20 بكسل.
خاتمة
ال ' مربع الظل 'يتم استخدام الخاصية لإنشاء' شبح الهبوط 'على عناصر HTML المحددة. ال ' شبح الهبوط 'الخاصية خمس قيم ،' تعويض الأفقي '،' الإزاحة الرأسية '،' نصف قطر طمس '،' انتشار الشعاع ' و ' لون '. تحدد قيم 'الإزاحة الأفقية' و 'الإزاحة الرأسية' أبعاد الظل من حيث يجب أن يظهر الظل المسقط. قيمة 'نصف قطر التمويه' تجعل الظل ضبابي وقيمة 'نصف قطر الانتشار' تمتد منطقة الظل.