পোস্টের ছবিকে Morph ইফেক্ট দিবেন কিভাবে

সিএসএস কি এখন সেটা আমি বলতে চাচ্ছি না কিন্তু শুধু বলব সিএসএস কোডের মাধ্যমে ওয়েবের স্টাইল করা যায়।যারা ব্লগিং করেন তারা অবশ্যই আমার চেয়ে ভালো জানেন।সিএসএস কোড এমন একটা কোড যেটার মাধ্যমে ওয়েবের ডিজাইনকে সুন্দর করে সাজানো যায়।আর আজ এই কোড নিয়ে আমরা কাজ করবো।এর আগে আমি ছবিকে অটো জুম করার সিএসএস কোড দিয়েছিলাম।এখন দেব কিভাবে ছবিকে Morph স্টাইল দিবেন।Morph স্টাইল হলো এমন একটা স্টাইল যেটা যোগ করার পর যখন মাউস ছবির উপর নিয়ে যাবেন তখন সেই ছবিটি ৩৬০ ডিগ্রী আঙ্গেলে একবার ঘুরে আসবে।এবং ছবিটি অটো গোল হয়ে যাবে।অবশ্যই আপনার ভালো লাগার মত একটা জিনিস।
তাহলে যোগ করে নিন।

কিভাবে যোগ করবেনঃ

এটা যোগ করার জন্য ব্লগে লগিন করে Template>Edit Template এ যান।তারপর নিচের কোড টুকু খুজুন।

]]></b:skin>

এবার নিচের কোডটুকু উপরের কোডের উপরে বসিয়ে দিন।

/* CSS Image Morph */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph */

ব্যস সেভ করুন।ব্লগ যান যেকোন লেখাতে যান এবং ছবির উপর মাউস রাখুন দেখুন মজা।ছবিটি এবার একপাক ঘুরে আপনার সামনে আসবে।
আশা করি আপনার কাজে লাগবে।ভালো থাকুন।