اختر لونك المفضل




العودة  Egyword - كلمة مصرية

أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للشبكة، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقومبالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.






Egyword :: خدمات المواقع والمنتديات :: قسم تطوير منتديات Ahlamontada :: قسم أكواد الانماط الانسيابية Css

 كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها Empty  السبت 4 يونيو 2016 - 17:52

  • عدد المساهمات : 820
  • تاريخ التسجيل : 28/05/2016
 كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها Fav210
 كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها User110


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




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

https://2img.net/h/oi57.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;
}




توقيع : MR.MESHO







  
hotel deals in sharm el sheikh

الــرد الســـريـع
..

هل تريد التعليق؟
انضم إلى ( Egyword - كلمة مصرية ) للحصول على حساب مجاني أو قم بتسجيل الدخول إذاكنت عضوًا بالفعل






 كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها Collapse_theadتعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة




Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd

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