Post Top Ad

Your Ad Spot

الأحد، 13 أكتوبر 2013

طريقة لجعل صور المدونة دائرية عند وضع مؤشر الماوس عليها

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




صورة توضح لشكل الصورة عند وضع مؤشر الماوس عليها :
شرح تحويل الصور العادية الافتراضية الى صور دائرية الشكل :
قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML 
الأن قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
.post img:hover{background:#FEFEFE;border:1px solid #FEFEFE;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out;-webkit-transition:all 1.2s ease-in-out;}
بالاخير قم بحفظ التغيرات وانتهى التركيب 
الان اذهب الى اى موضوع وضع مؤشر الماوس على اى صورة ستلاحظ بأن الصورة تحولت الى الشكل الدائرى بالاخير لن اقول غير (( لا خير فى كاتم العلم ))

هناك تعليق واحد:

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

Post Top Ad