আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে মেনুবারে গ্রোয়িং ইফেক্ট যুক্ত করবেন সিএসএস দিয়ে। এবার দেখাবো কিভাবে
সিএসএস ব্যবহার করে লেখার মধ্যে ব্লার ইফেক্ট দেওয়া যায়।
তো চলুন কোডগুলো দেখে নিই-
নরমাল টেক্সট, ফন্ট, কালার এবং সাইজ ইত্যাদির জন্য নিচের কোডগুলো h3 সিলেক্টরে বসাতে হবে –
font: bold 80px Helvetica, Sans-Serif;
color: black;
color: rgba(0,0,0,0.2);
লেখায় ব্লার ইফেক্ট দেওয়ার জন্য নিচের কোড দিতে হবে-
text-shadow:
0 0 2px rgba(0,0,0,0.2),
0 0 4px rgba(0,0,0,0.2),
0 0 6px rgba(0,0,0,0.2);
-webkit-transition: all 0.2s linear;
একসাথে কোড সব নিচে দেওয়া হল-
[css] <html>
<head>
<style type=text/css>
h3 {
height: 100px;
font: bold 80px Helvetica, Sans-Serif;
color: black;
color: rgba(0,0,0,0.2);
text-shadow:
0 0 2px rgba(0,0,0,0.2),
0 0 4px rgba(0,0,0,0.2),
0 0 6px rgba(0,0,0,0.2);
-webkit-transition: all 0.2s linear;
}
h3:hover {
color: rgba(28, 28, 28, 0.2);
opacity: 0.8;
letter-spacing: 15px;
font-size: 70px;
}
</style>
</head>
<body>
<h3>Blurred Effect</h3>
</body>
</html>[/css]
উপরের কোডগুলো কপি করে নোটপ্যাডে নিয়ে blur.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে।