CSS টেক্সট-শ্যাডো জেনারেটর

এই টেক্সট-শ্যাডো জেনারেটর কীভাবে ব্যবহার করবেন

1. offset সেট করুন — শ্যাডো সরাতে হরাইজন্টাল ও ভার্টিক্যাল স্লাইডার টানুন। একটি ছোট নিচের দিকের offset (যেমন 2 × 2 px) একটি স্বাভাবিক drop shadow-এর মতো দেখায়।
2. একে নরম করুন — ছড়ানো আভার জন্য blur বাড়ান, বা অক্ষরের স্পষ্ট offset প্রতিলিপির জন্য একে 0 করে দিন।
3. রং বেছে নিন — swatch-এ ক্লিক করুন এবং opacity কমান যাতে শ্যাডো কঠিন কালোর মতো দেখানোর বদলে ব্যাকগ্রাউন্ডে মিশে যায়।
4. স্তর যোগ করুন — আরও শ্যাডো যোগ করতে + লেয়ার যোগ করুন-এ ক্লিক করুন। neon glow, 3D অক্ষর, long shadow ও outline সবই কেবল দুই বা তার বেশি স্তর; সক্রিয় স্তরটিই স্লাইডার যেটিকে সম্পাদনা করে।
5. প্রিভিউ সম্পাদনা করুন — ইফেক্টটি প্রেক্ষাপটে দেখতে প্রিভিউ টেক্সট, সাইজ, ওয়েট, টেক্সটের রং ও ব্যাকগ্রাউন্ড বদলান।
6. CSS কপি করুন — কপি করুন-এ ক্লিক করুন এবং text-shadow নিয়মটি সরাসরি আপনার স্টাইলশিটে পেস্ট করুন।

text-shadow সিনট্যাক্স রেফারেন্স

box-shadow-এর বিপরীতে, text-shadow-এ কোনো spread মান এবং কোনো inset কীওয়ার্ড নেই।

সাধারণ text-shadow প্যাটার্ন

• ছবির উপর ক্যাপশন — 0 1px 3px rgba(0,0,0,.6)-এর মতো নরম গাঢ় শ্যাডো কোনো ব্যস্ত ছবির উপর সাদা টেক্সটকে পাঠযোগ্য রাখে।
• neon সাইন — গাঢ় ব্যাকগ্রাউন্ডে একই উজ্জ্বল রঙের একাধিক শূন্য-offset শ্যাডো যাদের blur ক্রমশ বাড়ে।
• 3D / উঁচু অক্ষর — ক্রমশ গাঢ় রঙে নিচ-ডানে বাড়তে থাকা হার্ড 1px শ্যাডোর স্তূপ।
• long shadow — flat-design-এর long-shadow রূপের জন্য একাধিক হার্ড শ্যাডো, প্রতিটি 1px করে আরও সরে ও স্বচ্ছতার দিকে ম্লান হয়।
• outline টেক্সট — চারটি হার্ড 1px শ্যাডো, প্রতিটি এক-একটি কোণাকুণি দিকে, প্রতিটি অক্ষরের চারপাশে 1px stroke তৈরি করে।
• letterpress / খোদাই করা — পৃষ্ঠের সাথে মেলানো 1px হালকা বা গাঢ় শ্যাডো টেক্সটকে পৃষ্ঠে চাপা দেখায়।

text-shadow-এর পিছনের মানকের গল্প

text-shadow-এর ইতিহাস CSS-এর অন্যতম অদ্ভুত। এটি প্রথম মূল CSS Level 2 Recommendation-এ 1998 সালে সংজ্ঞায়িত হয়, কিন্তু যখন ওয়ার্কিং গ্রুপ স্পেসিফিকেশনটিকে CSS 2.1-এ সংশোধন করে তখন প্রপার্টিটি সম্পূর্ণ বাদ দেওয়া হয় (প্রায় 2004-এর ওয়ার্কিং ড্রাফট থেকে এটি অনুপস্থিত ছিল), কারণ প্রায় কোনো ব্রাউজারই একে একইভাবে প্রয়োগ করেনি। বহু বছর এটি কেবল কাগজেই ছিল।

ফিচারটি প্রায় একাই Apple-এর Safari বাঁচিয়ে রেখেছিল, যা 2003 (Safari 1.1) থেকে text-shadow সমর্থন করেছে — কিছু সময় এটিই একমাত্র এমন ব্রাউজার ছিল। ওই প্রথম দিকের সংস্করণগুলো প্রতি উপাদানে কেবল একটি একক শ্যাডো রেন্ডার করতে পারত; একাধিক কমা-বিভক্ত শ্যাডোর সমর্থন Safari 4-এ আসে। বাকি ইঞ্জিনগুলো তখন এগিয়ে আসে যখন প্রপার্টিটি আধুনিক CSS Text Decoration Module (Level 3)-এর অংশ হিসেবে পুনরায় আনা হয়: Opera একে 9.5-এ যোগ করে, Firefox 3.1/3.5-এ, এবং Chrome সংস্করণ 2 থেকে। 2015 নাগাদ প্রতিটি প্রধান ব্রাউজার এটি সমর্থন করত, এবং আজ এটি একটি “Baseline, ব্যাপকভাবে উপলব্ধ” ফিচার যা আপনি কোনো prefix ছাড়া এবং কোনো fallback ছাড়াই ব্যবহার করতে পারেন।

পুনর্লিখনের সাথে একটি সূক্ষ্ম পরিবর্তন আসে। Text Decoration মডিউল উল্লেখ করে যে এতে সংজ্ঞায়িত পেইন্টিং-ক্রম 1998-এর CSS2 ক্রমের বিপরীত: আধুনিক CSS-এ কমা-বিভক্ত তালিকার প্রথম শ্যাডো সবার উপরে আঁকা হয়। আপনি যখন স্তর যোগ করেন তখন এই জেনারেটর এই নিয়মই মানে — তালিকার সবার উপরের স্তরটি সামনে থাকে।

text-shadow বনাম box-shadow বনাম filter: drop-shadow()

তিনটি CSS ফিচার শ্যাডো ফেলতে পারে, এবং সেগুলো পরস্পর বিনিময়যোগ্য নয়। text-shadow কোনো উপাদানের অক্ষর (glyph) ও যেকোনো text decoration-এর শ্যাডো তৈরি করে। box-shadow আয়তাকার border box-এর শ্যাডো তৈরি করে। drop-shadow() ফিল্টার ফাংশন উপাদানের প্রকৃত alpha-channel আকৃতি-র শ্যাডো তৈরি করে, তাই এটি অক্ষরের রূপরেখা, কোনো আইকন, স্বচ্ছ PNG বা SVG-কে মুড়ে ফেলতে পারে।

দুটি স্পেসিফিকেশন বিবরণ জানা মূল্যবান। প্রথমত, box-shadow-এর বিপরীতে, টেক্সট শ্যাডো যে আকৃতি এটি ফেলে সেই পর্যন্ত সীমিত (clipped) নয়: স্পেক বলে টেক্সট শ্যাডো “ছায়াকৃত আকৃতি পর্যন্ত সীমিত নয় এবং টেক্সট আংশিক স্বচ্ছ হলে দেখা যেতে পারে।” দ্বিতীয়ত, drop-shadow() পুরো উপাদান (ও তার সন্তানদের) একটিই মাস্ক হিসেবে গণ্য করে, তাই একটি ফিল্টার পুরো দলের শ্যাডো একসাথে তৈরি করতে পারে, যেখানে text-shadow প্রতিটি অক্ষরকে আলাদাভাবে আভা দেয়। স্পষ্ট ইন্টারফেস টেক্সটের জন্য text-shadow সাধারণত তীক্ষ্ণতর ও সস্তা; কোনো লোগো ইমেজ বা অনিয়মিত আকৃতির শ্যাডোর জন্য filter: drop-shadow()-এর আশ্রয় নিন।

blur রেডিয়াস ও দৈর্ঘ্য-একক কীভাবে আচরণ করে

text-shadow-এর তৃতীয় মান হলো blur রেডিয়াস। এটি একটি CSS <length>, তাই এটি যেকোনো পরম বা আপেক্ষিক এককে লেখা যায় — px সবচেয়ে সাধারণ, তবে em ও rem blur-কে ফন্ট-সাইজের সাথে স্কেল করে, যা তখন উপযোগী যখন শ্যাডো প্রতিটি হেডিং স্তরে একই রকম দেখানো উচিত। শতাংশ অনুমোদিত নয়, এবং blur রেডিয়াস ঋণাত্মক হতে পারে না (একটি ঋণাত্মক মান পুরো ঘোষণাকে অবৈধ করে দেয়)। আপনি যদি blur বাদ দেন, তবে এটি 0-তে ডিফল্ট হয়, যা টেক্সটের একটি কঠিন-প্রান্তের প্রতিলিপি দেয়।

বড় blur রেডিয়াস শ্যাডোর প্রান্তকে আরও পিক্সেলে ছড়িয়ে দেয় ও ম্লান করে, ঠিক কোনো ইমেজ এডিটরের Gaussian blur-এর মতো: পিক্সেল মূল অক্ষর থেকে যত দূরে থাকে, শ্যাডোর রং তত স্বচ্ছতার দিকে মিশে যায়। এই কারণেই একই রঙের বড়, নরম glow একটি আঁটসাঁট glow-এর চেয়ে ম্লান দেখায় — একই কালি আরও চওড়া এলাকায় ছড়ানো থাকে। offset ও blur স্বাধীন, তাই আপনি টেক্সট থেকে দূরে একটি তীক্ষ্ণ শ্যাডো (বড় offset, শূন্য blur) বা ঠিক তার পিছনে বসা একটি নরম আভা (শূন্য offset, বড় blur) রাখতে পারেন, যা neon ইফেক্টের ভিত্তি।

যেহেতু রং ঐচ্ছিক এবং offset-এর আগে বা পরে লেখা যায়, এই সবই বৈধ: 2px 2px 4px black, black 2px 2px 4px, এবং 5px 5px #558abb (blur ছাড়া)। যখন আপনার এমন রং দরকার যার ভেতর দিয়ে দেখা যায়, তখন rgba() মান বা #00000059-এর মতো 8-অঙ্কের hex ব্যবহার করুন যাতে ব্যাকগ্রাউন্ড কঠিন রঙের ব্লকের পিছনে লুকানোর বদলে শ্যাডোর ভেতর দিয়ে দেখা যায়।

স্তরযুক্ত শ্যাডো ইফেক্টের পিছনের গণিত

প্রতিটি “ফ্যান্সি” টেক্সট ইফেক্ট কেবল দুই বা তার বেশি সাধারণ শ্যাডো যোগ করা। প্যাটার্ন জানলে আপনি হাতে বানাতে পারেন বা কোনো প্রিসেট সূক্ষ্মভাবে সমন্বয় করতে পারেন:

• outline / stroke। একই রঙের চারটি হার্ড (blur 0) শ্যাডো রাখুন, প্রতিটি এক পিক্সেল কোণাকুণি দিকে: -1px -1px 0, 1px -1px 0, -1px 1px 0 ও 1px 1px 0। একসাথে তারা প্রতিটি অক্ষরকে 1px সীমা দিয়ে ঘিরে ফেলে। 2px outline-এর জন্য, সেটটি ±2px-এ পুনরাবৃত্তি করুন এবং প্রায়ই একটি মসৃণ সীমার জন্য চারটি সোজা দিকও যোগ করুন।
• 3D / উঁচু। হার্ড শ্যাডোর একটি শ্রেণিকে কোণাকুণি সরান, প্রতিবার এক পিক্সেল করে আরও দূরে, এবং হালকা থেকে গাঢ়র দিকে ম্লান হতে হতে: 1px 1px 0, 2px 2px 0, 3px 3px 0, ইত্যাদি। প্রতিলিপির অবিচ্ছিন্ন সিঁড়ি নিরেট গভীরতা হিসেবে পড়া হয়।
• long shadow। flat-design-এর “long shadow” সেই একই ধারণা যা এক ডজন বা তার বেশি ধাপে বাড়ানো, প্রতিটি এক পিক্সেল করে আরও সরে ও একটু বেশি স্বচ্ছ, যাতে দাগটি ব্যাকগ্রাউন্ডে ম্লান হয়ে যায়।
• neon glow। একই উজ্জ্বল রঙের একাধিক শূন্য-offset শ্যাডো বাড়তে থাকা blur-সহ যোগ করুন — যেমন blur 6, 14 ও 28। আঁটসাঁট ভেতরের প্রতিলিপিগুলো অক্ষরকে পাঠযোগ্য রাখে যখন চওড়া বাইরের প্রতিলিপিগুলো আভায় ফুটে ওঠে। এটি গাঢ় ব্যাকগ্রাউন্ডে হালকা টেক্সট হিসেবে সবচেয়ে ভালো দেখায়।
• letterpress / খোদাই করা। আলোর সাথে মেলানো একটি একক 1px শ্যাডো — হালকা পৃষ্ঠে টেক্সটের ঠিক নিচে একটি হালকা সাদা শ্যাডো, বা ঠিক তার উপরে একটি গাঢ় — অক্ষরগুলো পৃষ্ঠে চাপা থাকার আভাস তৈরি করে।

ক্রম গুরুত্বপূর্ণ কারণ প্রথম শ্যাডো সবার উপরে আঁকা হয়: কোনো 3D বা long-shadow স্তূপে আপনি সবচেয়ে কাছের, সবচেয়ে হালকা প্রতিলিপি আগে তালিকাভুক্ত করেন যাতে গাঢ়, দূরের প্রতিলিপিগুলো তার পিছনে বসে।

পাঠযোগ্যতা, কনট্রাস্ট ও অ্যাক্সেসিবিলিটি

শ্যাডো বদলায় টেক্সট কেমন দেখায়, তবু অ্যাক্সেসিবিলিটি নিয়ম এখনও তার পিছনের ব্যাকগ্রাউন্ডের সাপেক্ষে টেক্সট ফিল (fill)-কেই বিচার করে। WCAG-এর কনট্রাস্ট প্রয়োজনীয়তা (সাফল্য মানদণ্ড 1.4.3) সাধারণ বডি টেক্সটের জন্য অন্তত 4.5:1 এবং বড় টেক্সটের (প্রায় 24px, বা 18.66px bold) জন্য 3:1 অনুপাত চায়। একটি text-shadow সেই অনুপাতে গণনা হয় না, তাই আপনি শ্যাডো যোগ করে সাদার উপর হালকা ধূসর টেক্সট বাঁচাতে পারবেন না — অন্তর্নিহিত রংগুলো আগে থেকেই পাস করতে হবে।

শ্যাডো যা করতে পারে তা হলো কোনো ব্যস্ত বা অপ্রত্যাশিত ব্যাকগ্রাউন্ড, যেমন hero ছবির উপর, টেক্সটকে পাঠযোগ্য রাখা। 0 1px 3px rgba(0,0,0,.6)-এর মতো নরম গাঢ় শ্যাডো সাদা ক্যাপশনকে একটি সমান গাঢ় প্রান্ত দেয় যাতে ছবি যেখানেই হালকা হোক, সেগুলো পাঠযোগ্য থাকে। এই ভাবে ব্যবহৃত শ্যাডো একটি পাঠযোগ্যতা সহায়ক, সাজসজ্জা নয়। তবে ছোট বডি টেক্সটে একে সংযত রাখুন: গাঢ় বা ঝাপসা শ্যাডো অক্ষরকে মোটা ও ঘোলাটে করে এবং অনুচ্ছেদ পড়া কঠিন করে তোলে, সহজ নয়।

আরও দুটি অভ্যাস রাখার মতো: কখনোই অর্থকে কেবল কোনো শ্যাডোতে বাঁধবেন না (সক্রিয় ট্যাব চিহ্নিত করা একটি glow তাদের সবাইকে বাদ দেয় যারা এটি দেখতে পায় না), এবং আপনি যদি কোনো glow অ্যানিমেট করেন তবে prefers-reduced-motion মিডিয়া কোয়েরিকে সম্মান করুন যাতে যারা গতির প্রতি সংবেদনশীল তারা স্পন্দিত ইফেক্ট থেকে বেরিয়ে আসতে পারে।

পারফরম্যান্স ও পেইন্ট খরচ

সাধারণ হেডিং, লোগো ও ক্যাপশনের জন্য text-shadow সস্তা: ব্রাউজার প্রতি স্তরে টেক্সটকে আরও একবার, offset ও blur সহ আঁকে, ব্যস। কোনো layout বা reflow খরচ নেই, এবং একটি স্থির শ্যাডোর কোনো পৃষ্ঠার Core Web Vitals-এ কোনো মাপযোগ্য প্রভাব নেই।

খরচ কেবল চরমে দেখা যায়। blur-এর খরচ মোটামুটি তার ঢাকা এলাকার অনুপাতে হয়, তাই একটি একক খুব বড় glow (ধরুন 80–100px) একটি আঁটসাঁট 4px শ্যাডোর চেয়ে অনেক বেশি কাজ করে, এবং একাধিক স্তর যোগ করা সেই কাজকে গুণ করে দেয় — বিশটি হার্ড প্রতিলিপি দিয়ে তৈরি একটি long-shadow ইফেক্ট টেক্সটকে বিশ বার পুনরায় আঁকে। এটি কোনো জমে থাকা হেডিংয়ের জন্য গুরুত্বপূর্ণ নয়, তবে আপনি যদি একসাথে একাধিক উপাদানে কোনো বড়, বহু-স্তর glow-এর blur বা রং অ্যানিমেট করেন তবে এটি গুরুত্বপূর্ণ, যা ব্রাউজারকে প্রতি ফ্রেমে টেক্সট পুনরায় রাস্টারাইজ করতে বাধ্য করে এবং কম-ক্ষমতার ডিভাইসে ফ্রেম-রেট নামিয়ে দিতে পারে।

ব্যবহারিক পরামর্শ: অল্প সংখ্যক স্তর রাখুন, blur রেডিয়াস মাঝারি রাখুন যতক্ষণ না ইফেক্টের সত্যিই বেশি দরকার, এবং আপনাকে যদি কোনো glow অ্যানিমেট করতেই হয়, তবে blur রেডিয়াসের বদলে কোনো একক আগে থেকে রেন্ডার করা শ্যাডোর opacity অ্যানিমেট করুন, এবং একে মুষ্টিমেয় উপাদানে সীমিত রাখুন। কোনো ইমেজ বা অনিয়মিত আকৃতির চারপাশে নরম শ্যাডোর জন্য filter: drop-shadow() GPU-ত্বরান্বিত হতে পারে এবং প্রায়ই স্তরযুক্ত টেক্সট শ্যাডো দিয়ে তা নকল করার চেয়ে ভালো কাজ করে।

সাধারণ ভুল (ও তাদের সমাধান)

• রং ভুলে যাওয়া। আপনি যদি রং বাদ দেন, তবে স্পেক এটি ব্রাউজারের উপর ছেড়ে দেয় (এটি সাধারণত উপাদানের নিজস্ব টেক্সট রঙে fallback করে), তাই ফলাফল ব্রাউজারভেদে ভিন্ন হতে পারে। পূর্বানুমেয় আউটপুটের জন্য রং স্পষ্টভাবে উল্লেখ করুন।
• সবকিছুর জন্য কঠিন কালো ব্যবহার করা। আসল শ্যাডো ব্যাকগ্রাউন্ডকে দেখতে দেয়। সমতল #000 প্রায়ই অক্ষরের কঠিন ফটোকপির মতো দেখায়, যেখানে rgba(0,0,0,.35) যেকোনো পৃষ্ঠে অনেক বেশি স্বাভাবিকভাবে মিশে যায়।
• ছোট টেক্সট বেশি blur করা। 14px বডি টেক্সটে বড় blur অক্ষরকে ঘোলাটে করে এবং পাঠযোগ্যতার ক্ষতি করে। বড়, নরম glow বড় হেডিংয়ের জন্য রাখুন এবং বডি-টেক্সট শ্যাডো আঁটসাঁট ও সূক্ষ্ম রাখুন।
• spread বা inset প্রত্যাশা করা। সেগুলো box-shadow-এর। text-shadow-এ এদের কোনোটিই নেই, তাই outline-কে চারটি offset শ্যাডো দিয়ে নকল করতে হয়, এবং কোনো inset বা inner-glow কীওয়ার্ড নেই যার আশ্রয় নেওয়া যায়।
• স্তরগুলোকে ভুল ক্রমে তালিকাভুক্ত করা। যেহেতু প্রথম শ্যাডো সবার উপরে আঁকা হয়, পিছন-থেকে-সামনে লেখা কোনো 3D বা neon স্তূপ তার নিজের উজ্জ্বল ভেতরের স্তর চাপা দেবে। সবচেয়ে কাছের, সবচেয়ে তীক্ষ্ণ প্রতিলিপি আগে তালিকাভুক্ত করুন।
• blur রেডিয়াস অ্যানিমেট করা। কোনো বড় glow-এর blur মসৃণভাবে অ্যানিমেট করা একটি পেইন্ট-ভারী অপারেশন; এর বদলে একটি মসৃণ, সস্তা ফলাফলের জন্য কোনো আগে থেকে তৈরি শ্যাডোর opacity ক্রস-ফেড করুন।

প্রায়শই জিজ্ঞাসিত প্রশ্ন