আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে খাজকাটা বর্ডার তৈরি করা যায় সিএসএস দিয়ে। এবার দেখাবো কিভাবে সিএসএস৩ এর মাধ্যমে মেনুবারে বা নেভিগেশন বারে সহজে গ্রোয়িং ইফেক্ট যুক্ত করা যায়। অর্থাৎ মেনুতে যে সাবমেনুর উপর এ মাউস রাখব সেটাই উপরে উঠে আসবে বা ভেসে উঠবে উপরে অর্থাৎ হভার ইফেক্ট। এক্ষেত্রে আলাদা ব্রাউজারের জন্য আলাদা কোড দিতে হয়।
সাধারণত নিচের ইমেজের মত দেখাবে মেনুটি-
হোম এর উপরে মাউস রাখলে সেটা উপরে নিচের ছবির মত উঠে আসবে-
গ্রোয়িং ইফেক্ট এর জন্য নিচের কোড দিতে হবে-
.grower {
display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;
background: #99cc00;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.grower:hover {
background: #009900;
border-color: rgba(237,95,0,1.0);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}উপরের কোডে ব্যবহৃত -moz-........ কোডগুলো মজিলায় প্রদর্শনের জন্য আর -webkit-... কোডগুলো গুগল ক্রোমে প্রদর্শনের জন্য।
এবার মেনুর সকল কোড একসাথে লিখলাম। নিচে দেখুন -
<html><head><style>
ul li{display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;}
ul li a{text-decoration:none;}
a:link{ color:#660000;}
a:hover{ color:#fff;}
.grower {
display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;
background: #99cc00;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.grower:hover {
background: #009900;
border-color: rgba(237,95,0,1.0);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style></head>
<body>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">buy Widget</a></li>
<li><a href="#">About widget </a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">the Grind</a></li>
</ul>
</body></html>উপরের কোডগুলো কপি করে নোটপ্যাডে নিয়ে grower.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে।
পোস্ট লিখেছেন টিউটোহোস্টের সাপোর্ট বিভাগে কর্তব্যরত নিলুফার ইয়াসমিন
আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।
