বর্তমান সময়ে ওয়েব ডিজাইনের ক্ষেত্রে
গ্রাফিক্সের ধারণাকে পুরোপুরিভাবে বদলে দিয়েছে CSS3 এর অসাধারণ গ্রাফিক্স
কৌশল। আমরা ইতোমধ্যেই CSS3 এর অসাধারণ গ্রাফিক্স কৌশল ব্যবহার করে রাউন্ড
কর্ণার বাটন এবং নেভিগেশন বার তৈরির কৌশল দেখেছি। আজ আমরা
এ ধরণেরই একটি নেভিগেশন বারে মাউস ওভার ইফেক্ট হিসেবে গ্লো ইফেক্ট যুক্ত
করার কৌশল দেখব । পূর্বের দিনে এ ধরণের ইফেক্ট যুক্ত করার জন্য ফ্লাসে তৈরি
এনিমেশন ব্যবহার করা হত।
একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….
এনিমেশনে ইফেক্টটি কিছুটা খারাপ দেখালেও ব্রাউজারে আরো সুন্দর দেখাবে আশা করি।
প্রয়োজনীয় HTML কোড
প্রয়োজনীয় CSS কোড<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 - Glow Effects </title> </head> <body> <a class="nav" href="#">HOME</a> <a class="nav" href="#">ABOUT US</a> <a class="nav" href="#">CONTACT US</a></body> </html>
body {
background: #000;
}
.nav {
color: #ccc;
float: left;
font-size:20px;
display: block;
margin: 15px;
padding: 10px;
text-align: center;
width: 150px;
border:1px #444 solid;
border-radius: 50px;
-moz-border-radius: 50px;
text-decoration:none;
background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
}
.nav:hover {
-moz-box-shadow: 0px 0px 80px #fc11ac;
-webkit-box-shadow: 0px 0px 35px #0099ff;
box-shadow: 0px 0px 35px #f80141;
background:-moz-linear-gradient(center top , #0e0e0e, #949292);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
color: #fff;
text-decoration: none;
}
কার্যপদ্ধতিপ্রথমে একটা Notepad Open করে উপরের HTML Code টুকু লিখুন। HTML Code এর <head></head> এর মাঝখানে কোন অংশে <style></style> ট্যাগ যুক্ত করে এর মাঝে CSS Code টুকু লিখুন। File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন Mozila দিয়ে index.html open করলে দেখতে পাবেন তৈরি হয়ে গেছে আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার সাথে মাউস ওভারে আকর্ষণীয় গ্লো ইফেক্ট ।
এনিমেশনে ইফেক্টটি কিছুটা খারাপ দেখালেও ব্রাউজারে আরো সুন্দর দেখাবে আশা করি।
প্রজেক্ট বিশ্লেষণ
body {background: #000;}
এর মাধ্যমে পেজের ব্যাকগ্রাউন্ড কালার কালো করে দেয়া হয়েছে।color: #ccc;float: left;font-size:20px;display: block;margin: 15px;padding: 10px;text-align: center;width: 150px;border:1px #444 solid;border-radius: 50px;-moz-border-radius: 50px;text-decoration:none;
nav ক্লাসের মধ্যে উপরোক্ত কোডের মাধ্যমে বাটনের আকৃতি তৈরি করা হয়েছে। এর মাধ্যমে বাটনের গ্রেডিয়েন্ট তৈরি করা হয়েছে।background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
এর মাধ্যমে মাউস বাটনের উপর নিয়ে গেলে যে গ্রেডিয়েন্ট কালার প্রদর্শন করবে তা ঠিক করে দেয়া হয়েছে এবং গ্লো ইফেক্ট তৈরি করা হয়েছে।.nav:hover {-moz-box-shadow: 0px 0px 80px #fc11ac;-webkit-box-shadow: 0px 0px 35px #0099ff;box-shadow: 0px 0px 35px #f80141;background:-moz-linear-gradient(center top , #0e0e0e, #949292);background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));color: #fff;text-decoration: none;}
এর মাধ্যমে গ্লো ইফেক্ট তৈরি করা হয়েছে।-moz-box-shadow: 0px 0px 80px #fc11ac;-webkit-box-shadow: 0px 0px 35px #0099ff;box-shadow: 0px 0px 35px #f80141;
সম্পূর্ণ কোড
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - Glow Effects </title>
<style>
body {
background: #000;
}
.nav {
color: #ccc;
float: left;
font-size:20px;
display: block;
margin: 15px;
padding: 10px;
text-align: center;
width: 150px;
border:1px #444 solid;
border-radius: 50px;
-moz-border-radius: 50px;
text-decoration:none;
background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
}
.nav:hover {
-moz-box-shadow: 0px 0px 80px #fc11ac;
-webkit-box-shadow: 0px 0px 35px #0099ff;
box-shadow: 0px 0px 35px #f80141;
background:-moz-linear-gradient(center top , #0e0e0e, #949292);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<a class="nav" href="#">HOME</a>
<a class="nav" href="#">ABOUT US</a>
<a class="nav" href="#">CONTACT US</a>
</body> </html>………………………………………………………………………………..
No comments:
Post a Comment