After Before (সিএসএস৩ )দিয়ে চমৎকার ইফেক্ট

CSS3 দিয়ে চাইলেই খুব চমৎকার সব ইফেক্ট তৈরি করা যায়। সিএসএস এর আগের ভার্সন গুলোর চেয়ে সিএসএস৩ তে অনেক বেশি ফিচার রয়েছে। তাই আপনি আপনার যেকোন ডিজাইনকে আরো বেশি প্রানবন্ত করে তুলতে পারবেন সিএসএস৩ দিয়ে। তো আজকে দেখাবো কিভাবে শুধুমাত্র After Before Class দিয়ে বানিয়ে ফেলা যায় চমৎকার একটি ইফেক্ট।

চলুন উদাহররন দিয়ে বুঝি, প্রথমেই একটা বাটন তেরি করি। একটা ফোল্ডারের মধ্য html ও css দুইটি ফাইল তৈরি করি।

html এর মধ্য নিচের কোডটি

<!DOCTYPE HTML>

<html lang=”en-US”>

<head>

<meta charset=”UTF-8″>

<title>before and after</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

</head>

<body>

<div class=”container”>

<a href=”” class=”my-btn”>CLICK ME</a>

</div>

</body>

</html>

আর css এর মধ্য নিচের কোডটি লিখি-

*{margin:0;padding:0;}

.container{text-align:center;margin-top:300px;}

.my-btn{display:inline-block;

font-size:20px;

font-weight:700;

text-decoration:none;

border:2px solid #14bfe8;

padding:20px 50px;

color:#000000;}

.my-btn:hover{color:#E53E37}

}

ব্রাউজারে ওপেন করলে আমরা একটা বাটন দেখতে পাব। এবার আমরা After Before এর কাজ শুরু করি। আমরা মুলত বাটনটির উপর ভিত্তি করে কাজ করব। After Before দিয়ে কাজ করলে অবশ্যই একটি কোড ব্যাবহার করতে হয় সেটি হচ্ছে-

content: ” ”

এবার css এর মধ্য নিচের কোডটি লিখি

.my-btn:after{

content:””;

position: absolute;

width:100%;

height:100%;

background:#D65824;

}

আর my-btn এই class এর মধ্য position: relative যোগ করি এর পর ব্রাউজারে ওপেন করলে আমরা after কে দেখতে পাব। কিন্তু ঠিক করে আসেনি। এখন যদি my-btn:after এর মধ্য left:0; top:0; যোগ করে দিই তাহলে ঠিক হয়ে যাবে। এর পরও পুরোপুরি ঠিক হয়নি। CLICK ME শব্দটি হারিয়ে গেছে। এর জন্য আমাদের Z-INDEX ব্যাবহার করতে হবে। এর জন্য my-btn এই ক্লাস এর মধ্য z-index:1;আর my-btn:after এর মধ্য z-index:-1 লিখি। তাহলে আমাদের লেখাটি চলে আসবে। আমরা করে ফেললাম after এর কাজ।.my-btn:after এখানে .my-btn: Before লিখলেও একি কাজ করবে।

এবার দেখি ইফেক্ট এর কাজ। আমি চাচ্ছি my-btn:after থাকবে width:0; আর my-btn:after এ যখন hover করবো তখন width হবে ১০০% । এর পর ব্রাউজারে ওপেন করলে আমরা এর ইফেক্টটি দেখতে পাব। কিন্তু এখানে একটা সমস্যা রয়েছে, সেটি হচ্ছে ইফেক্টটি বেশি তাড়াতাড়ি আসছে । আর তাই আস্তে করে আসার জন্য আমরা ব্যাবহার করবো transition। নিচে পুরো কোডটি দিয়ে দিচ্ছি।

.my-btn{display:inline-block;
font-size:20px;
font-weight:700;
text-decoration:none;
border:2px solid #14bfe8;
padding:20px 50px;
color:#000000;
position: relative;
z-index:1;
}
.my-btn:{transition:.30s}
.my-btn:hover{color:#FCD209}
.my-btn:after{
content:””;
left:0;
top:0;
position: absolute;
width:0%;
height:100%;
background:#603C92;
z-index:-1
}
.my-btn:after{transition:.30s}
.my-btn:hover:after{width:100%}

এর পর দেখুন কি সুন্দর করে ইফেক্টটি আসছে। এর পর রয়েছে আরও একটি ছোট কিন্তু জরুরী কাজ। সেটি ব্রাউজার সাপোর্ট। ক্রোম ও সাফারির জন্য -webkit- transition, মজিলা ফাইয়ার ফক্স এর জন্য -moz-transition, অপেরার জন্য -o-transition, ইন্টারনেট এক্সপ্লোরারের জন্য –ms- transition। আশা করি ইফেক্টটি আপনাদের ভালো লাগবে।

 

আরো পোস্ট দেখুন

comments