Worled Animy ♥
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


Worled Animy ♥
 
الرئيسيةالبوابةأحدث الصورالتسجيلدخول

 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

 كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها Empty
مُساهمةموضوع: كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها    كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها Emptyالثلاثاء يناير 12, 2016 11:04 am

كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها
السلام عليكم ورحمة الله وبركاته
كود css يوضع بورقة css تعمل على الاتي :
التحكم بحجم الصور الكبيرة بجعلها لا تزيد عن مقاس معين حفظ على مظهر الموضوع وعدم تشوة
عمل تاثير على الصور بإزاحة على اليسار او اليمين او تحت او فوق حسب الامر الذي تعطية بالكود
صورة لعمل الكود

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
واجهة الابداع حجمها اكثر من 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;
}



دمتم بخير
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
كود css التحكم بحجم الصور بالمواضيع وعمل تاثير حركة عليها
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» كود css التحكم بحجم الصور الكبيرة واضافة اطار حين مرور الماوس عليها
» كود css جعل الصور الشخصية بشكل دائري ببيانات العضو
» [CSS] حصرياً حماية وآمان : كود عدم إظهار الصور , عدم إظهار الفيديو وعدم إظهار الروابط في علبة الدردشة .

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
Worled Animy ♥ :: المنتديات التَقنية والتَطويريه ♫ :: طَوري مُنتدَاك ↓✿-
انتقل الى: