CSS বক্স শ্যাডো জেনারেটর
অফসেট, ব্লার, স্প্রেড, রঙ, অপাসিটি ও ইনসেটের জন্য লাইভ স্লাইডার সহ লেয়ারড CSS box-shadow তৈরি করুন: একটি বাস্তব উপাদানে প্রিভিউ দেখুন এবং তাৎক্ষণিকভাবে পেস্ট-প্রস্তুত CSS কপি করুন।
box-shadow: -;
সবকিছু আপনার ব্রাউজারে লাইভ আপডেট হয়: কোনো আপলোড নেই, সাইন-আপ নেই, সম্পূর্ণ বিনামূল্যে।
CSS বক্স শ্যাডো জেনারেটর সম্পর্কে
CSS Box Shadow Generator আপনাকে কোডে মান অনুমান করার বদলে ভিজ্যুয়ালি box-shadow ডিজাইন করতে দেয়। অনুভূমিক ও উলম্ব অফসেট, ব্লার রেডিয়াস, স্প্রেড রেডিয়াস, রং ও অস্বচ্ছতার জন্য স্লাইডার টানুন, সাথে একটি ইনসেট টগল, এবং একটি বাস্তব এলিমেন্ট লাইভ আপডেট হতে দেখুন। ঠিকঠাক লাগলে, এক ক্লিকে পেস্ট-প্রস্তুত CSS কপি করুন।
আধুনিক UI ছায়া খুব কমই একটি একক স্তর হয়। এই জেনারেটর স্তরযুক্ত ছায়া লেয়ার সমর্থন করে: লেয়ার যোগ, ডুপ্লিকেট, লুকান বা মুছুন, এবং শুধু নির্বাচিত লেয়ার বা সব লেয়ার একসাথে প্রিভিউ করুন। একটি নরম প্রশস্ত ছায়ার নিচে একটি টাইট গাঢ় ছায়া স্তরায়িত করাই কীভাবে পরিমার্জিত কার্ড ও বাটন তাদের গভীরতা পায়।
আপনি প্রিভিউ এলিমেন্টটিও স্টাইল করতে পারেন (বক্সের রং, বর্ডার রেডিয়াস ও ক্যানভাস ব্যাকগ্রাউন্ড) যাতে ছায়াটি একটি বাস্তবসম্মত প্রেক্ষাপটে বিচার করা হয়, গাঢ় সারফেসসহ। একটি প্রিসেট থেকে শুরু করুন, অনুপ্রেরণার জন্য “Randomize layer” চাপুন, এবং যখনই একটি পরিষ্কার শুরু চান রিসেট করুন। সবকিছু আপনার ব্রাউজারে চলে।
CSS বক্স শ্যাডো জেনারেটর কীভাবে ব্যবহার করবেন
- অনুভূমিক অফসেট, উলম্ব অফসেট, ব্লার, স্প্রেড, রং ও অস্বচ্ছতার স্লাইডার সামঞ্জস্য করুন, এবং ভেতরের ছায়া চাইলে “Inset shadow” টগল করুন।
- ছায়া স্তরায়িত করতে “Add layer” বা “Duplicate layer” ক্লিক করুন, এবং প্রতিটি সূক্ষ্ম করতে প্রিভিউ মোড “This layer” ও “All layers”-এর মধ্যে পরিবর্তন করুন।
- এলিমেন্ট ও ক্যানভাস সামঞ্জস্য করুন (বক্সের রং, বর্ডার রেডিয়াস ও ব্যাকগ্রাউন্ড) যাতে প্রিভিউটি আপনার বাস্তব ডিজাইনের সাথে মেলে।
- একটি ফাঁকা স্লাইডার সেটের বদলে শুরুর বিন্দু চাইলে একটি প্রিসেট প্রয়োগ করুন বা “Randomize layer” ব্যবহার করুন।
- পূর্ণ CSS নিয়ম (বা শুধু মান) কপি করুন এবং আপনার স্টাইলশিটে পেস্ট করুন।