كود 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
بصمة خالدة

بصمة خالدة

الجنس : ذكر

السمك

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

نقاط النشاط : 11836

السٌّمعَة : 69

بلد العضو :

العمر : 21


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

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

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


1M ThE BesT
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 27839

السٌّمعَة : 309

بلد العضو :

العمر : 24




http://jalil.assassino

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

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

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


1Black Swan
فريق الدردشة

فريق الدردشة

الجنس : ذكر

الجدي

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

نقاط النشاط : 1512

السٌّمعَة : 34

بلد العضو :

العمر : 100




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

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

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


منور الموضوع


زائر
زائر


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

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

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


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

الجنس : ذكر

الدلو

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

نقاط النشاط : 435

السٌّمعَة : 10

بلد العضو :

العمر : 15


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

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

مُساهمة من طرف JAR7 في السبت يناير 28, 2017 11:45 pm


#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك




التوقيع




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

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

الجنس : انثى

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

نقاط النشاط : 136384

السٌّمعَة : 2829

بلد العضو :




http://taqnyiat.ahlamontada.com/

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

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

مُساهمة من طرف El Desha El Hlawany1 في الإثنين يناير 30, 2017 11:36 am



شكر جزيلا للطرح القيم

ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي
وتقديري لك





El Desha El Hlawany1
فريق التصميم

فريق التصميم

الجنس : ذكر

القوس

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

نقاط النشاط : 280

السٌّمعَة : 15

بلد العضو :

العمر : 20




http://egyptian-cafe.123.st/

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

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

مُساهمة من طرف منصورة في الإثنين يناير 30, 2017 2:31 pm


كود مميز شكرا




التوقيع



منصورة
عضو محترف
عضو محترف

الجنس : انثى

الدلو

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

نقاط النشاط : 3493

السٌّمعَة : 12

بلد العضو :

العمر : 54




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

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

مُساهمة من طرف السہۣۗلہۣۗطہۣۗﭑﭑن في الجمعة فبراير 17, 2017 1:51 pm


السہۣۗلہۣۗطہۣۗﭑﭑن
نواب الادارة

نواب الادارة

الجنس : ذكر

السمك

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

نقاط النشاط : 19352

السٌّمعَة : 62

بلد العضو :

العمر : 99





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

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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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