Home / Unlabelled / খুব সহজে css3 দিয়ে তৈরি করুন animatted menu

খুব সহজে 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 দেখতে

এখানে ভিজিট করুন

খুব সহজে css3 দিয়ে তৈরি করুন animatted menu খুব সহজে css3 দিয়ে তৈরি করুন animatted menu Reviewed by Unknown on 2:36 AM Rating: 5
Tags