আসসালামু ওয়ালাকুম। আশা করছি ভালো আসেন। ইতিমধ্যে আপনি পোস্টের শিরোনাম দেখেছেন।
এই টিটোরিয়ালটিতে আপরা Css নিয়ে একটু মজা করব। অথাৎ কোন ওয়েবপেজের Background Color অটোমেটিকলি পরিবর্তন করব তাও আবার কোন Javascript এর ব্যবহার ছাড়া।
যেহেতু, Background Color অটোমেটিকলি পরিবর্তন হবে তাই আমি এখানে Screenshot দিতে পাচ্ছি না। তবে আমি একটা লাইভ ডেমো তৈরী করেছি। আপনি দয়া করে একটু কস্ট করে এই লিংকে গিয়ে লাইভ ডেমোটা দেখে আসুন।
যদি ভালো লেগে থাকে তাহলে তো আর কোন কথাই নেই। কোডটি বসিয়ে ফেলুন আপনার সাইট। ওহ হো!! ভুলেই গেছলাম যে কিভাবে কোডটি ব্যবহার করতে হবে তা বলে দিতে। অনেকেই হয়তো জানেন তবুও বলতিছি। তবে তার আগে কোডটি দেখে নেওয়া জুরুরী।
Automaticly Background Color Changer Css
<style>
body {
width:100%;
height:100%;
color:black;
animation: myanimation 10s infinite;
}
@keyframes myanimation {
0% {background-color: red; }
25%{background-color: yellow; }
50%{background-color: green; }
75%{background-color: brown; }
100% {background-color: red; }
}
</style>
NOTE: ট্রিকবিডিতে কোড দিতে সমস্যা হয় তাই উপরের দেওয়া লিংক থেকেও কোডটি দেখতে পারেন।
কোডটি একটু ভালো করে লক্ষ্য করলে দেখতে পারবেন যে কোডটা style ট্যাগ এর মধ্যে আছে। আপনি যদি StyleSheet এর মধ্যে রাখেন তবে এটা মুছে দিবেন আর যদি Html পেজে রাখেন তবে তা রেখে দিবেন।
Animation Duration 10 সেকেন্ড রাখা হয়েছে। আপনি যদি এটা বাড়াতে বা কমাতে চান তবে 10 এর জায়গায় ইচ্ছা মতো সেকেন্ড বসিয়ে দিবেন।
সবুজ লেখা টেক্স গুলোন হলো কালার আপনি চাইলে অন্য কালার ও বসাতে পারেন সেক্ষত্রে কালারের নাম পরিবর্তন করে দিবেন।
তো যাই হোক আশা করছি টিউনটি ভালো লেগে। এরকম আরো নিত্য নতুন টিপস এবং ট্রিক পেতে আমাদের সাথেই থাকুন। আর আপনার মূল্যবান মন্তব্যটি জানাতে কিন্তু ভুলবেন না। ফেসবুকে আমি
পোস্টটি আগে এই সাইটে প্রকাশ করা হয়েছে। তাই দয়া করে কপি পোস্ট বলে লজ্জা দিবেন না।
এই ধরনের আরো ট্রিক ও Wapkiz এ সম্পুর্ণ নতুন এবং ডিজাইনের ডাউনলোড সাইট বানাতে ভিজিট করুন আমাদের সাইটে –
Thanks for comment..