دروس دورة CSS : شرح الخاصية box-shadow xml html css3
اليوم إخواني معنا شرح خاصية من أهم واجمل الخاصيات التي تفيد في تجميل موقعك بشكل جميل وراقي وهي الخاصية :
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;
تم تطبيق الظل في داخل الصندوق
وبهذا ينتهي موضوعنا ونترككم في رعاية الله
التعليقات