تم دعم ظل المربع على عناصر
HTML
على نطاق واسع عبر معظم المتصفحات لفترة من الوقت
لكنني أجد أن الخيارات الافتراضية لا تسمح بمعالجة مرئية للظلال بشكل عام
دعونا نلقي نظرة على التكوين الافتراضي
box-shadow
.box-container
{
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
في المثال أعلاه ، الرقم الأول للخاصيه هو أصل المحور السيني ، والرقم الثاني هو أصل المحور الصادى ، والثالث هو مقدار التمويه.
او العتامه و اخير اللون
يجب أن نضيف أيضًا بعض الحد الأدنى من التصميم
والتنظيف لمثالنا السابق
HTML CODE
<div class="box-container"></div>
CSS CODE
.box-container
{
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
هذه هى النتيجه
هذا:
ليس سيئا لكن يمكننا أن نفعل أفضل بكثير من هذا
ويمكن أن نجعل منه شئ جميل و راق
نعم يمكن اضافه بعض العمق
نحتاج فقط إلى إضافة
div
تابع بسيط داخل عنصرنا الرئيسي ،
ونريد تطبيق الظل علىه
الآن نجعل عنصر الطفل الداخلي لدينا مطلقًا ونضع الابعاد الطول والعرض بشكل ديناميكي ليكون أصغر قليلاً من الأصل (النسب المئوية تعمل بشكل أفضل من أجل هذا). تذكر تعيين هذا العنصر الفرعي خلفه من خلال إضافة فهرس
z-index: -1
مما سيجعل وضع الظل الساقط بعمق أكثر واقعية....
ولكن انتظر هناك المزيد.....
HTML CODE
<div class="box-container">
<div class="box-container-inner"></div>
</div>
CSS CODE
.box-container
{
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
.box-container-inner
{
bottom: 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
height: 94%;
left: 3%;
position: absolute;;
width: 94%;
z-index: -1;
}
هذه هى النتيجه
مما جعل وضع الظل الساقط بعمق أكثر واقعية
يمكن أن نتوقف الآن ونحصل على ظل ملائم يسهل بالتأكيد على العينين - ولكن يمكننا أن نجعل ذلك أفضل من خلال خاصية واحدة إضافية
filter: blur ()
مما يخرج مزيج أكثر سلاسة من الظل
، و يخلق شكلا أكثر واقعية للعمق
و سيكون الكود النهائي ا كما يلي
HTML CODE
<div class="box-container">
<div class="box-container-inner"></div>
</div>
CSS CODE
.box-container
{
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
.box-container-inner
{
bottom: 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
filter: blur(6px);
height: 94%;
left: 3%;
position: absolute;;
width: 94%;
z-index: -1;
}
هذه هى النتيجه
مما جعل وضع الظل الساقط بعمق أكثر واقعية
المصادر
نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك