আমাদের কথা খুঁজে নিন
খুব সহজে 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) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।
আমাদের কথায় যা দেখা হয়েছে
-
DOLANCER ফেসবুক ফ্যান পেজ HACK । আসল মজা পেজ এ
কূটনীতিক কাকে বলে কূটনীতির বিকাশ ও বিবর্তন । কূটনৈতিক এর গুনাবলি। কূটনীতির শ্রেণীবিভাগ । সাংস্কৃতিক কূটনীতি । । দয়া করে সাহায্য করুন ।
গরুর মিথেনে গোয়ালে বিস্ফোরণ
কে এই হযরত - ০১
স্বামীর যৌন-আকাঙ্খায় সাড়া না দিলে স্ত্রীকে খাদ্য-বঞ্চিত করার রাষ্ট্রীয় বিধান