চমৎকার ১০টি সিএসএস টেক্সট ইফেক্টস

যারা ওয়েব ডিজাইন সম্পর্কে জানেন এবং কাজ করেন তারা সবাই জানে সি এস এস এর গুরুত্ব। ওয়েবসাইটে বিভিন্ন ইমেজ, ইফেক্ট, ক্রস ব্রাউজার সাপোর্ট অথবা বিভিন্ন ধরনের টেক্সট স্টাইল করতে সিএসএস ছাড়া কোন বিকল্প নেই। এইসব ইফেক্ট ব্যাবহার করা তেমন কঠিন না। এগুলো অনলাইনের টিউটোরিয়ালের সাহায্য ধাপে ধাপে শিখে এই ইফেক্ট গুলো প্রয়োগ করা যায়।

একটি ওয়েবসাইটকে আকর্ষণীয় করে তোলার জন্য বিভিন্ন টাইপের টেক্সট ইফেক্টস আছে। আপনি অনলাইনে খুজলে অনেক মজার মজার ইফেক্ট খুজে পাবেন। এখানে আমি কিছু মজার এবং আকর্ষণীয় টেক্সট ইফেক্টস এর অপশন দিলাম, আশা করি আপনাদের ভালো লাগবে।

Text Rotation

css-text-effects

Johathan Snook এই ফিচারটি তৈরি করেছেন। তিনি এখানে বিভিন্ন কোন থেকে টেক্সট গুলোকে প্রদর্শন করাতে চেয়েছেন। এটি তারিখ, ক্যালেন্ডার, ভিকার্ড অথবা যেকোনো ছবিতে ব্যাবহার করার জন্য ভালো, যেখানে কমাবিহীন একটি ব্লকের মধ্য সব টেক্সটকে ডিসপ্লে করতে হবে। খুবই সুন্দর ইফেক্ট। ঠিকানাঃ http://snook.ca/archives/html_and_css/css-text-rotation

Shadow Effect

css-text-effects1

এই ইফেক্টটি চলে আসছে মাইক্রোসফট ওয়ার্ড সৃষ্টির সময় থেকে। কিন্তু জুয়ান ব্রুজ চেয়েছিলেন এটিকে আরও উন্নত করতে যাতে ইউজাররা ইফেক্টকে নিজেদের প্রয়োজনে কমাতে বা বাড়াতে পারে। ঠিকানাঃhttp://codepen.io/juanbrujo/pen/yGpAK

Slashed Effect

css-text-effects2

এটি একটি খুবই ছোট কোড কিন্তু মজার। এটি ব্যাবহার করে টেক্সটকে “knife sliced” মানে ছুরি দিয়ে কাটার মতো ইফেক্ট দেওয়া যায়। এই কোডটি লিখেছেন Robert Messerle। এটি রহস্য টাইপের ওয়েবসাইট বা গেমসে ব্যাবহারের জন্য ভালো। ঠিকানাঃ http://codepen.io/robertmesserle/pen/Lebco

Animation Text

css-text-effects3

এটিও ছোটো কোড দিয়ে তৈরি যা টেক্সট এর মধ্য অ্যানিমেশন তৈরি করে। এটি দিয়ে ডিজাইনার ছোট ছোট বাক্য নাম্বারিং এর মত ইফেক্ট দিয়ে ডিজাইন করতে পারে। ঠিকানাঃ http://codepen.io/yoannhel/details/sJpDj/

Background Clip Text

file-(1)

এটি সি এস এস এর খুব মজার একটি ইফেক্টস । এটি ব্যাবহার করে ডিজাইনার টেক্সট এর background এ ইমেজ দিতে পারবে। এটি ইমেজকে বিকৃত করে শুধুমাত্র টেক্সটকে হাইলাইট করে। Jintos এই কোডটি ডিজাইন করেছেন। এ টাইপের ১৬ টির উপর সুন্দর ডিজাইন এখানে রয়েছে। ঠিকানাঃhttp://codepen.io/Jintos/pen/crlxk

Animated Signature

css-text-effects5

এটি একটি খুবই আকর্ষণীয় ইফেক্ট । এই মজার ইফেক্ট দিয়ে ওয়েবসাইটে আপনি আপনার signature কে দারুন অ্যানিমেশন দিতে পারবেন। ঠিকানাঃhttp://codepen.io/ghepting/pen/xnezB

Cosmos

css-text-effects6

এটিও খুব একটি সুন্দর ইফেক্ট। এটি আপনি লোগো হিসেবে ব্যাবহার করতে পারবেন। বৃত্তের ভিতরের অক্ষর গুলো ইচ্ছেমত বসিয়ে ডিজাইন করতে পারবেন। ঠিকানাঃhttp://codepen.io/captainbrosset/pen/JoZabN

Elastic Stroke Animation

css-text-effects7

এককথায় দারুন এবং মজার একটি ইফেক্ট । ডিজাইনাররা নিজেদের ইচ্ছেমত কালার টেক্সট এর মধ্য দিয়ে অ্যানিমেশন করাতে পারবে। ঠিকানাঃ http://codepen.io/yoksel/pen/XJbzrO

Foggy Text Effect

css-text-effects8

এই ইফেক্ট দিয়ে টেক্সটকে অস্পষ্ট ও ধোঁয়াটে আবেশ দেওয়া হয়। তবে এটি শুধু Webkit ব্রাউজারের জন্য।  ঠিকানাঃhttp://codepen.io/andreas_pr/pen/QwLZVZ

Hit the Floor

css-text-effects9

এটি দিয়ে খুব আকর্ষণীয়ভাবে ছায়ার মতো করে টেক্সটকে 3D ইফেক্ট দেওয়া যায়। ঠিকানাঃ http://codepen.io/ThatGuySam/pen/CytDA

 

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

comments