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

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

avatar
بصمة خالدة
الجنس : ذكر

السمك

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

نقاط النشاط : 11882

السٌّمعَة : 70

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء يوليو 12, 2016 11:52 pm
شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@
التوقــيـــــــــــــــــــــع

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 5:57 pm

كود جميل شكرا لك

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

avatar
عضو خبير
الجنس : ذكر

الجدي

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

نقاط النشاط : 1522

السٌّمعَة : 34

بلد العضو :

العمر : 100

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت أغسطس 27, 2016 8:54 pm
كوددد جميل
شكككرآ ~
التوقــيـــــــــــــــــــــع

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 10:14 pm
منور الموضوع

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

زائر
زائر
تمت المشاركة في الأربعاء سبتمبر 14, 2016 11:33 pm
شكرااا

كود رائع

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

avatar
بصمة خالدة
الجنس : انثى

السمك

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

نقاط النشاط : 140989

السٌّمعَة : 2956

بلد العضو :

العمر : 31



معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
تمت المشاركة في السبت يناير 28, 2017 11:45 pm
#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك
التوقــيـــــــــــــــــــــع



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

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

القوس

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

نقاط النشاط : 719

السٌّمعَة : 38

بلد العضو :

العمر : 20

معاينة صفحة البيانات الشخصي للعضوhttp://egyptian-cafe.123.st/
تمت المشاركة في الإثنين يناير 30, 2017 11:36 am

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

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

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

avatar
بصمة خالدة
الجنس : انثى

الدلو

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

نقاط النشاط : 12248

السٌّمعَة : 24

بلد العضو :

العمر : 54

معاينة صفحة البيانات الشخصي للعضوhttp://www.manssora.com/
تمت المشاركة في الإثنين يناير 30, 2017 2:31 pm
كود مميز شكرا
التوقــيـــــــــــــــــــــع

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

avatar
نائب الادارة

الجنس : ذكر

السمك

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

نقاط النشاط : 23610

السٌّمعَة : 104

بلد العضو :

العمر : 16

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة فبراير 17, 2017 1:51 pm
يعطيك العافية
التوقــيـــــــــــــــــــــع


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