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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

avatar
الزعيم
المدير العام
المدير العام
المساهمات : 235
تاريخ التسجيل : 27/08/2016
الموقع : http://taqniyat.123.st/
معاينة صفحة البيانات الشخصي للعضو http://taqniyat.123.st

مُساهمةالزعيم في السبت سبتمبر 03, 2016 3:06 pm

كود 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;
}

_________________

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى