انتظرونا قريبا التجديد الكامل للمجتمع .. ورفع احدث نسخ الويندوز مع البرامج المفعلة بروابط تورنت
شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
Dev-Point-Vip
Dev-Point-Vip
Time Online : 59d 16h 8m 56s
المساهمات : 137
نقاط : 395
السٌّمعَة : 3
تاريخ التسجيل : 01/03/2017
معاينة صفحة البيانات الشخصي للعضوhttp://devepoint.yoo7.com

[css] كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها

في السبت مارس 11, 2017 8:29 pm
كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها
السلام عليكم ورحمة الله وبركاته
كود css يوضع بورقة css تعمل على الاتي :
التحكم بحجم الصور الكبيرة بجعلها لا تزيد عن مقاس معين حفظ على مظهر الموضوع وعدم تشوة
عمل تاثير على الصور بإزاحة على اليسار او اليمين او تحت او فوق حسب الامر الذي تعطية بالكود
صورة لعمل الكود

http://i57.tinypic.com/2i8kpyq.gif

واجهة الابداع حجمها اكثر من 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;
}

دمتم بخير
JAR7
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى