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

বক্স-শ্যাডো ও বোতাম জেনারেটর কী?#

বক্স-শ্যাডো হলো সেই CSS নিয়ম যা একটি এলিমেন্টের পিছনে একটি ড্রপ শ্যাডো আঁকে। নাম সত্ত্বেও এটি শুধু ছায়ার চেয়ে অনেক বেশি করে: সঠিকভাবে স্তরিত করলে এটি সেই নরম এলিভেশন তৈরি করে যা আধুনিক UI কার্ড এবং বোতামকে বস্তুগত অনুভূতি দেয়, এটি একটি “চাপা” স্টেটের জন্য একটি ইনসেট খাঁজ কেটে নিতে পারে, এবং একটি ফোকাসড ইনপুটের চারপাশে একটি রঙিন গ্লো অনুকরণ করতে পারে। সমস্যা হলো একটি শ্যাডো সঠিক করার অর্থ প্রতি স্তরে পাঁচটি মান (অফসেট X, অফসেট Y, ব্লার, স্প্রেড, রঙ) এবং একটি ঐচ্ছিক inset কীওয়ার্ড নিয়ে খেলা — এবং বেশিরভাগ প্রকৃত বোতাম দুই বা তিনটি স্তর স্ট্যাক করে, তাই আপনি শেষ পর্যন্ত হাতে দশ থেকে পনেরটি সংখ্যা টিউন করেন।

এই পৃষ্ঠাটি গাণিতিক কাজটি সরিয়ে দেয়। আপনি শ্যাডো স্তরগুলো স্ট্যাক করেন এবং সাইডবারে একটি বোতামের ব্যাসার্ধ, বর্ডার, প্যাডিং এবং রঙ ডায়াল করেন; ডান পেনটি শ্যাডো প্রয়োগ করা একটি লাইভ বোতাম দেখায় এবং উভয় .btn CSS নিয়ম এবং মিলে যাওয়া <button> HTML লেখে, পেস্ট করার জন্য প্রস্তুত। লোডে আপনি যা দেখেন তা হলো আধুনিক ডিজাইন সিস্টেম জুড়ে ব্যবহৃত পরিচিত দ্বি-স্তর এলিভেটেড বোতাম — একটি ভালো সূচনা বিন্দু যা আপনি তারপর নিজের ব্র্যান্ডের দিকে ঠেলে দেন।

যেভাবে ব্যবহার করবেন#

সাইডবারে কন্ট্রোল রয়েছে; ডান পেনে প্রিভিউ, CSS আউটপুট এবং HTML আউটপুট রয়েছে।

1. শ্যাডো তৈরি করুন। ছায়া এর অধীনে, একটি নতুন স্তর স্ট্যাক করতে + স্তর যোগ করুন (+ Add layer) ক্লিক করুন। প্রতিটি স্তরের ছয়টি কন্ট্রোল রয়েছে:
   • অফসেট X / অফসেট Y — শ্যাডো কতদূর ডান/নিচে সরে যায় (ঋণাত্মক বাম/উপরে যায়)। 0/0 এটিকে কেন্দ্রে রাখে, একটি সমান গ্লো তৈরি করে।
   • ব্লার — প্রান্ত কতটা নরম। 0 হলো একটি কঠিন, সমতল কপি; বড় মান এটি ছড়িয়ে দেয়। CSS-এ ব্লার ঋণাত্মক হতে পারে না।
   • স্প্রেড — শ্যাডোর পদচিহ্ন বড় বা ছোট করে। ঋণাত্মক স্প্রেড একটি প্রশস্ত ব্লারকে একটি আঁটসাঁট, বিশ্বাসযোগ্য প্রান্তে টাইট করে।
   • রঙ — একটি হেক্স রঙ। শ্যাডোটিকে অর্ধস্বচ্ছ করতে আলফা চ্যানেল (#00000033-এর মতো একটি ৮-অঙ্কের হেক্স) ব্যবহার করুন; সম্পূর্ণ অস্বচ্ছ রঙগুলো কঠিন #RRGGBB হিসেবে রেন্ডার হয়।
   • ভেতরের — এটিকে উল্টে শ্যাডোটিকে এলিমেন্টের ভেতরে আঁকতে (একটি চাপা, খোদাই করা চেহারা) এর পিছনে আঁকার বদলে।
   • উপরে সরান / নিচে সরান / মুছুন স্তরগুলো পুনর্বিন্যাস্ত বা সরিয়ে দেয়। তালিকার প্রথম স্তরটি উপরে আঁকে; শেষটি সবচেয়ে পিছনে থাকে।
2. বোতাম স্টাইল করুন। বোতাম এর অধীনে, লেবেল টেক্সট সেট করুন, তারপর ব্যাসার্ধ, বর্ডার প্রস্থ, বর্ডারের রঙ, প্যাডিং Y / X, ব্যাকগ্রাউন্ড, এবং টেক্সট রঙ। রঙ ক্ষেত্রগুলো একটি হেক্স টেক্সট বাক্সকে একটি নেটিভ কালার পিকারের সাথে যুক্ত করে।
3. যা প্রয়োজন তা কপি করুন। CSS-এর পাশে কপি সম্পূর্ণ .btn নিয়মটি নেয়; HTML-এর পাশে কপি <button> এলিমেন্টটি নেয়। বর্ডার প্রস্থ 0 সেট করলে বর্ডারটি border: none;-এ ভেঙে যায়।

প্রধান বৈশিষ্ট্য#

• একাধিক স্তর, ক্রমানুসারে। একটি বিশ্বাসযোগ্য শ্যাডো প্রায় সর্বদা দুই বা তিনটি স্তর — এলিমেন্টের কাছে একটি আঁটসাঁট গাঢ় প্রান্ত এবং আরও দূরে একটি নরম, হালকা ওয়াশ। আপনি যতগুলি প্রয়োজন ততগুলি স্ট্যাক এবং পুনর্বিন্যাস্ত করতে পারেন।
• আলফা-সচেতন রঙ সিরিয়ালাইজেশন। একটি সম্পূর্ণ অস্বচ্ছ রঙ পরিষ্কার #RRGGBB হিসেবে নির্গত হয়; আপনি স্বচ্ছতা যোগ করার সাথে সাথে এটি একটি ট্রিম করা আলফা সহ rgba(r, g, b, a)-তে স্যুইচ করে — ফর্মগুলো প্রকৃত স্টাইলশিট আসলে ব্যবহার করে।
• এক নিয়মে সম্পূর্ণ বোতাম। ব্যাসার্ধ, বর্ডার, প্যাডিং, ব্যাকগ্রাউন্ড, টেক্সট রঙ এবং শ্যাডো সবই একটি একক .btn ব্লকে নির্গত হয়, তাই একটি পেস্ট এলিমেন্টটিকে সম্পূর্ণরূপে স্টাইল করে।
• যা মেলে তা HTML। HTML আউটপুট হলো শুধু <button class="btn">Label</button>, লেবেলটি HTML-এস্কেপ করা — < বা &-এ পূর্ণ একটি লেবেলও পেস্ট করতে নিরাপদ।
• লাইভ প্রিভিউ বাম-থেকে-ডানে পিন করা। একটি ধনাত্মক X অফসেট সর্বদা শ্যাডোটিকে ডানদিকে সরিয়ে দেয়, তাই প্রিভিউটি পৃষ্ঠার ভাষা নির্বিশেষে LTR-এ বাধ্যতামূলক।

বিস্তারিত উদাহরণ#

পৃষ্ঠাটি একটি প্রস্তুত-তৈরি এলিভেটেড ইন্ডিগো বোতাম দিয়ে লোড হয়। এর শ্যাডো দুটি স্তর: বোতামকে জড়িয়ে ধরা একটি আঁটসাঁট -1px স্প্রেড প্রান্ত, এবং আরও দূরে একটি প্রশস্ত, সামান্য ওয়াশ। সঠিক তৈরি CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

লক্ষ্য করুন দুটি স্তর একসাথে কাজ করে: প্রথমটি (4px 6px ব্লার, -1px স্প্রেড, 0.2 আলফা) ক্রিস্প কন্টাক্ট প্রান্ত সংজ্ঞায়িত করে; দ্বিতীয়টি (10px 15px ব্লার, -3px স্প্রেড, 0.102 আলফা) পরিবেষ্টনকারী লিফ্ট সরবরাহ করে। আলফা বাদ দিন এবং শ্যাডো একটি সমতল কালো স্ট্যাম্পে পরিণত হয়; স্প্রেড বাড়ান এবং বোতামটি খুব উঁচুতে ভাসমান দেখায়।

একটি চাপা স্টেটের জন্য, সেই স্তরগুলো মুছুন এবং একটি একক যোগ করুন: ভেতরের চালু, অফসেট 0/2, ব্লার 4, স্প্রেড 0, রঙ #00000033। আউটপুট হয়ে যায় inset 0 2px 4px rgba(0, 0, 0, 0.2) — এলিমেন্টটি এখন পৃষ্ঠের মধ্যে ডুবে গেছে বলে মনে হয়, একটি :active স্টাইলের জন্য নিখুঁত।

সাধারণ জিজ্ঞাসা#

আমি হেক্স টাইপ করলে রঙ কেন rgba(...) হিসেবে আসে?#

যখন আপনার হেক্সের একটি আলফা চ্যানেল থাকে (৮ অঙ্ক, যেমন #00000033), টুলটি এটিকে rgba(r, g, b, a) হিসেবে সিরিয়ালাইজ করে কারণ সেটিই এমন ফর্ম যা বেশিরভাগ CSS টুলিং এবং পুরোনো ব্রাউজার নির্ভরযোগ্যভাবে পার্স করে। একটি সম্পূর্ণ অস্বচ্ছ রঙ — কোনো আলফা নেই, বা আলফা FF-এ — কম্প্যাক্ট #RRGGBB হিসেবে থাকে। উভয়ই আপনি যা ডায়াল করেছেন তার সাথে অভিন্ভাবে রেন্ডার হয়; এটি সম্পূর্ণভাবে নিচের দিকে কোন নোটেশন বেশি শক্তিশালী তার বিষয়।

স্তরগুলো কোন ক্রমে আঁকে?#

তালিকার প্রথম স্তরটি উপরে আঁকা হয়, শেষটি নিচে। একটি প্রাকৃতিক এলিভেশনের জন্য, তীক্ষ্ণ, গাঢ়, কাছের স্তরটি প্রথমে এবং নরম, হালকা, দূরের স্তরটি দ্বিতীয়ত রাখুন — সেভাবে আঁটসাঁট কন্টাক্ট প্রান্তটি পরিবেষ্টনকারী ওয়াশ দ্বারা দমবিত নয়। প্রিভিউ ঠিক না হওয়া পর্যন্ত উপরে সরান / নিচে সরান দিয়ে পুনর্বিন্যাস্ত করুন।

ব্লার নাকি স্প্রেড — পার্থক্য কী?#

ব্লার শ্যাডোর প্রান্তকে নরম করে (সম্পূর্ণ রঙ থেকে স্বচ্ছতে একটি গ্রেডিয়েন্ট)। স্প্রেড ব্লার প্রয়োগের আগে সম্পূর্ণ শ্যাডোকে একটি নির্দিষ্ট পরিমাণে বড় বা ছোট করে — ধনাত্মক স্প্রেড এটিকে বড় এবং আরও কঠিন করে, ঋণাত্মক স্প্রেড এতে খেয়ে যায় এবং একটি প্রশস্ত-ব্লার স্তরে একটি আঁটসাঁট, পেশাদার প্রান্তের চাবিকাঠি। একটি সাধারণ ভুল হলো শুধু ব্লারে পৌঁছানো এবং একটি ফোলা মেঘ পাওয়া; -2px বা -3px স্প্রেড যোগ করা এটিকে আবার আকৃতিতে ফিরিয়ে আনে।

আমি কি একটি div-এ এই শ্যাডো ব্যবহার করতে পারি, বোতামে নয়?#

হ্যাঁ। CSS যেকোনো এলিমেন্টে কাজ করে যা box-shadow গ্রহণ করে — শুধু box-shadow: লাইনটি (বা আপনার নির্বাচকে পুনরায় নামকরণ করা সম্পূর্ণ নিয়ম) কপি করুন এবং আপনার প্রয়োজন নেই এমন বোতাম-নির্দিষ্ট ঘোষণাগুলো বাদ দিন। HTML আউটপুটটি শুধুমাত্র তখনই প্রাসঙ্গিক যখন আপনি আসলে একটি <button> চান।