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

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

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


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

تحياتــي


زائر
زائر


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

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

مُساهمة من طرف Basil Abdallah في الثلاثاء يوليو 12, 2016 11:52 pm


شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@




التوقيع


من الحقائق الثابتة أنك تستطيع أن تنجح بسرعة وبأفضل طريقة، عندما تساعد الآخرين على النجاح
   

Basil Abdallah
اشراف عام الدردشة
اشراف عام الدردشة

الجنس : ذكر

السمك

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

نقاط النشاط : 11275

السٌّمعَة : 69

بلد العضو :

العمر : 21






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

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

مُساهمة من طرف 1M ThE BesT في السبت أغسطس 27, 2016 5:57 pm


1M ThE BesT
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : ذكر

الدلو

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

نقاط النشاط : 27782

السٌّمعَة : 304

بلد العضو :

العمر : 20


http://jalil.assassino

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

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

مُساهمة من طرف 1Black Swan في السبت أغسطس 27, 2016 8:54 pm


1Black Swan
عضو خبير
عضو خبير

الجنس : ذكر

الجدي

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

نقاط النشاط : 1443

السٌّمعَة : 34

بلد العضو :

العمر : 99


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

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

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:14 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف AmEr MaGroh في الأربعاء سبتمبر 14, 2016 11:33 pm


AmEr MaGroh
عضو نشيط
عضو نشيط

الجنس : ذكر

الدلو

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

نقاط النشاط : 397

السٌّمعَة : 9

بلد العضو :

العمر : 14


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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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