CSS Box Shadow জেনারেটর
CSS Box Shadow কী?
CSS box-shadow প্রপার্টি একটি উপাদানের ফ্রেমের চারপাশে ছায়া প্রভাব যোগ করে। ছায়াগুলি অফসেট, ঝাপসা, ছড়ানো, রঙিন এবং inset (ভেতরের ছায়া) হিসেবে সেট করা যায়। কমা-বিভক্ত একাধিক ছায়া সমৃদ্ধ প্রভাবের জন্য স্তূপীকৃত করা যায়। এই জেনারেটর আপনাকে দৃশ্যমানভাবে জটিল বহু-স্তরীয় ছায়া তৈরি করতে এবং ক্লিপবোর্ডে প্রস্তুত CSS কপি করতে দেয়।
Box Shadow জেনারেটর কীভাবে ব্যবহার করবেন
-
ছায়া স্থাপন ও আকার দিতে Offset X/Y, Blur এবং Spread স্লাইডার সামঞ্জস্য করুন।
-
ছায়ার রঙ বেছে নিতে রঙের সোয়াচে ক্লিক করুন এবং স্বচ্ছতার জন্য Opacity স্লাইডার ব্যবহার করুন।
-
অভ্যন্তরীণ আভা বা চাপা প্রভাব তৈরি করতে 'Inset' টগল করুন।
-
একাধিক ছায়া স্তূপ করতে '+ স্তর যোগ করুন' ক্লিক করুন।
-
তৈরি CSS কপি করুন এবং আপনার স্টাইলশিটে পেস্ট করুন।
সাধারণত জিজ্ঞাসিত প্রশ্নাবলী
box-shadow এবং drop-shadow filter এর মধ্যে পার্থক্য কি? box-shadow উপাদানের আয়তক্ষেত্রাকার সীমানা বাক্সের চারপাশে ছায়া যোগ করে এবং ভিতরের ছায়া সমর্থন করে। CSS filter: drop-shadow() উপাদানের ভিজ্যুয়াল আকৃতিতে প্রয়োগ করা হয় (স্বচ্ছতা সহ), যা এটিকে PNG এর মতো স্বচ্ছ পটভূমি সহ অ-আয়তক্ষেত্রাকার রূপরেখা অনুসরণ করতে দেয়।
আমি কীভাবে Material Design কার্ড উন্নতি প্রভাব তৈরি করি? দুটি বক্স ছায়া স্ট্যাক করুন: একটি নরম চারপাশের ছায়া (বড় ঝাপসা, কম অস্বচ্ছতা, সামান্য ছড়িয়ে) এবং একটি মূল ছায়া (ছোট ঝাপসা, উচ্চতর অস্বচ্ছতা, দিকনির্দেশনামূলক অফসেট)। উদাহরণস্বরূপ: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow কি পৃষ্ঠা লেআউট প্রভাবিত করে? না। box-shadow ডকুমেন্ট প্রবাহে উপাদানের আকার বা অবস্থান প্রভাবিত করে না। outline এর বিপরীতে, এটি লেআউট স্থান দখল করে না এবং অন্যান্য উপাদানগুলি চারপাশে ঠেলে দেবে না।
আমি কি box-shadow অ্যানিমেট করতে পারি? হ্যাঁ। box-shadow হল CSS transitions এবং animations এর সাথে অ্যানিমেটযোগ্য। কর্মক্ষমতার জন্য, শুধুমাত্র প্রয়োজনে box-shadow অ্যানিমেট করা পছন্দ করুন — ব্রাউজারগুলি box-shadow পরিবর্তনগুলি transform বা opacity এর মতোই GPU-ত্বরান্বিত করতে পারে না।
Keywords: CSS box shadow জেনারেটর, box-shadow CSS, CSS ছায়া টুল, CSS drop shadow, inset shadow, বহু-স্তরীয় ছায়া, CSS shadow অনলাইন