الصور تحيي المحتوى في كل موقع وأيضا تعمل على إهتمام الزائر، وأهمية الصور كبرى ، ألاحظ أن المدونات العربية المتخصصة في إضافات بلوجر وغيرها .. لا تقدم إضافات لها تأثير كبير وتعطي جمالية أكثر ألاحظ إضافات عادية ومتكررة .. هذا ليس موضوعنا على أي حال فنحن نقدم لكم الأفضل والحصري وتقتصر إضافتنا اليوم على تأثير الصور سوى بالمواضيع أو غيرها تسمى تأثيرات Hover سأقدم لكم إثنين تأثييرين سهلين الإستعمال .. تأثيرات الهوفر تطبق أغلبية على صور التدوينات كمابمدونة عرب ويب عند مرور الماوس على الصورة تظهر خلفية شفافة ولكي أعطيكم مثال على التأثيرين أترككم للمعاينة
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع الكود التالي فوقه
.post-body img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
الشكل الثاني
.post-body img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
margin-top: 2px;
}
* بمجرد إختيار الشكل ووضعه في القالب يمكنك حفظ العمل وسيطبق التأثير على صور التدوينات يمكنك أيضا تطبيق التأثير على عنصر أخر مثل السيدبار بتغير : post-body img. إلى #sidebar img
ليست هناك تعليقات:
إرسال تعليق