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

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

زائر
زائر
تمت المشاركة في السبت سبتمبر 05, 2015 1:07 am
كود 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 في السبت سبتمبر 05, 2015 1:22 am عدل 1 مرات

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

avatar
عضو خبير
الجنس : انثى

الحمل

عدد المساهمات : 1885

نقاط النشاط : 2217

السٌّمعَة : 111

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت سبتمبر 05, 2015 1:13 am
شكرا كتير ليكى جرح ع الموضوع الرائع
ننتظر جديدك
التوقــيـــــــــــــــــــــع


الأنثى : لا تريد منك المستحيل , هي فقط تريدك أن تكون مثل الرجل الذي تتمناه أنت لشقيقتك.

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

زائر
زائر
تمت المشاركة في السبت سبتمبر 05, 2015 2:00 am
منووووووووووووووورة اختي

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

avatar
الإدارة العليا
  •  

  • الجنس : ذكر

    الاسد

    عدد المساهمات : 23225

    نقاط النشاط : 26741

    السٌّمعَة : 90

    بلد العضو :

    العمر : 37

    معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
    تمت المشاركة في السبت فبراير 06, 2016 12:32 pm
    بارك الله فيك  وجعله الله لك في ميزان
    حسناتك دمت في  حمي الرحمن
    التوقــيـــــــــــــــــــــع

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

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الدلو

    عدد المساهمات : 37113

    نقاط النشاط : 41661

    السٌّمعَة : 282

    بلد العضو :

    العمر : 19

    معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
    تمت المشاركة في الأحد فبراير 07, 2016 5:53 pm
    كوددد جميل
    شكككرآ ~
    التوقــيـــــــــــــــــــــع

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

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الجدي

    عدد المساهمات : 6241

    نقاط النشاط : 7087

    السٌّمعَة : 65

    بلد العضو :

    العمر : 101

    معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
    تمت المشاركة في الأحد فبراير 07, 2016 6:08 pm
    كوددد جميل
    شكككرآ   ~
    التوقــيـــــــــــــــــــــع


    سبحان الله وبحمده ..
              سبحان الله العظيم ...

    اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



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

    avatar
    عضو فعال
    الجنس : ذكر

    عدد المساهمات : 668

    نقاط النشاط : 988

    السٌّمعَة : 24

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الأحد فبراير 07, 2016 6:55 pm
    كود وتطوير رائعه
    يعطيك العافيه وتسلم الأيادي المتألقه
    على روعة ماخطت لنا من ابجديات واكواد ماسيه
    بإنتظار روائعك القادمه بشوووق
    التوقــيـــــــــــــــــــــع



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

    زائر
    زائر
    تمت المشاركة في الأحد فبراير 07, 2016 7:35 pm
    منورين جميعا

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

    avatar
    الإدارة العليا
  •  

  • الجنس : ذكر

    الاسد

    عدد المساهمات : 23225

    نقاط النشاط : 26741

    السٌّمعَة : 90

    بلد العضو :

    العمر : 37

    معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
    تمت المشاركة في الخميس فبراير 11, 2016 9:38 am
    جزاك الله خير دمتي في حمي الرحمن
    التوقــيـــــــــــــــــــــع

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

    زائر
    زائر
    تمت المشاركة في الثلاثاء مايو 17, 2016 7:38 pm
    السلام عليكم ورحمة الله وبركاته
    ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
    إنـجاز أكثر رائــــــع
    لكن أرجو منكَ عدم التوقف عند هذا الحد
    مـنتظرين ابداعتــــــك
    دمتـ ودام تألقـك

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