CSS3 এর অসাধারণ গ্রাফিক্স কৌশল ব্যবহার করে খুব সহজেই রাউন্ড কর্ণার বাটন তৈরি করা যায় এবং সাথে যুক্ত করা যায় অসাধারণ গ্রেডিয়েন্ট ইফেক্ট। একটা ওয়েব সাইটের সৌন্দর্য বর্ধনের জন্য এবং সাইটটিকে ব্যবহার বান্ধব করার জন্য সবচেয়ে গুরুত্বপূর্ণ অংশটি হচ্ছে তার নেভিগেশন বার। আসুন দেখি কিভাবে কোন ইমেজের ব্যবহার ছাড়াই একটা আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার তৈরি করা যায়।

একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….

প্রয়োজনীয় HTML কোড

<!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>

প্রয়োজনীয় CSS কোড

.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>

 

………………………………………………………………………………..

আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল ।

comments

10 কমেন্টস

  1. অনেক ভাল টিউটো। পিএইচপি টিউটো নাই কেন ভাই। অপেক্ষায় আছি কিন্তু !!! 🙂

    • তবে সমস্যায় পড়লাম, আলাদা ভাবে সিএসএস পিজ এ লিঙ্ক করে দিলাম কিন্তু কার করে না। 🙁

      • হ্যা এইবার হয়েছে। প্রধমে কিছু কোড এর মিসিং ছিল সম্ভবত।

  2. ভাই, চমৎকার হয়েছে। আরো এমন পোস্ট চাই। আমি অপেক্ষায় থাকব….

  3. ভাই, আমি ওনেক বার চেষ্টা করলাম… হয়নি। একটু দেখে বলুন তো, কি সমস্যা?

    • সকলের সুবিধার্থে সম্পূর্ণ Code যুক্ত করলাম। আর Internet explorer এর Ie6, Ie7,Ie8 ভার্ষন গুলোতে কাজ করবে না। আপনারা সবাই Mozilla দিয়ে চেক করুন , আশা করা যায় কাজ করবে।
      ধন্যবাদ।

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.