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

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

كود 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 التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها

مُساهمة من طرف RomanTic Girl في السبت سبتمبر 05, 2015 1:13 am


شكرا كتير ليكى جرح ع الموضوع الرائع
ننتظر جديدك




التوقيع


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

RomanTic Girl
عضو خبير
عضو خبير

الجنس : انثى

الحمل

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

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

السٌّمعَة : 111

بلد العضو :

العمر : 17


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في السبت سبتمبر 05, 2015 2:00 am


منووووووووووووووورة اختي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف almaldin في السبت فبراير 06, 2016 12:32 pm


بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن





almaldin
الادارة العليا

الادارة العليا

الجنس : ذكر

الاسد

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

نقاط النشاط : 20821

السٌّمعَة : 57

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الأحد فبراير 07, 2016 5:53 pm


ѕαα∂ ∂єѕιgη
بصمة خالدة
بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 41613

السٌّمعَة : 280

بلد العضو :

العمر : 17


http://WwW.t-AlTwEr.CoM

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Mr.LoLo في الأحد فبراير 07, 2016 6:08 pm


كوددد جميل
شكككرآ   ~




التوقيع


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

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




Mr.LoLo
عضو دهبي
عضو دهبي

الجنس : ذكر

نقاط التفاعل : 3 نقاط

الجدي

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

نقاط النشاط : 6163

السٌّمعَة : 54

بلد العضو :

العمر : 99


http://bank.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف THE ROCK في الأحد فبراير 07, 2016 6:55 pm


كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق




التوقيع




THE ROCK
عضو فعال
عضو فعال

الجنس : ذكر

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

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

السٌّمعَة : 24

بلد العضو :


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الأحد فبراير 07, 2016 7:35 pm


منورين جميعا


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف almaldin في الخميس فبراير 11, 2016 9:38 am


almaldin
الادارة العليا

الادارة العليا

الجنس : ذكر

الاسد

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

نقاط النشاط : 20821

السٌّمعَة : 57

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 7:38 pm


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

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