লার্ন কম্পিউটার একাডেমি
English

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

একাধিক শ্যাডো লেয়ার সাজান, বাক্সের উপর সরাসরি টেনে বসান, আর এমন CSS কপি করুন যা একটা ঝাপসা দাগের বদলে সত্যিকারের ছায়ার মতো দেখায়।

CSS পাঠগুলো দেখুন

লেয়ারসমূহ (2)

লেয়ার 1

লাইট-সোর্স মোড

একটি অ্যাঙ্গেলই প্রতিটি লেয়ারের অফসেট একসাথে ঠিক করে দেয়, যেমনটা একটামাত্র আলোর উৎস করত — প্রতিটি লেয়ারের X/Y আলাদা করে বসানোর বদলে, যা সহজেই ভৌতভাবে অসংগত হয়ে যায়।

স্মুথ শ্যাডো জেনারেটর

একটি elevation মান দিয়েই একটি ইজিং কার্ভে ৫-লেয়ারের নরম শ্যাডো তৈরি হয় — আধুনিক বেশিরভাগ নরম শ্যাডোর পিছনের কৌশল এটাই। বর্তমান লেয়ারগুলো বদলে যাবে।

একটি box-shadow পেস্ট করে ইমপোর্ট করুন

সক্রিয় লেয়ারের অফসেট বদলাতে shape-টি টেনে সরান

প্রিভিউ

A / B তুলনা

বর্তমান স্ট্যাকটি A হিসেবে সেভ করুন, তারপর B হিসেবে এডিট চালিয়ে যান, দুটো পাশাপাশি দেখুন।

প্রিসেট

তৈরি হওয়া CSS

.box {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25),
  0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

কোন ফিল্ড কী করে দেখতে তার উপর মাউস রাখুন বা ট্যাপ করুন।

শ্যাডো একটি ইঙ্গিত মাত্র, বর্ডার নয় — যেখানে কনট্রাস্ট সত্যিই জরুরি (যেমন কোনো ফর্ম ফিল্ড ভুল দেখানো), সেখানে শুধু এর উপর নির্ভর করবেন না।