MS.SAMAR مصممة
عدد المساهمات : 44 تاريخ التسجيل : 14/12/2014
| موضوع: كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها الثلاثاء يناير 12, 2016 11:04 am | |
| كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليهاالسلام عليكم ورحمة الله وبركاتهكود css يوضع بورقة css تعمل على الاتي :التحكم بحجم الصور الكبيرة بجعلها لا تزيد عن مقاس معين حفظ على مظهر الموضوع وعدم تشوةعمل تاثير على الصور بإزاحة على اليسار او اليمين او تحت او فوق حسب الامر الذي تعطية بالكودصورة لعمل الكود[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]واجهة الابداع حجمها اكثر من 600 بيكسل لذا فهي تصغر تلقائي بالاضافة لعمل تاثير وهو الحركة نحو اليسار بانسيابيةالكود - الكود:
-
.postbody img { max-width: 600px; /* Resize the image for IE6 */ width: expression(this.width > 600 ? 600: true); } /*SIDEPAN*/ .postbody img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .postbody img:hover { margin-left: -10px; } الكود من برمجتي وتعديلي فارجوا حفظ المصدر عند النقل العناصر القابله للتغيير 600px اقصى حجم للصور القابله للتصغير margin-left: -10px; اتجاه الحركة ومقياس المسافة التي يتحرك فيها الصورة كود الحركة للاعلى - الكود:
-
.postbody img { max-width: 600px; /* Resize the image for IE6 */ width: expression(this.width > 600 ? 600: true); } /*VERTPAN*/ .postbody img { margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .postbody img:hover { margin-top: -20px; }
دمتم بخير
| |
|