CSS3 এর অসাধারণ গ্রাফিক্স কৌশল ব্যবহার করে খুব সহজেই রাউন্ড কর্ণার
বাটন তৈরি করা যায় এবং সাথে যুক্ত করা যায় অসাধারণ গ্রেডিয়েন্ট ইফেক্ট।
একটা ওয়েব সাইটের সৌন্দর্য বর্ধনের জন্য এবং সাইটটিকে ব্যবহার বান্ধব করার
জন্য সবচেয়ে গুরুত্বপূর্ণ অংশটি হচ্ছে তার নেভিগেশন বার। আসুন দেখি কিভাবে কোন ইমেজের ব্যবহার ছাড়াই একটা আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার তৈরি করা যায়।
একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….
প্রয়োজনীয় HTML কোড
প্রথমে একটা 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 করলে দেখতে পাবেন তৈরি হয়ে গেছে আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার ।
প্রজেক্ট বিশ্লেষণ
border-radius: 50px; এর মাধ্যমে CSS ব্যবহার করে রাউন্ড কর্ণার তৈরি করা হয়েছে।
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); এর মাধ্যমে সাডো ইফেক্ট যুক্ত করা হয়েছে।
সম্পূর্ণ Code:
একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….
প্রয়োজনীয় HTML কোড
প্রয়োজনীয় CSS কোড<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 - Gradient Rounded Corner Navigation Bar</title></head> <body> <a class="button red" href="#">HOME</a> <a class="button green" href="#">ABOUT US</a> <a class="button blue" href="#">TUTORIALS</a> <a class="button yellow" >CONTACT US </a></body> </html>
.button {
border-radius: 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-moz-border-radius: 50px;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 50px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
float: left;
font-size: 18px;
font-weight: bold;
margin-right: 20px;
padding: 5px 20px;
text-decoration: none;
font-family:Tahoma, Geneva, sans-serif;
}
.button:hover {
background:-moz-linear-gradient(center top , #0f0, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
color: #fff;
text-decoration: none;
}
.red {
background:-moz-linear-gradient(center top , #f40000, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
}
.green {
background:-moz-linear-gradient(center top , #78f000, #66cc00);
background: -webkit-gradient(linear, center top, center bottom, from(#78f000), to(#66cc00));
}
.blue {
background:-moz-linear-gradient(center top , #0079f4, #005cba);
background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba));
}
.yellow {
background:-moz-linear-gradient(center top , #e08a1a, #e0b81a);
background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba));
}
কার্যপদ্ধতিপ্রথমে একটা 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 করলে দেখতে পাবেন তৈরি হয়ে গেছে আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার ।
প্রজেক্ট বিশ্লেষণ
border-radius: 50px; এর মাধ্যমে CSS ব্যবহার করে রাউন্ড কর্ণার তৈরি করা হয়েছে।
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); এর মাধ্যমে সাডো ইফেক্ট যুক্ত করা হয়েছে।
background:-moz-linear-gradient(center top , #e08a1a, #e0b81a);এর মাধ্যমে প্রতিটা বাটনের গ্রেডিয়েন্ট তৈরি করা হয়েছে।
background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba));
.button:hover {এর মাধ্যমে মাউস বাটনের উপর নিয়ে গেলে যে গ্রেডিয়েন্ট কালার প্রদর্শন করবে তা ঠিক করে দেয়া হয়েছে।
background:-moz-linear-gradient(center top , #0f0, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
color: #fff;
text-decoration: none;
}
সম্পূর্ণ Code:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 - Gradient Rounded Corner Navigation Bar</title> <style> .button { border-radius: 50px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); -moz-border-radius: 50px; -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); -webkit-border-radius: 50px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; float: left; font-size: 18px; font-weight: bold; margin-right: 20px; padding: 5px 20px; text-decoration: none; font-family:Tahoma, Geneva, sans-serif; } .button:hover { background:-moz-linear-gradient(center top , #0f0, #cc0000); background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000)); color: #fff; text-decoration: none; } .red { background:-moz-linear-gradient(center top , #f40000, #cc0000); background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000)); } .green { background:-moz-linear-gradient(center top , #78f000, #66cc00); background: -webkit-gradient(linear, center top, center bottom, from(#78f000), to(#66cc00)); } .blue { background:-moz-linear-gradient(center top , #0079f4, #005cba); background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba)); } .yellow { background:-moz-linear-gradient(center top , #e08a1a, #e0b81a); background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba)); } </style> </head><body> <a class="button red" href="#">HOME</a> <a class="button green" href="#">ABOUT US</a> <a class="button blue" href="#">TUTORIALS</a> <a class="button yellow" >CONTACT US </a> </body></html>
No comments:
Post a Comment