ستناقش هذه المدونة طريقة تطبيق تأثيرات الظل على عناصر HTML.
كيفية إسقاط تأثير الظل على عناصر HTML باستخدام CSS؟
ال ' مربع الظل 'تضيف خاصية الظل حول عنصر حيث يمكن فصل قيمتين أو أكثر من قيم التأثير المضافة بفاصلات.
تم وصف بناء جملة خاصية box-shadow أدناه.
بناء الجملة
مربع الظل : لا أحد | h-offset v-offset blur انتشار اللون | أقحم | مبدئي | يرث ؛
وصف بناء الجملة المذكور أعلاه مذكور أدناه:
- ' لا أحد ”: هي القيمة الافتراضية لخاصية box-shadow.
- ' إزاحة ح ”: تمثل هذه القيمة المسافة الأفقية.
- ' v- الإزاحة ”: تحدد هذه القيمة المسافة العمودية.
- ' طمس ”: القيمة الثالثة تمويه. سيؤدي تعظيم قيمته إلى زيادة تأثير التمويه.
- ' انتشر ”: القيمة الرابعة تمثل انتشار الظل. يمكن أن تحتفظ بقيم موجبة أو سالبة ، حيث تزيد القيمة الموجبة من انتشارها ، وتقللها القيمة السالبة.
- ' اللون ”: هذه القيمة اختيارية ، تمثل اللون الحالي.
- ' مبدئي ”: تحدد هذه القيمة خاصية قيمتها الأولية.
- ' يرث ”: ترث هذه القيمة خاصية عنصرها الأصلي.
- ' أقحم ”: القيمة الداخلية تُستخدم لعمل ظلال داخل الصندوق.
دعونا نرى كيف يبدو تأثير الظل من خلال مثال عملي.
مثال
في ملف HTML ، أضف أولاً ' لتوفير محتوى لصفحة الويب. الآن ، قم بتطبيق خصائص CSS على عناصر HTML المضافة. يتم تطبيق عنصر div مع الخاصية ' مربع الظل 'بالقيمة' 3 بكسل 8 بكسل '، والذي يمثل الإزاحة الأفقية والإزاحة الرأسية. انتاج | في القسم التالي ، سيتم تصميم عناصر HTML بخصائص مختلفة. فيما يلي خصائص CSS الإضافية المطبقة على عنصر div: سيعرض الكود المذكور أعلاه عنصر div كما هو موضح أدناه: الآن ، في القسم التالي ، أنشئ صندوقين يمثلان عنصري div. سنعطي كل واحد بقيم مختلفة من مربع الظل ونراقب النتائج. هنا: يمكن ملاحظة أننا قمنا بتصميم المربع 2 div بنفس الخصائص: ال ' مربع الظل ”لإضافة تأثيرات ظل متعددة إلى عنصر HTML. يمكن القيام بذلك باستخدام الفواصل بين كل ظل كما هو موضح في المثال أدناه: كما ترى ، تم تطبيق العديد من الظلال بنجاح: كان هذا كل شيء عن استخدام ظل الحدود CSS. ال ' مربع الظل ”في CSS لتطبيق تأثيرات الظل على عناصر HTML. تتكون هذه الخاصية بشكل أساسي من قيمتين مخصصتين للإزاحة الأفقية والإزاحة الرأسية ، ولكن يمكن أن تكون هناك قيم متعددة مثل تأثير التمويه وتأثير نصف قطر الانتشار واللون والمزيد. علاوة على ذلك ، يمكنك أيضًا إضافة ظلال متعددة إلى العناصر باستخدام الفواصل بين كل خاصية box-shadow. توضح هذه المقالة خاصية CSS box-shadow مع أمثلة عملية. و
لغة البرمجة
< شعبة >
< h1 > ذا بوكس شادو < / h1 >
< ص > مربع الظل: 3 بكسل 8 بكسل < / ص >
< / شعبة >
CSS
شعبة {
مربع الظل : 3 بكسل 8 بكسل ؛
}
CSS
شعبة {
الحدود : 5 بكسل صلب RGB ( 255 و 111 و 1 ) ؛
مربع الظل : 3 بكسل 8 بكسل 9 بكسل 4 بكسل # f4af1b ؛
}
لغة البرمجة
<ص > مربع الظل : 3 بكسل 8 بكسل 9 بكسل 4 بكسل # f4af1b >
> <ر > <ر >
<ص > مربع الظل : 3 بكسل 8 بكسل 9 بكسل 4 بكسل # f4af1b >
>
نمط box1 div
# صندوق 1 {
العرض : 40٪ ؛
ارتفاع : 140 بكسل ؛
الحدود : 5 بكسل صلب # ff9c83 ؛
مربع الظل : 8 بكسل 10 بكسل 15 بكسل 20 بكسل #807f7f ؛
}
مربع النمط 2 div
# صندوق 2 {
العرض : 40٪ ؛
ارتفاع : 140 بكسل ؛
الحدود : 5 بكسل صلب RGB ( 255 و 111 و 1 ) ؛
مربع الظل : أقحم 4 بكسل 8 بكسل # f4af1b ؛
الهامش الأيسر : 350 بكسل ؛
}
نصيحة إضافية: إضافة ظلال متعددة على عنصر HTML
استنتاج