تأثير الظل المغلق هو خاصية CSS التي نستخدمها غالبًا، ولكن هل سبق لك أن فهمتها بعناية؟ هل تحتاج فقط إلى نسخه مباشرةً من Blue Lake عند استخدامه؟ هل تفهم كل معلمة من معلماته؟ ما هي التأثيرات الجميلة التي يمكن تحقيقها باستخدام الظلال؟
غالبًا ما تُستخدم تأثيرات الظل في تصميم الويب. يمكن لتأثيرات الظل تسليط الضوء على عنصر ما. قبل ظهور CSS3، إذا أردنا إضافة تأثيرات الظل إلى النص أو العناصر، كنا بحاجة إلى استخدام الصور لتحقيق ذلك، وهو أمر غير مريح للغاية. بعد ظهور CSS3، أصبح بإمكاننا إضافة تأثيرات الظل إلى النص أو العناصر من خلال الخاصيتين text-shadow وbox-shadow، دون استخدام أي صور.
1. ظل النص
باستخدام خاصية text-shadow في CSS يمكننا تعيين تأثير الظل للنص، ويكون بناء جملة الخاصية كما يلي:
ظل النص: إزاحة-xoffset-yblurcolor؛
يتم شرح بناء الجملة على النحو التالي:
(1) Offset-x: المعلمة المطلوبة، تحدد الإزاحة الأفقية للظل، والتي يمكن أن تكون قيمة سالبة؛
(2) الإزاحة y: المعلمة المطلوبة، تحدد الإزاحة الرأسية للظل، والتي يمكن أن تكون قيمة سالبة؛
(3) التمويه: معلمة اختيارية، قم بتعيين نصف قطر التمويه، كلما زادت القيمة، زاد التمويه، ولا يُسمح بالقيم السلبية على حافة الظل؛
(4) اللون: معلمة اختيارية، قم بتعيين لون الظل إذا تم حذف القيمة أو لم يتم تحديدها، فسيتم استخدام قيمة سمة اللون.
نصيحة: استخدم سمة ظل النص لتعيين مجموعات متعددة من تأثيرات الظل في نفس الوقت. استخدم الفواصل لفصل كل مجموعة. سيتم إدراج المجموعات المحددة لتأثيرات الظل حسب ترتيب التعريف، مع وجود الظل الأول في الأعلى قريباً. بالإضافة إلى ذلك، إذا كنت تريد إلغاء تأثير الظل للنص، فيمكنك تعيين قيمة سمة ظل النص على لا شيء.
[مثال] استخدم خاصية ظل النص لإضافة تأثير ظل إلى النص:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>ظل النص</div></body></html>نتائج التشغيل:
التحليل: ظل النص: 5px 8px 3px أحمر؛
2. صندوق الظل
باستخدام خاصية box-shadow في CSS يمكننا ضبط تأثير الظل لعناصر HTML، ويكون بناء جملة الخاصية كما يلي:
box-shadow:h-shadowv-shadowblurspreadcolorinset;
يتم شرح بناء الجملة على النحو التالي:
(1) h-shadow: المعلمة المطلوبة، تحدد الإزاحة في الاتجاه الأفقي للظل، والتي يمكن أن تكون قيمة سلبية؛
(2) v-shadow: المعلمة المطلوبة، تحدد الإزاحة في الاتجاه الرأسي للظل، والتي يمكن أن تكون قيمة سلبية؛
(3) التمويه: معلمة اختيارية، قم بتعيين نصف قطر التمويه، كلما زادت القيمة، زاد التمويه، ولا يُسمح بالقيم السلبية على حافة الظل؛
(4) الانتشار: معلمة اختيارية، قم بتعيين حجم الظل؛
(5) اللون: معلمة اختيارية، قم بتعيين لون الظل؛
(6) أقحم: معلمة اختيارية، تغير الظل الخارجي الافتراضي (البداية) إلى الظل الداخلي.
نصيحة: كما هو الحال مع سمة ظل النص، يمكن لسمة مربع الظل أيضًا تعيين مجموعات متعددة من تأثيرات الظل في نفس الوقت، استخدم الفواصل لفصل كل مجموعة، وسيتم إدراج المجموعات المتعددة من تأثيرات الظل المحددة بترتيب التعريف. مع الظل الأول في النهاية، وهكذا.
[مثال] استخدم سمة box-shadow لإضافة تأثير الظل إلى النص:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style >div:الطفل الأول{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>نتائج التشغيل:
التحليل: مربع الظل: 5px 8px 3px 2px وصف المعلمة