الجمعة، 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);
}

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

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

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

ليست هناك تعليقات :

إرسال تعليق

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

الموافقة على نشر التعليقات

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