আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে মেনুবারে গ্রোয়িং ইফেক্ট যুক্ত করবেন সিএসএস দিয়ে। এবার দেখাবো কিভাবে
সিএসএস ব্যবহার করে লেখার মধ্যে ব্লার ইফেক্ট দেওয়া যায়।
তো চলুন কোডগুলো দেখে নিই-
নরমাল টেক্সট, ফন্ট, কালার এবং সাইজ ইত্যাদির জন্য নিচের কোডগুলো 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;
একসাথে কোড সব নিচে দেওয়া হল-
<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>
উপরের কোডগুলো কপি করে নোটপ্যাডে নিয়ে blur.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে।
পোস্ট লিখেছেন টিউটোহোস্টের সাপোর্ট বিভাগে কর্তব্যরত নিলুফার ইয়াসমিন
পূর্বে প্রকাশিত টিউটোরিয়ালবিডি ব্লগে
আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।
ধন্যবাদ সুন্দর টিউনের জন্য 🙂 ব্লার ইফেক্ট ব্যবহার করে আমি এই ডিজাইন টি করেছিঃ
https://dl.dropboxusercontent.com/u/158269549/Web_Box/web_4/index.html