مرحبا بأعضاء وزوار موقع كينج نت درسنا اليوم يتحدث عن كيفية تحريك صور المدونة بشكل اكثر من رائع بعد تجربة الاضافة الرائعة اتضح بأن هذه الاضافة تجعل صور المدونة تتحرك بشكل مائل عند وضع مؤشر الماوس على الصورة نفسها وعندما تبعد مؤشر الماوس عن الصورة فأن الصورة ترجع الى وضعها الطبيعى فهذه الاضافة لمن يريد بأن يزين ويجمل المدونة وايضا بعد التجربة اتضح بأن هذه الاضافة لن تسبب اى ثقل للمدونة لأن الاضافة عبارة عن اكواد وباللغة الــ 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);}
بالأخير اضغط حفظ وانتهى التركيب .
الأن يمكنك ان تذهب الى مدونتك لتشاهد النتيجة ستجد بأن صور المواضيع وغيرها تتحرك بشكل مائل اكثر من رائع ولكن عند وضع مؤشر الماوس على الصورة وكما ذكرت فأن الصورة ترجع الى وضعها الطبيعى عند ابعاد مؤشر الماوس .
بالأخير لن اقول غير (( لا خير فى كاتم العلم ))
ليست هناك تعليقات:
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )