سنقوم في هذا الدرس بالتعلم خطوة بخطوة كيفية الوصول للنتيجة النهائية التي ترونها أمامكم في التدوينة وهي كيفية التحكم في الظلال في css3 وخصائصها حيث سنقوم بعمل كادر للصورة وبعدها نقوم بعمل ظل لهذا الكادر.
الصعوبة : متوسطة
مدة التطبيق : 8 دقائق تقريباً
البرامج الضرورية : Adobe Dreamweaver و يمكنك استعمال notepad++ مفتوح المصدر أيضاً أو أي محرر متطور.
سنحتاج لتطبيق الدرس إلى ملفين
الأول : index.html
الثاني : style.css
نقوم بعد إنشاء الملفين بتضمين ملف الستايل في ملف التصميم الخاص بنا عن طريق الكود الآتي قبل نهاية الترويسة
كود PHP:
<link href="style.css" type="text/css" rel="stylesheet" />
بعدها نقوم بوضع الصورة التي نريد العمل عليها بداخل ديف بالشكل التالي:
كود PHP:
<div class="box"><img src="john.jpg" alt="john" /></div>
لتصبح الصورة كالتالي :
نضع بعد التفاصيل على ملف الستايل (style.css)لنضع الصورة في منتصف الصفحة ونحدد عرض العمل كالتالي:
body{
widht:150px;
margin:50px auto;
}
لتصبح الصورة كالتالي :
نقوم الآن بإضافة خصائص الظل ونقوم ببعض التعديلات عليها مثل الكود التالي :
كود PHP:
.box{
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding:10px;
background:#FFFFFF;
}
والشرح الخاص بها هو :
box-shadow لإضافة ظل
1px: من اليمين
2px: من الأسفل
4px: هو مقدار الضبابية
rgba(0,0,0,.5): هو لون هذا الظل
padding:المسافة البادئة
background للون الخلفية
لتصبح الصورة كالتالي :
لتصحيح هذا الخطأ الذي تراه يجب أن نضيف لخصائص الصورة عرضها بالكود التالي في ملف الستايل :
كود PHP:
.box img{
max-width:100%;
border: 1px inset #8a4199;
}
جعلنا أقصى عرض للصورة هو 100 بالمئة وإضفنا حدود بقيمة 1px باستعمال خاصية inset وهي تعني أن الحدود ستكون ظاهرة على يمين وأعلى الصورة
لتصبح الصورة كالتالي :
الآن لنقم بإضافة بعض الظل على الطرف الأيمن ليظهر وكأنه خيال للصورة وللقيام بذلك نستعمل خاصية الظل ولكن مع after أو before وتعني بعد الصورة أو قبلها كالتالي :
كود PHP:
.box:after{
content:"";
box-shadow: 100px 0 10px rgba(0,0,0,.2);
}
content: تساعدك في وضع قيمة لذلك نحن نحتاجها لإظهار الخيال ولكن مع ذلك يمكنك كتابة اي قيمة بداخلها وسترى كيف تعمل بالضبط.
لاداعي لشرح السطر السابق فقط قمت بشرحه مسبقاً في أول التدوينة
ولكن عند الحفظ لن نشاهد أي تغيير حصل لاننا لم نختار مكان ظهور هذه القيمة بالضبط لذلك نضيف
كود PHP:
.box:after{
content:"";
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position:absolute;
}
عندها ستلاحظ ظهور خيال على شكل مربع صغير حجمه 100 بيكسل.
مثل الصورة التالية :
لنقوم بزيادة حجم الخيال ونحدد موقعه نضيف :
كود PHP:
.box:after{
content:"";
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position:absolute;
width:50%;
bottom:20px;
}
سنلاحظ فعلا أن حجم الخيال أصبح كبيراً وكنه أصبح أسفل الصفحة وذلك بسبب خاصية bottom حيث أن قيمتها الصفحة وليس الصورة ولذلك نضيف الكود التالي للستايل الأول position:relative;
ليصبح كود الستايل ككل كالتالي :
كود PHP:
body{
width:150px;
margin:50px auto;
}
.box{
position:relative;
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding:10px;
background:#FFFfff;
}
.box img{
max-width:100%;
border: 1px inset #8a4199;
}
.box:after{
content:"";
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position:absolute;
width:50%;
bottom:20px;
}
الآن نقوم بالتعديل وإضافة بعض الخصائص الأخرى التالية لعمل ميلان للخيال ليصبح بشكل أجمل كالتالي :
كود PHP:
.box:after{
content:"";
box-shadow: 60px 0 10px 20px rgba(0,0,0,.2);
position:absolute;
width:50%;
height:10px;
bottom:20px;
right:65px;
z-index:-1;
transform: skew(-30deg);
}
تلاحظون قبل الشرح أني قمت بتعديل الكثير من القيام التي كتبناها مسبقاً وذلك لكي يتطابق الخيال مع ما أنا اريده وطبعاً انتم ستقومون بذلك تبعا لاختلاف
حجم الصورة وعرضها وإرتفاعها.
height: لتحديد ارتفاع الخيال
right: لتحديد طول الخيال من اليمين
z-index: لتحديد رقم الطبقة وهنا اعطيناها قيمة سالبة لكي يكون الخيال خلف الطبقة التي هي الصورة أي ورائها
transform استعملنا هذه الخاصية والتي لها اكثر من قيمة بإضافة skew وهو معامل الانحراف لكي نجعل الخيال يميل قليلاً بما يناسبنا لتكون الصورة الآن كاملة كما في الشكل التالي :
بقية الخطوة النهائية والأهم ولعل البعض وأثناء تطبيق الدرس لم تظهر معه النتائج كما كنت أصف وذلك لإختلاف كتابة هذه التنسيقات بإختلاف المتصفح ولذلك سأضيف الآن الكود الكامل مع وضعه المتوافق مع كل المتصفحات ليكون كالتالي :
كود PHP:
@charset "utf-8";
/* CSS Document */
body{
width:150px;
margin:50px auto;
}
.box{
position:relative;
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding:10px;
background:#FFFfff;
}
.box img{
max-width:100%;
border: 1px inset #8a4199;
}
.box:after{
content:"";
box-shadow: 60px 0 10px 20px rgba(0,0,0,.2);
-webkit-box-shadow:60px 0 10px 20px rgba(0,0,0,.2);
-moz-box-shadow: 60px 0 10px 20px rgba(0,0,0,.2);
position:absolute;
width:50%;
height:10px;
bottom:20px;
right:65px;
z-index:-1;
transform: skew(-30deg);
-moz-transform: skew(-30deg);/* Firefox */
-ms-transform: skew(-30deg); /* IE 9 */
-webkit-transform: skew(-30deg); /* Safari and Chrome */
-o-transform: skew(-30deg); /* Opera */
}
وأي نقص في الدرس يرجى معذرتي وأي استفسار أنا جاهز بإذن الله.
هذا الشرح مقدم من مدونة جديد مشاريع الويب ولمزيد من الوضوح في الأكواد في حال عدم سهولة قراءتها يرجى يارة الرابط التالي :
التعامل مع الظلال في css3
رد مع اقتباس
