محـب الحسين
13-06-2012, 01:02 AM
http://upload.traidnt.net/upfiles/Rkt97940.jpg
اليوم معي كود CSS3 خفيف للإضافة حركه جميله على جميع صور المنتدى
لكن للأسف ما فيه مثال !!
http://upload.traidnt.net/upfiles/LDC98190.jpg
طريقة عمل الكود : الكود يقوم بتدوير الصورة وعمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .
http://upload.traidnt.net/upfiles/LDC98190.jpg
الكود وطريقة تركيبه :
أولا توجه من ، المنتدى » الإداره » الإستايلات والقوالب » التحكم بالإستايلات » الاستايل المراد وضع الكود عليه » CSS رئيسي »
وأضف الكود التالي في "تعاريف CSS الإضافية/Additional CSS Definitions"
img{-moz-transition: all 0.8s ease-in-out;
-***kit-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);
-***kit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
}
تمتع الان بالإضافه الجديده http://www.traidnt.net/vb/images/smilies/shiny01.gif
وإلى اللقاء في مواضيع قادمه !!
منقول
اليوم معي كود CSS3 خفيف للإضافة حركه جميله على جميع صور المنتدى
لكن للأسف ما فيه مثال !!
http://upload.traidnt.net/upfiles/LDC98190.jpg
طريقة عمل الكود : الكود يقوم بتدوير الصورة وعمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .
http://upload.traidnt.net/upfiles/LDC98190.jpg
الكود وطريقة تركيبه :
أولا توجه من ، المنتدى » الإداره » الإستايلات والقوالب » التحكم بالإستايلات » الاستايل المراد وضع الكود عليه » CSS رئيسي »
وأضف الكود التالي في "تعاريف CSS الإضافية/Additional CSS Definitions"
img{-moz-transition: all 0.8s ease-in-out;
-***kit-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);
-***kit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
}
تمتع الان بالإضافه الجديده http://www.traidnt.net/vb/images/smilies/shiny01.gif
وإلى اللقاء في مواضيع قادمه !!
منقول