- fahad
- 4:34 ص
- css
- لاتوجد تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أضع لكم اليوم كود css3 بأضافة حركة جميلة للصور المدونة
مثال للصورة بعد وضع مؤشر الماوس عليها
طريقة عمل الكود
يقوم الكود بتدوير الصورة وأضافة ظل خلف الصورة عند مرور الماوس عليها بشكل تدريجي
وعند أبعاد الماوس تعود الصورة كما كانت عليه في السابق أي تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .
يقوم الكود بتدوير الصورة وأضافة ظل خلف الصورة عند مرور الماوس عليها بشكل تدريجي
وعند أبعاد الماوس تعود الصورة كما كانت عليه في السابق أي تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .
طريقة تركيب الكود للمدونات البلوجر؟؟
الذهاب للوحة التحكم
تصميم
تحرير html
ونعمل توسيع للقالب
ونبحث عن الكود التالي
]]></b:skin>
ونضيف قبله مباشرة الكود css3
img{-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
}
أما بنسبة للوحة التحكم المحدثة أو الجديدة
نختار من القائمة اليمنى القالب
كما في الصورة
ليست هناك تعليقات :
إرسال تعليق