اضافة مجموعة من تأثيرات الظل CSS

السلام عليكم ورحمة الله وبركاتة

مرحباً متابعي موقع فيزيوتك اليكم اليوم في هذا الشرح اضافة رائعة لاضافة الظل لموقعك باستخدام لغة css , اليكم مجموعة من ثأثيرات الظل الرائعة , فنشاهد الان العديد من القوالب الرائعة سوااء كانت تقنية او اخبارية باستخدام الظل كمثال قالب جريدة الذي بيع الاف النسخ منها يستخدم الظل في القائمة العلوية للقالب , وايضاً موجود في قالب موقع المطور.نت 

شرح اضافة تأثير الظل CSS

1- الشكل الاول

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

2- الشكل الثاني

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

3- الشكل الثالث تحميل الاكواد

.shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

تحميل الاكواد