بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين محمد صل الله عليه وسلم درس اليوم خفيف وبسيط وسنتعرف من خلاله كيفية إضافة تأثير جميل على صور المواضيع المنشورة في المدونة.
في البداية لرؤية مثال على الدرس بإمكانك وضع مؤشر الماوس على الصورة الموجودة في بداية التدوينة ولاحظ التغير قبل وبعد وضع المؤشر, الأن وبعد مشاهدتك المثال نبدأ في التنفيذ ندخل إلى لوحة تحكم بلوجر > قالب > ثم نضغط على Cttl + F ونبحث عن
]]></b:skin>
ونضع الكود التالي قبلها:
.post img {
border: 1px solid #F4F4F4;
transition: all 400ms ease-in-out 0s;
}
.post img:hover {
opacity: 0.7;
}
الآن احفظ النموذج وقم بالمعاينة ما رأيك الأن ;)
الآن نأتي إلى الجزء الأهم وهو كيفية تخصيص الكود ؟
أولا ما ملون بالجزء الأحمر وهو الجزء الخاص بلون وحجم الاطار حول الصورة تستطيع تغير #F4F4F4 باللون الذي ترغب به ويناسب مدونتك أما ما يخص الاطار فتستطيع تغير حجمة من خلال تغير الرقم 1 إلى أي رقم ترغب به.
ثانيا ما ملون باللون الأخضر يخص شفافية الصورة حيث تستطيع التحكم بتلك الشفافية بتغير الرقم 7 حسب ذوقك.
انتهى الدرس أتمنى ان تكونوا قد استدفتم منه والى درس قادم ان شاء الله.
ليست هناك تعليقات:
إرسال تعليق