السلام عليكم ورحمة الله وبركاته اليوم إخواني معنا شرح خاصية من أهم واجمل الخاصيات التي تفيد في تجميل موقعك بشكل جميل وراقي وهي الخاصية : box...
اليوم إخواني معنا شرح خاصية من أهم واجمل الخاصيات التي تفيد في تجميل موقعك بشكل جميل وراقي وهي الخاصية :
box-shadowهذه الخاصية تجعلك تعطي اي صندوق أو اطار لديك ظل بجميع الدرجات والألوان وبشكل احترافي ..
كما يمكنك أن تجعل الظل ثقيل او خفيف أو خارجي او داخلي وبأي لون تختار ..
دعونا نبدأ ونرى بأنفسنا , أفتح صفحة تكست فارغة واعطها الامتداد html ثم ضع فيها هذا الكود ..
<!DOCTYPE html>الآن احفظ الصفحة ثم افتحها على اي متصفح لتجد التالي ..
<html>
<head>
<style>
div{
padding:0 10px;
width:200px;
height:100px;
border:1px solid #000;
background-color:#FFF;
box-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<div>Mini Soft</div>
</body>
</html>
 |
| box-shadow : 5px 5px 5px #888 |
تعالوا نقوم بتقسيم الكود ونفهم كيف يعمل , كان الكود هكذا ..
box-shadow: 5px 5px 5px #888
box-shadow: هو الكود المسئول عن الظل
5px سمك الظل الجانبي
5px سمك الظل السفلي
5px درجة تخفيف الظل
#888 لون الظل
الآن انظر الكود الملون وشرحه بالالوان وسوف تتعرف على كيفية عمل الكود ,,
حسناً , ماذا لو أحببنا ان يكون الظل داخل الصندوق وليس خارجه
فسوف يكون الكود كالتالي ..
box-shadow: 5px 5px 5px #888 inset;فقط تم إضافة كلمة inset وعند التطبيق ستجد الشكل كالتالي ..
تم تطبيق الظل في داخل الصندوق
وبهذا ينتهي موضوعنا ونترككم في رعاية الله
التعليقات