Css

আপনা-আপনি ওয়েবসাইটের ব্যাকগ্রাউন্ড কালার পরিবর্তন হওয়ার সিএসএস কোড

Automatic Website Background Color Change CSS Code

আসসালামু ওয়ালাকুম। আশা করছি ভালো আসেন। ইতিমধ্যে আপনি পোস্টের শিরোনাম দেখেছেন।
এই টিটোরিয়ালটিতে আবার CSS নিয়ে একটু মজা করব। অথাৎ কোন ওয়েবপেজের Background Color অটোমেটিকলি পরিবর্তন করব তাও আবার কোন Javascript এর ব্যবহার ছাড়া।

যেহেতু,  Background Color অটোমেটিকলি পরিবর্তন হবে তাই আমি এখানে Screenshot দিতে পাচ্ছি না। তবে আমি একটা লাইভ ডেমো তৈরী করেছি। আপনি দয়া করে একটু কস্ট করে এই লিংকে (Link Expired) গিয়ে লাইভ ডেমোটা দেখে আসুন।

যদি ভালো লেগে থাকে তাহলে তো আর কোন কথাই নেই। কোডটি বসিয়ে ফেলুন আপনার সাইট। ওহ হো!!  ভুলেই গেছলাম যে কিভাবে কোডটি ব্যবহার করতে হবে তা বলে দিতে। অনেকেই হয়তো জানেন তবুও বলতিছি। তবে তার আগে কোডটি দেখে নেওয়া জুরুরী।

Automatic Background Color Changer CSS

<style> 
body {
width:100%;
height:100%;
color:black;
font-weight:bold;
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>

কোডটি একটু ভালো করে লক্ষ্য করলে দেখতে পারবেন যে কোডটা style ট্যাগ এর মধ্যে আছে। আপনি যদি StyleSheet এর মধ্যে রাখেন তবে এটা মুছে দিবেন আর যদি Html পেজে রাখেন তবে তা রেখে দিবেন।

Animation Duration 10 সেকেন্ড রাখা হয়েছে। আপনি যদি এটা বাড়াতে বা কমাতে চান তবে 10 এর জায়গায় ইচ্ছা মতো সেকেন্ড বসিয়ে দিবেন।

সবুজ লেখা টেক্স গুলোন হলো কালার আপনি চাইলে অন্য কালার ও বসাতে পারেন সেক্ষত্রে কালারের নাম পরিবর্তন করে দিবেন।


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

Imran Hossan

Everyone wants Happiness, Nobody wants Pain, But you can't make a Rainbow without a little Rain.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Hey Dear!! Thank you for visit on TuneBN. Please Disable your AD Blocker to continue browsing.