الجمعة، 13 سبتمبر، 2013

كيفية اضافة تأثيرات تحريك جميع صور المدونة بشكل مائل اكثر من رائع

    9/13/2013   لا يوجد تعليقات

مرحبا بأعضاء وزوار موقع كينج نت درسنا اليوم يتحدث عن كيفية تحريك صور المدونة بشكل اكثر من رائع بعد تجربة الاضافة الرائعة اتضح بأن هذه الاضافة تجعل صور المدونة تتحرك بشكل مائل عند وضع مؤشر الماوس على الصورة نفسها وعندما تبعد مؤشر الماوس عن الصورة فأن الصورة ترجع الى وضعها الطبيعى فهذه الاضافة لمن يريد بأن يزين ويجمل المدونة وايضا بعد التجربة اتضح بأن هذه الاضافة لن تسبب اى ثقل للمدونة لأن الاضافة عبارة عن اكواد وباللغة الــ Css الذى اعطت روح للغة الــ Html الأن تعالو نتعرف سويا على طريقة التركيب .







شرح اضافة تأثيرات على صور بشكل مائل :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML 


الأن قم بالبحث عن هذا الكود :
]]></b:skin>
اضف قبلة مباشرة هذا الكود :
.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

بالأخير اضغط حفظ وانتهى التركيب .

الأن يمكنك ان تذهب الى مدونتك لتشاهد النتيجة ستجد بأن صور المواضيع وغيرها تتحرك بشكل مائل اكثر من رائع ولكن عند وضع مؤشر الماوس على الصورة وكما ذكرت فأن الصورة ترجع الى وضعها الطبيعى عند ابعاد مؤشر الماوس .

بالأخير لن اقول غير (( لا خير فى كاتم العلم ))

كينج نت ملك النت

كينج نت ملك النت

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

التالى >>>>
Prev Post
السابق >>>>
Next Post
ليست هناك تعليقات:
اضافة التعليقات

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )