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

এই box-shadow জেনারেটর কীভাবে ব্যবহার করবেন

1. offset সেট করুন — শ্যাডো সরাতে অনুভূমিক ও উল্লম্ব স্লাইডার টেনে নিন। একটি ছোট নিচের দিকের offset (যেমন 0 × 4 px) স্বাভাবিক উপরের আলোর উৎসের মতো দেখায়।
2. নরম করুন — ছড়ানো শ্যাডোর জন্য blur বাড়ান, বা তীক্ষ্ণ গ্রাফিক প্রান্তের জন্য এটি 0-তে সেট করুন। শ্যাডোকে এলিমেন্টের চেয়ে বড় বা আঁটসাঁট করতে spread ব্যবহার করুন।
3. রং বেছে নিন — সোয়াচে ক্লিক করুন এবং অপাসিটি কমান যাতে শ্যাডো নিরেট কালোর মতো না দেখিয়ে যেকোনো ব্যাকগ্রাউন্ডে মিশে যায়।
4. লেয়ার স্ট্যাক করুন — দ্বিতীয় (বা তৃতীয়) শ্যাডো যোগ করতে + লেয়ার যোগ করুন-এ ক্লিক করুন। প্রকৃত elevation ও neumorphism দুই বা তার বেশি লেয়ার ব্যবহার করে; সক্রিয় লেয়ারটিই স্লাইডার সম্পাদনা করে।
5. inset টগল করুন — চাপা ইনপুট ও soft-UI ওয়েলের জন্য কোনো লেয়ারকে inset-এ স্যুইচ করে শ্যাডোকে এলিমেন্টের ভিতরে খোদাই করুন।
6. CSS কপি করুন — কপি করুন-এ ক্লিক করুন এবং box-shadow নিয়মটি সরাসরি আপনার স্টাইলশিটে পেস্ট করুন।

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

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

• কার্ড ও প্যানেল — 0 4px 12px rgba(0,0,0,.12)-এর মতো একটি নরম কম-অপাসিটির শ্যাডো একটি কার্ডকে পেজ থেকে তুলে ধরে।
• Material elevation — দুটি স্ট্যাক করা শ্যাডো (সংযোগ প্রান্তের জন্য একটি আঁটসাঁট ও একটি চওড়া ambient শ্যাডো) Google-এর elevation স্তর অনুকরণ করে।
• বাটন ও হোভার — একটি ছোট বিশ্রাম-অবস্থার শ্যাডো যা :hover-এ বাড়ে, তা স্পর্শযোগ্য উত্তোলন দেয়; চাপা অনুভূতির জন্য :active-এ এটি ছোট করুন।
• neumorphism / soft UI — একদিকে একটি গাঢ় শ্যাডো ও বিপরীত দিকে একটি হালকা শ্যাডো কোনো এলিমেন্টকে তার ব্যাকগ্রাউন্ড থেকে উঁচু দেখায়।
• inset ফিল্ড ও ওয়েল — একটি inset শ্যাডো ইনপুট ও প্রোগ্রেস-ট্র্যাককে ডুবে থাকা দেখায়।
• গ্লো ও ফোকাস রিং — spread সহ একটি শূন্য-offset রঙিন শ্যাডো একটি গ্লো বা একটি সুলভ ফোকাস আউটলাইন তৈরি করে।

প্রতিটি box-shadow মান, ব্যাখ্যা করা

box-shadow সংজ্ঞায়িত হয়েছে CSS Backgrounds and Borders Module Level 3-এ — সেই একই স্পেসিফিকেশন যা আমাদের border-radius ও একাধিক ব্যাকগ্রাউন্ড দেয়। এর আনুষ্ঠানিক ব্যাকরণ সংক্ষিপ্ত দেখায় — [inset?] && [<length>{2,4}] && <color>? — কিন্তু সেই নোটেশন একটি সুনির্দিষ্ট নিয়ম লুকিয়ে রাখে যা মনে রাখা উপকারী: length মানগুলো অবস্থান-নির্ভর, কিন্তু inset ও রং নয়। যখনই length আসে, প্রথম দুটি সর্বদা অনুভূমিক ও উল্লম্ব offset, তৃতীয় মান (যদি থাকে) blur রেডিয়াস, এবং চতুর্থটি spread রেডিয়াস। inset কীওয়ার্ড ও রং সেই length-এর ধারার আগে বা পরে বসতে পারে, এই কারণেই inset 0 2px 6px #000 ও #000 0 2px 6px inset দুটোই বৈধ ও অভিন্ন। রীতি অনুযায়ী লেখকরা inset আগে ও রং শেষে লেখেন, কারণ এটি স্বাভাবিকভাবে পড়া যায় এবং অধিকাংশ জেনারেটর (এটিসহ) যা আউটপুট দেয় তার সঙ্গে মেলে।

সেই অবস্থান-নির্ভর নিয়মই বিভ্রান্তির সবচেয়ে সাধারণ উৎস। আপনি যদি কেবল দুটি length দেন তবে আপনি একটি তীক্ষ্ণ, blur-হীন offset শ্যাডো পান; ব্রাউজার এটা "অনুমান" করে না যে আপনার দ্বিতীয় মানটি blur হওয়ার কথা ছিল। 0 0 12px মান হলো offset ছাড়া একটি কেন্দ্রীভূত, ঝাপসা আভা, আর 4px 4px হলো তীক্ষ্ণ প্রান্তযুক্ত একটি স্পষ্ট তির্যক শ্যাডো। যখন দুটো offset-ই 0 হয় ও কোনো spread না থাকে, তখন শ্যাডো সরাসরি এলিমেন্টের পিছনে লুকিয়ে যায় এবং আপনি কেবল ঝাপসা প্রান্তরেখা দেখেন।

ব্রাউজার সাপোর্ট আর চিন্তার বিষয় নয়। ২০০০-এর দশকের শেষে box-shadow ভেন্ডর প্রিফিক্সের পিছনে এসেছিল — Safari ও প্রথম দিকের Chrome বিল্ডের জন্য -webkit-box-shadow, সংস্করণ 4-এর আগের Firefox-এর জন্য -moz-box-shadow — যখন সিনট্যাক্স তখনও চূড়ান্ত হচ্ছিল। Firefox 4 ২০১১ সালে তার প্রিফিক্স বাদ দেয় এবং Internet Explorer 9 সেই একই বছরে সাধারণ, প্রিফিক্স-হীন প্রপার্টি পাঠায়, তাই এক দশকেরও বেশি সময় ধরে প্রতিটি বড় ব্রাউজার মানক box-shadow বোঝে। আপনি প্রোডাকশন CSS থেকে যেকোনো -webkit- বা -moz- শ্যাডো লাইন নিরাপদে মুছে ফেলতে পারেন।

blur বনাম spread — প্রতিটি আসলে যা করে

blur ও spread গুলিয়ে ফেলা সহজ কারণ দুটোই শ্যাডোকে "বড়" করে, কিন্তু এরা সম্পূর্ণ ভিন্ন উপায়ে কাজ করে। spread যেকোনো blurring-এর আগে শ্যাডো আকারের মাপ পরিবর্তন করে। একটি ধনাত্মক spread শ্যাডোকে প্রতিটি দিকে বাইরের দিকে ফুলিয়ে দেয় (4px-এর একটি spread শ্যাডোকে এলিমেন্টের চেয়ে 8 px চওড়া ও 8 px লম্বা করে); একটি ঋণাত্মক spread এটিকে চুপসে দেয়, যা এমন একটি শ্যাডোর জন্য ক্লাসিক কৌশল যা কেবল একদিকে উঁকি দেয় — একটি নিচের দিকের offset-কে একটি ঋণাত্মক spread-এর সঙ্গে জুড়ুন যাতে উপরের ও পাশের অংশ এলিমেন্টের নিচে গুটিয়ে যায়।

blur নিয়ন্ত্রণ করে সেই প্রান্ত কতটা নরম। স্পেসিফিকেশন ব্রাউজারকে এমন একটি Gaussian blur আনুমানিক করতে বলে যার স্ট্যান্ডার্ড ডেভিয়েশন আপনার লেখা blur-রেডিয়াসের অর্ধেক, এবং প্রতিটি পিক্সেলকে আদর্শ মানের প্রায় 5%-এর মধ্যে রাখতে বলে। 0-এর একটি blur একটি সম্পূর্ণ তীক্ষ্ণ প্রান্ত তৈরি করে; বড় সংখ্যা সমপরিমাণ "কালি"-কে একটি চওড়া, ম্লান পট্টিতে ছড়িয়ে দেয়, তাই বড় শ্যাডো একই রঙেও স্বাভাবিকভাবে হালকা দেখায়। যেহেতু আপনার দেওয়া length স্ট্যান্ডার্ড ডেভিয়েশনের দ্বিগুণ, একই সংখ্যা অন্য CSS বৈশিষ্ট্যে ভিন্ন আচরণ করে: filter: blur()-এ বা কোনো SVG feGaussianBlur-এ একটি মান স্বয়ং স্ট্যান্ডার্ড ডেভিয়েশন, তাই blur(10px) কোনো box-shadow-এর 10px blur রেডিয়াসযুক্ত প্রান্তের চেয়ে স্পষ্টভাবে নরম।

ঐতিহাসিকভাবে ব্রাউজারগুলো সঠিক অ্যালগরিদম নিয়ে দ্বিমত পোষণ করত — পুরনো Chrome একটি দ্রুত box-blur ব্যবহার করত যা সূক্ষ্মভাবে চৌকো কোণ রেখে যেত, যখন Firefox একটি প্রকৃত Gaussian ব্যবহার করত — কিন্তু একবার স্পেসিফিকেশন blur-কে "রেডিয়াসের অর্ধেক"-এ বেঁধে দিলে তারা একরকম হয়ে যায়, এবং আজ ইঞ্জিনগুলোর মধ্যে পার্থক্য বাস্তবে লক্ষ্য করার মতো নয়। ডিজাইনারদের জন্য সারমর্ম: কোনো শ্যাডোকে ছড়ানো ও দূরবর্তী অনুভব করাতে blur-এর দিকে যান, এবং এটি কতটা নরম তার থেকে স্বাধীনভাবে এর জায়গা নিয়ন্ত্রণ করতে spread-এর দিকে যান।

বাস্তবসম্মত গভীরতার জন্য একাধিক শ্যাডো লেয়ার করা

একটি একক শ্যাডো প্রায় সবসময় সমতল ও কৃত্রিম দেখায়, কারণ বাস্তব বস্তু কখনও একটিমাত্র সম্পূর্ণ সমান আলোয় আলোকিত হয় না। সমাধান হলো একই ঘোষণায় একাধিক শ্যাডো স্ট্যাক করা, কমা দিয়ে আলাদা করে। z-ক্রম text-shadow-এর মতোই একই নিয়ম মানে: তালিকার প্রথম শ্যাডো সবার উপরে তৈরি হয়, শেষটি সবচেয়ে পিছনে তৈরি হয়। তাই আপনি সাধারণত সবচেয়ে-আঁটসাঁট-ও-গাঢ় আগে, তারপর ক্রমশ চওড়া ও ম্লান, এই ক্রমে রাখেন।

Google-এর Material Design এই ধারণাকে একটি দুই-আলোর মডেল দিয়ে আনুষ্ঠানিক করেছে। এটি প্রতিটি পৃষ্ঠকে কাগজের একটি শীট হিসেবে কল্পনা করে যা একটি তীক্ষ্ণ key light ও একটি নরম, সর্বদিকমুখী ambient light দিয়ে আলোকিত। key light একটি ছোট, তুলনামূলকভাবে গাঢ় শ্যাডো ফেলে যা এলিমেন্টের ঠিক নিচে তীক্ষ্ণ সংযোগ প্রান্ত নির্ধারণ করে; ambient light একটি বড়, অনেক হালকা শ্যাডো ফেলে যা বাইরের দিকে ছড়ায়। তাই একটি প্রকৃত elevation শ্যাডো একই সঙ্গে দুটি স্ট্যাক করা শ্যাডো, ঠিক এই কারণেই এই জেনারেটরের Material প্রিসেটগুলো একটি একক লাইনের বদলে দুটি লেয়ারের জোড়া হিসেবে আসে।

স্বাভাবিক গভীরতার জন্য একটি নির্ভরযোগ্য উপায় হলো তিন বা তার বেশি লেয়ার ব্যবহার করা যা এগোতে এগোতে blur-এ দ্বিগুণ হয়: কিছুটা এমন — 0 1px 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.06)। প্রতিটি পরবর্তী লেয়ার চওড়া ও ম্লান, তাই শ্যাডো একটি তীক্ষ্ণ সংযোগ-রেখা থেকে একটি নরম ambient কুয়াশায় মসৃণভাবে বাড়ে — একই প্রভাব যা আপনি একটি সঠিকভাবে মডেল করা area light থেকে পেতেন, চারটি CSS মান দিয়ে সস্তায় আনুমানিক করা। নিজের স্ট্যাক তৈরি করতে উপরে + লেয়ার যোগ করুন-এ ক্লিক করুন।

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

CSS শ্যাডো ফেলার একটি দ্বিতীয় উপায় দেয় — filter প্রপার্টির ভিতরে ব্যবহৃত drop-shadow() ফাংশন — এবং দুটি একে অপরের বদলে ব্যবহারযোগ্য নয়। নির্ণায়ক পার্থক্য হলো শ্যাডো কীসের অনুসরণ করে। box-shadow সর্বদা এলিমেন্টের আয়তাকার border box অনুসরণ করে (যেকোনো border-radius মেনে), তার ভিতরে যা-ই আঁকা থাকুক না কেন। filter: drop-shadow() পরিবর্তে এলিমেন্টের প্রকৃত আঁকা আকার — তার alpha চ্যানেল — অনুসরণ করে, তাই এটি কোনো স্বচ্ছ PNG, কোনো SVG আইকন, কোনো ক্লিপ করা আকার বা টেক্সটের দৃশ্যমান পিক্সেলগুলোর চারপাশে জড়িয়ে যায়, খালি কোণগুলো উপেক্ষা করে।

সেই একটি পার্থক্যই পছন্দ নির্ধারণ করে। একটি স্বচ্ছ PNG হিসেবে সংরক্ষিত লোগো box-shadow থেকে একটি বিশ্রী আয়তাকার আভা পায় কিন্তু drop-shadow() থেকে একটি আঁটসাঁট, আকার-জড়ানো শ্যাডো পায়। বিনিময়ে, drop-shadow() ইচ্ছাকৃতভাবে একটি ছোট বৈশিষ্ট্য: এতে কোনো spread মান নেই ও কোনো inset নেই, এবং এটি কেবল offset-x, offset-y, একটি ঐচ্ছিক blur ও একটি রং গ্রহণ করে। আপনি তবুও ফাংশন শৃঙ্খলিত করে এটিকে লেয়ার করতে পারেন — filter: drop-shadow(...) drop-shadow(...) — এবং যেহেতু এটি একটি filter, এটি কোনো গোষ্ঠীর প্রতিটি সন্তানকে একটি সম্মিলিত অবয়ব হিসেবেও শ্যাডো দেয়, যা box-shadow করতে পারে না।

inset শ্যাডো, neumorphism ও elevation

inset কীওয়ার্ড যোগ করলে শ্যাডো ভিতরের দিকে উল্টে যায়: এলিমেন্টের বাইরে ফেলার বদলে এটি padding box-এর ভিতরে ক্লিপ করা হয়, ব্যাকগ্রাউন্ডের উপরে কিন্তু কনটেন্টের নিচে বসে। এটাই কোনো কিছুকে উঁচু নয় বরং ডুবে থাকা দেখায় — চাপা বাটন, টেক্সট ফিল্ড, টগল ট্র্যাক, প্রোগ্রেস ওয়েল ও "খোদাই করা" চেহারা সবই উপরের প্রান্তের কাছে একটি ছোট গাঢ় inset শ্যাডোর উপর নির্ভর করে যা এমন একটি পৃষ্ঠ অনুকরণ করে যেখানে আলো পুরোপুরি পৌঁছাতে পারে না।

neumorphism ("new" ও "skeuomorphism"-এর মিশ্রণ) এটিকে আরও এগিয়ে নেয়, একই এলিমেন্টে বিপরীত শ্যাডো মিলিয়ে। নিজের ব্যাকগ্রাউন্ড থেকে উঁচু হওয়া একটি এলিমেন্ট আলো থেকে দূরের দিকে একটি গাঢ় শ্যাডো ও তার দিকের দিকে একটি হালকা, প্রায়-সাদা শ্যাডো পায় — সাধারণত একটি গাঢ় টোনে 8px 8px 16px ও সাদায় -8px -8px 16px। দুটো লেয়ারকেই inset-এ স্যুইচ করুন, একই এলিমেন্ট পরিবর্তে পৃষ্ঠের ভিতরে ঠেলে দেওয়া দেখায়। এই প্রভাব কেবল তখনই কাজ করে যখন এলিমেন্ট ও তার ব্যাকগ্রাউন্ড একটি রং ভাগ করে নেয়, এই কারণেই neumorphic UI নরম ধূসর ক্যানভাসে থাকে।

Material elevation শ্যাডোকে একটি আক্ষরিক স্থানাঙ্ক হিসেবে ব্যবহার করে। প্রতিটি পৃষ্ঠের একটি উচ্চতা dp (density-independent pixels)-এ মাপা হয়, এবং সেই z-উচ্চতা কেবল তার শ্যাডোর মাধ্যমে প্রকাশিত হয়: একটি বিশ্রামরত কার্ড 1 dp-তে একটি প্রায়-অদৃশ্য শ্যাডো নিয়ে বসতে পারে, যখন একটি floating action button বা একটি খোলা মেনু 6–8 dp পর্যন্ত উঠে একটি লক্ষণীয়ভাবে বড়, নরম ছায়া নিয়ে আসে। hover বা focus-এ elevation বাড়ানোই হলো Material-এর সংকেত দেওয়ার উপায় যে কোনো কিছু ইন্টারঅ্যাক্টিভ বা তুলে নেওয়া হয়েছে — শ্যাডো স্থানিক তথ্য এনকোড করছে, কেবল সাজসজ্জা নয়।

পারফরম্যান্স: শ্যাডো বুদ্ধিমানভাবে অ্যানিমেট করুন

একটি স্থির box-shadow সস্তা, কিন্তু একটি অ্যানিমেট করা নয়। কোনো শ্যাডোর blur, spread বা রং পরিবর্তন করা ব্রাউজারকে প্রতিটি ফ্রেমে এলিমেন্টটি পুনরায় রং করতে বাধ্য করে, এবং কোনো ফোনে এটি একটি মসৃণ হোভার ট্রানজিশনকে হোঁচটে নামিয়ে আনতে পারে। কেবল দুটি প্রপার্টি layout বা paint ট্রিগার না করে অ্যানিমেট করা যায় — opacity ও transform — কারণ কম্পোজিটর সেগুলো GPU-তে সামলাতে পারে। তাই Tobias Ahlin-এর জনপ্রিয় করা পারফরম্যান্ট প্যাটার্ন হলো শ্যাডো একদম অ্যানিমেট না করা।

পরিবর্তে, এলিমেন্টকে একটি সিউডো-এলিমেন্টে একটি বড় "লক্ষ্য" শ্যাডো দিন এবং সেটিকেই ফেড-ইন করুন। আপনার বিশ্রাম-অবস্থার শ্যাডো এলিমেন্টে স্বাভাবিকভাবে প্রয়োগ করুন, এর ::after সিউডো-এলিমেন্টে opacity: 0 সহ একটি শক্তিশালী শ্যাডো যুক্ত করুন, সিউডো-এলিমেন্টকে ঠিকঠাক ওভারল্যাপ করতে অবস্থান দিন, এবং :hover-এ কেবল এর opacity ট্রানজিশন করুন। শ্যাডো বেড়ে ও নরম হয়ে দেখায়, কিন্তু ব্রাউজার কেবল দুটি আগে-থেকে-আঁকা লেয়ার ক্রস-ফেড করছে — এমন কাজ যা এটি 60 fps-এ কম্পোজিট করতে পারে। যদি আপনাকে সত্যিই কোনো প্রকৃত box-shadow অ্যানিমেট করতেই হয়, তবে will-change সংযমের সঙ্গে যোগ করুন (এটি একটি কম্পোজিটিং লেয়ার সংরক্ষণ করে এবং এর অতিরিক্ত ব্যবহার মেমরি নষ্ট করে) এবং অ্যানিমেশন শেষ হলেই এটি সরিয়ে দিন।

সবশেষে, শ্যাডোকে একটি অ্যাক্সেসিবিলিটি উদ্বেগ হিসেবে নিন, কেবল একটি নান্দনিক নয়। কোনো শ্যাডো কখনও একমাত্র সংকেত হওয়া উচিত নয় যে কোনো এলিমেন্ট focused, selected বা disabled, কারণ কম-দৃষ্টির ব্যবহারকারী ও উজ্জ্বল রোদে যে কেউ একটি ম্লান ছায়া অনুভব নাও করতে পারেন — এটিকে একটি রং-পরিবর্তন, border, আইকন বা লেবেলের সঙ্গে জুড়ুন। যাঁরা কম গতি চান তাঁদের জন্য শ্যাডো-চালিত হোভার অ্যানিমেশন এড়িয়ে prefers-reduced-motion সম্মান করুন, এবং আপনার শ্যাডোর রং এতটাই সূক্ষ্ম রাখুন যাতে সেগুলো কাছের টেক্সটের কনট্রাস্ট কমিয়ে না দেয়।

UI ডিজাইনে শ্যাডোর একটি সংক্ষিপ্ত ইতিহাস

ডিজিটাল ইন্টারফেস পরিণত হওয়ার সঙ্গে সঙ্গে শ্যাডো ফ্যাশনে এসেছে ও গেছে। ২০০০-এর দশকের শেষ ও ২০১০-এর দশকের শুরুতে skeuomorphism-এর রাজত্ব ছিল: বাটনে চকচকে বেভেল, চামড়ার টেক্সচার ও ভারী ড্রপ শ্যাডো থাকত যা ভৌত বস্তু অনুকরণ করতে তৈরি হতো যাতে টাচস্ক্রিনে নতুন ব্যবহারকারীরা জানতে পারেন কী ট্যাপযোগ্য। Apple-এর প্রথম দিকের iOS ছিল এর সবচেয়ে বড় উদাহরণ।

এটি ২০১৩ সালে দ্রুত উল্টে যায়, যখন Apple iOS 7 পাঠায় এবং flat design-এর সূচনা করে — পরিচ্ছন্ন জ্যামিতি, উজ্জ্বল রং ও প্রায় কোনো শ্যাডো বা গভীরতা নেই। flat design পরিচ্ছন্ন ও দ্রুত রেন্ডার হতো, কিন্তু প্রতিটি শ্যাডো সরিয়ে ফেলায় সেই দৃশ্য সংকেতগুলোও সরে গেল যা মানুষকে জানাত কোন এলিমেন্টগুলো স্তরিত বা ক্লিকযোগ্য।

Google ২০১৪ সালে Material Design দিয়ে জবাব দেয়, যাকে কখনও কখনও "flat design 2.0" বলা হয়, যা শ্যাডোকে একটি সুশৃঙ্খল, ভৌতভাবে-অনুপ্রাণিত উপায়ে ফিরিয়ে আনে: উপরে বর্ণিত elevation-in-dp সিস্টেম, যেখানে কোনো শ্যাডোর আকার এনকোড করে কোনো পৃষ্ঠ কতটা উঁচুতে ভাসে। এরপর ২০১৯-এর শেষে ডিজাইনার Alexander Plyuto-র একটি ভাইরাল Dribbble ধারণা neumorphism-কে জ্বালিয়ে তোলে, inset-ও-outset শ্যাডোর soft-UI পুনরুজ্জীবন যা ২০২০–২০২১-এর কাছাকাছি শীর্ষে পৌঁছে তারপর একটি নির্দিষ্ট কোণে থিতু হয় (এর কম কনট্রাস্ট এটিকে সুলভভাবে ব্যবহার করা কঠিন করে তুলেছিল)। মূল সূত্র হলো একটি সুবিবেচিত শ্যাডো কখনও কেবল সাজসজ্জা নয় — এটি একটি সমতল স্ক্রিনকে এটা জানানোর সবচেয়ে সস্তা, সবচেয়ে সর্বজনীন উপায় যে কোন জিনিসগুলো কাছে ও কোনগুলো দূরে।

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