كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة
كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة
السلام عليكم ورحمة الله الكود سهل التعديل
عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة
بالاضافة الى اضافة حركة الدوران
تضاف بورقة css
الحركة الاولى صورة
![كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة 2ue1mv8](https://2img.net/h/oi59.tinypic.com/2ue1mv8.gif)
https://2img.net/h/oi59.tinypic.com/2ue1mv8.gif
الكود
![كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة Np3pn5](https://2img.net/h/oi60.tinypic.com/np3pn5.gif)
https://2img.net/h/oi60.tinypic.com/np3pn5.gif
الكود
دمتم بخير
السلام عليكم ورحمة الله الكود سهل التعديل
عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة
بالاضافة الى اضافة حركة الدوران
تضاف بورقة css
الحركة الاولى صورة
![كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة 2ue1mv8](https://2img.net/h/oi59.tinypic.com/2ue1mv8.gif)
https://2img.net/h/oi59.tinypic.com/2ue1mv8.gif
الكود
- الكود:
.postbody img {
max-width: 600px;
/* Resize the image for IE6 */
width: expression(this.width > 600 ? 600: true);
}
/*TILT*/
.postbody img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.postbody img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
![كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة Np3pn5](https://2img.net/h/oi60.tinypic.com/np3pn5.gif)
https://2img.net/h/oi60.tinypic.com/np3pn5.gif
الكود
- الكود:
.postbody img {
max-width: 600px;
/* Resize the image for IE6 */
width: expression(this.width > 600 ? 600: true);
}
/*MORPH*/
.postbody img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.postbody img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
دمتم بخير
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى