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

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

زائر
زائر
تمت المشاركة في السبت سبتمبر 05, 2015 1:54 am
تذكير بمساهمة فاتح الموضوع :

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

السلام عليكم ورحمة الله الكود سهل التعديل

عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة


بالاضافة الى اضافة حركة الدوران


تضاف بورقة css


الحركة الاولى صورة

http://i59.tinypic.com/2ue1mv8.gif

الكود
الكود:
.postbody img {
    max-width: 600px;
    /* Resize the image for IE6 */
    width: expression(this.width > 600 ? 600: true);
}  
/*TILT*/
.postbody img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.postbody img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}


الحركة الثانية صورة


http://i60.tinypic.com/np3pn5.gif

الكود

الكود:
.postbody img {
    max-width: 600px;
    /* Resize the image for IE6 */
    width: expression(this.width > 600 ? 600: true);
}  

/*MORPH*/
.postbody img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.postbody img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}


ذكر المصدر عند النقل بارك الله فيكم

دمتم بخير

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

بصمة خالدة
  •  

  • عدد المساهمات : 23062

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

    رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الدلو

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

    نقاط النشاط : 41657

    السٌّمعَة : 282

    بلد العضو :

    العمر : 18

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

    رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الجدي

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

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

    السٌّمعَة : 65

    بلد العضو :

    العمر : 101

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


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

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



    رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

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

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

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

    السٌّمعَة : 24

    بلد العضو :

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



    رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

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

    تحياتــي

    رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير الدوران على الصورة

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

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

    نقاط النشاط : 4207

    السٌّمعَة : 92

    بلد العضو :





    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الخميس ديسمبر 14, 2017 11:47 am
    الف شكر على الطرح المميز
    ومزيدا من التالق
    مع كل الاحترام والتقدير
    التوقــيـــــــــــــــــــــع
    استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
    صلاحيات هذا المنتدى:
    لاتستطيع الرد على المواضيع في هذا المنتدى
    Propellerads                                                                           Propellerads
    Top