UUID জেনারেটর
একসাথে অনেক র্যান্ডম UUID বানান।
CSS বক্স শ্যাডো জেনারেটর
স্লাইডার দিয়ে ছায়া গড়ুন, কয়েকটি স্তর সাজান এবং CSS কপি করুন।
আপনার ফাইল আপনার ডিভাইসেই থাকে
কীভাবে কাজ করে
- 1অফসেট, ব্লার ও স্প্রেডের স্লাইডার সরান।
- 2রং ও অপাসিটি বাছুন। ভেতরের ছায়ার জন্য “ইনসেট” টিক দিন।
- 3আরও নরম ও স্বাভাবিক ছায়ার জন্য স্তর যোগ করুন।
- 4CSS কপি করুন।
অপশনগুলো কী করে
- অফসেট
- বক্স থেকে ছায়ার আনুভূমিক ও উল্লম্ব দূরত্ব। ঋণাত্মক মান বাঁয়ে ও ওপরে যায়।
- ব্লার
- কিনারা কতটা নরম হবে। শূন্য দিলে কিনারা শক্ত থাকে।
- স্প্রেড
- ঝাপসা করার আগে ছায়াকে বড় বা ছোট করে। ঋণাত্মক স্প্রেড বড় ব্লারকে দুই পাশে ছড়িয়ে পড়তে দেয় না।
- ইনসেট
- ছায়া বক্সের ভেতরে আঁকে, যেন ভেতরে চাপা কোনো ঘর।
- স্তর
- কয়েকটি ছায়া একসাথে আঁকা হয়। একটি ভারী ছায়ার চেয়ে দুটি বা তিনটি হালকা স্তর বেশি স্বাভাবিক দেখায়।
গোপনীয়তা
সবকিছু আপনার ব্রাউজারেই চলে। আপনার লেখা কিছুই কোনো সার্ভারে যায় না।
সবাই যা জানতে চান
একাধিক ছায়ার স্তর কেন ব্যবহার করব?
আসল ছায়া বস্তুর কাছে তীক্ষ্ণ আর দূরে নরম। একটি ছোট ঘন ছায়া আর একটি বড় নরম ছায়া এর অনুকরণ করে, যা একটি ব্লারের চেয়ে বেশি পরিশীলিত দেখায়।
বক্স শ্যাডো কি গোল কোণ মানে?
হ্যাঁ, এলিমেন্টের border-radius মানে। কোণের ব্যাসার্ধের স্লাইডার এটি দেখায় এবং কপি করা CSS-এ থাকে।
বড় ব্লার কি পেজ ধীর করে?
কয়েকটি স্থির ছায়া ঠিক আছে। অনেক বড় ঝাপসা ছায়া বা সেগুলোর অ্যানিমেশন দুর্বল ফোনে ভারী হতে পারে। তার বদলে একটি সিউডো-এলিমেন্টের অপাসিটি অ্যানিমেট করুন।
drop-shadow()-এর সাথে পার্থক্য কী?
box-shadow আয়তক্ষেত্রাকার বক্স অনুসরণ করে। drop-shadow() ফিল্টার দৃশ্যমান আকৃতি অনুসরণ করে, স্বচ্ছ PNG ও SVG-র কিনারাসহ।
Tailwind বা অন্য টুলে কি আউটপুট ব্যবহার করা যায়?
box-shadow: এর পরের মান সাধারণ CSS। Tailwind-এ স্পেসের জায়গায় আন্ডারস্কোর বসিয়ে একটি arbitrary value হিসেবে দিন।