আমাদের কথা খুঁজে নিন
খুব সহজে css3 দিয়ে তৈরি করুন animatted menu
টেকটিউনস এ আমার এটি প্রথম টিউনস। আমি একজন web developer, তাই আজ css3 এর খুব ছোট টিউনস শেয়ার করব। আপনারা সবাই animatted menu সম্পর্কে জানেন। আজ আমি আপনাদের দেখাব কিভাবে শুধু css3 দিয়ে খুব সহজে animatted menu তৈরি করা যায়। প্রথমে আপনার text editor open করুন। তারপর নিচের কোডটুকু কপি করে পেস্ট করুন।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropdown menu</title>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>
এবার নিচের css কোডটুকু কপি করে head tag এর মাঝে পেস্ট করুন।
<style type="text/css">
/* CSS3 TRANSITION ONLY EFFECT */
#menu {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}
#menu li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
}
#menu li a {
color:#fff;
display:block;
padding:10px;
}
#menu li a:hover {
color:#00c6ff;
}
#menu li.effect {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}
#menu li.effect:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}
</style>
সম্পুর্ন কোডটি নিচের মত হবে
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropdown menu</title>
<style type="text/css">
/* CSS3 TRANSITION ONLY EFFECT */
#menu {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}
#menu li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
}
#menu li a {
color:#fff;
display:block;
padding:10px;
}
#menu li a:hover {
color:#00c6ff;
}
#menu li.effect {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}
#menu li.effect:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>
এবার সেভ করুন .html file হিসেবে। এরকম আরও css3 মজার সব effect দেখতে
অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।