mikaio.dev/freetools

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

দৃশ্যত একটি বক্স শ্যাডো ডিজাইন করতে স্লাইডার ব্যবহার করুন, তারপর জেনারেট করা CSS কোড কপি করুন।

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

দৃশ্যত একটি বক্স শ্যাডো ডিজাইন করতে স্লাইডার ব্যবহার করুন, তারপর জেনারেট করা CSS কোড কপি করুন।

এটি হল সংক্ষিপ্ত সংস্করণ, এবং অনেক দর্শকের জন্য এটিই একমাত্র অংশ যা তাদের প্রয়োজন — টুলটি এই পৃষ্ঠার শীর্ষে বসে, এটি অবিলম্বে কাজ করে, এবং নীচে কিছুই পড়ার প্রয়োজন নেই৷ এই পৃষ্ঠার বাকি অংশটি সেই সময়ের জন্য এখানে রয়েছে যখন একা উত্তর দেওয়া যথেষ্ট নয়: যখন আপনি জানতে চান যে জেনারেটরটি আসলে কীভাবে সঞ্চালিত হয়, কোথায় এটি নির্ভরযোগ্য হওয়া বন্ধ করে এবং এটি পেয়ে গেলে ফলাফলের সাথে কী করতে হবে।

কিভাবে এটি ব্যবহার করতে হয়

নিয়ন্ত্রণ ইচ্ছাকৃতভাবে কম. আপনি 7 টি নিয়ন্ত্রণ দেখতে পাবেন:

আপনার জন্য প্রযোজ্য এবং ফলাফল আপডেট পূরণ করুন. কোথাও জমা দেওয়ার অর্থে কিছুই বাধ্যতামূলক নয় — আপনি যদি আপনার মন পরিবর্তন করেন, মানটি সম্পাদনা করুন এবং নতুন উত্তর পড়ুন। কোনও সংরক্ষণের পদক্ষেপ নেই, কোনও নিশ্চিতকরণ ডায়ালগ নেই এবং এটিকে স্থায়ীভাবে ভুল করার কোনও উপায় নেই, তাই ফলাফলটি কীভাবে চলে তা দেখার জন্য বিভিন্ন পরিবর্তনের চেষ্টা করা কেবল অনুমোদিত নয়, এটি সাধারণত এই জাতীয় সরঞ্জাম ব্যবহার করার সবচেয়ে তথ্যপূর্ণ উপায়।

সবকিছু আপনার নিজের ব্রাউজারে চলে। আপনার টাইপ করা কিছুই আপলোড করা হয় না, ভিজিটের মধ্যে কিছুই সংরক্ষণ করা হয় না, তৈরি করার জন্য কোনও অ্যাকাউন্ট নেই এবং প্রত্যাখ্যান করার জন্য কোনও ট্র্যাকিং নেই। একবার এই পৃষ্ঠাটি লোড হয়ে গেলে এটির আর নেটওয়ার্কের প্রয়োজন হয় না, তাই আপনার সংযোগ কমে গেলে এটি কাজ করতে থাকে।

কেন এই মত একটি পেজ বিদ্যমান

দ্রুত ফিডব্যাক লুপ থেকে ডিজাইনের কাজটি প্রথম প্রচেষ্টায় নির্ভুলতা থেকে লাভের চেয়ে অনেক বেশি উপকারী। একটি মান ধাক্কা দিতে এবং অবিলম্বে ফলাফল দেখতে সক্ষম হচ্ছে যা একটি অস্পষ্ট অনুভূতিতে পরিণত করে যে কিছু একটি নির্দিষ্ট সিদ্ধান্তে আপনি রক্ষা করতে পারেন।

ওয়েবটি এমন সরঞ্জামে পূর্ণ যা প্রথমে একটি ইমেল ঠিকানা, একটি কুকি সিদ্ধান্ত এবং চার সেকেন্ডের বিজ্ঞাপনের দাবি করে ত্রিশ সেকেন্ডের সমস্যার সমাধান করে৷ সেই বাণিজ্য কারও কাছে বোধগম্য হয়েছিল, কিন্তু যে ব্যক্তি কেবল নম্বরটি চেয়েছিল তার কাছে এটি অর্থবহ ছিল না। এই পৃষ্ঠাটি বিপরীত অবস্থান নেয়: কোনো সাইনআপ নেই, কোনো ইন্টারস্টিশিয়াল নেই, কোনো আপসেল নেই এবং আপনি যা জন্য এসেছেন তা হয়ে গেলে চলে যাওয়ার কোনো কারণ নেই৷

রেজাল্ট কি করে আর আপনাকে বলে না

আউটপুট হল স্ট্যান্ডার্ড CSS যা আপনি সরাসরি একটি স্টাইলশীটে পেস্ট করতে পারেন — কোনও কাঠামো নেই, কোনও মালিকানা বিন্যাস নেই, কোনও রপ্তানি পদক্ষেপ নেই। আপনি যা রেন্ডার করেছেন তা আপনি অনুলিপি করা একই ঘোষণা দ্বারা উত্পাদিত হয়, তাই পূর্বরূপ এবং আপনার কোডবেসের মধ্যে অনুবাদ করার মতো কিছুই নেই।

এটি সীমানা সম্পর্কে স্পষ্ট হওয়া মূল্যবান, কারণ সরঞ্জামগুলি নিয়মিতভাবে বিশ্বাসযোগ্য হয় যেখানে তারা এটি প্রাপ্য। এটি তার ইনপুটগুলির মধ্যে সৎ: এটিকে সঠিক মান দিন এবং এটি আপনাকে একটি সঠিক জেনারেটর দেয়। এটি আপনাকে বলতে পারে না যে আপনি যে মানগুলি দিয়েছেন তা ব্যবহার করার জন্য সঠিক ছিল কিনা, আপনি সঠিক প্রশ্ন জিজ্ঞাসা করেছেন কিনা, বা আপনি যে প্রসঙ্গটির উত্তর প্রয়োগ করছেন তাতে ইনপুটগুলি কখনই ধরা পড়েনি এমন গুরুত্বপূর্ণ কিছু আছে কিনা৷ সেই রায় আপনার সাথে থাকে এবং এটি সেই অংশ যা আসলে গুরুত্বপূর্ণ।

যেখানে এটি একটি বাস্তব কর্মপ্রবাহের সাথে খাপ খায়

এই ধরনের সরঞ্জাম খুব কমই পুরো কাজ. প্রায়শই সিএসএস বক্স শ্যাডো জেনারেটর বড় কিছুর মাঝখানে এক ধাপ: আপনার এই চিত্রটি প্রয়োজন যাতে আপনি আসলে যে কাজটি করছেন তা চালিয়ে যেতে পারেন। এটি পৃষ্ঠাটি কীভাবে তৈরি করা হয় তা আকার দেয়। এটি দ্রুত খোলে, এটি বাধা দেয় না, এটি আপনাকে কোন কিছুর প্রতিশ্রুতি দিতে বলে না এবং আপনি যা করার জন্য এসেছেন সেই মুহুর্তে এটি পথ থেকে বেরিয়ে যায়।

এর অর্থ হল আপনি এটিকে সাবধানে ব্যবহার করার পরিবর্তে বারবার ব্যবহার করতে দ্বিধা বোধ করবেন। একটি দ্বিতীয় প্রচেষ্টার জন্য কোন মূল্য নেই এবং একটি ভুল প্রথম অনুমানের জন্য কোন জরিমানা নেই, তাই একটি ভাল উত্তরের দ্রুততম রুট হল সাধারণত একটি আনুমানিক চেষ্টা করা, ফলাফলটি দেখুন এবং সামঞ্জস্য করা। লোকেরা সরঞ্জামগুলিকে এমনভাবে বিবেচনা করে যে প্রতিটি ব্যবহার ব্যয়বহুল, যা সফ্টওয়্যার থেকে উত্তরাধিকারসূত্রে প্রাপ্ত একটি অভ্যাস যা এটিকে ব্যয়বহুল করে তুলেছে। এই এক না.

সাধারণ ভুলগুলি এড়ানো উচিত

প্রথমটি এমন একটি ফলাফলে বিশ্বাস করা হচ্ছে যার ইনপুট আপনি চেক করেননি। একটি টুল জানতে পারে না যে আপনি একটি নম্বর টাইপ করতে চেয়েছিলেন এবং অন্যটি টাইপ করতে চেয়েছিলেন এবং এটি সঠিক উত্তরটির মতো ঠিক একই আত্মবিশ্বাসের সাথে ভুল উত্তর উপস্থাপন করবে। আপনি আউটপুটে নির্ভর করার আগে আপনার ইনপুটগুলি আবার পড়ুন — এটি দুই সেকেন্ড সময় নেয় এবং যা ভুল হয় তার বেশিরভাগই ধরা দেয়।

দ্বিতীয়টি একটি সংখ্যাকে এমন একটি প্রশ্নের উত্তর হিসাবে বিবেচনা করছে যা এটি কখনও জিজ্ঞাসা করা হয়নি। এই পৃষ্ঠার প্রতিটি জেনারেটর কিছু সংকীর্ণ এবং নির্দিষ্ট উত্তর দেয়। এটি একটি কাছাকাছি কিন্তু ভিন্ন প্রশ্নে প্রয়োগ করা হল একটি সাধারণ উপায় যা মানুষ একটি টুল দ্বারা বিভ্রান্ত হয় যা পুরো সময় পুরোপুরি কাজ করে। আপনি যদি নিশ্চিত না হন যে আপনার প্রশ্নটি টুলটির উত্তরের সাথে মেলে, সেই অনিশ্চয়তা হল দরকারী সংকেত, কোন বাধা নয়।

নীচের প্রায়শই জিজ্ঞাসিত প্রশ্নগুলি প্রায়শই আসা মামলাগুলিকে কভার করে, যেখানে সৎ উত্তর হল যে আপনি যা করার চেষ্টা করছেন তার জন্য এটি সঠিক সরঞ্জাম নয়।

অফলাইনে এবং যেকোনো ডিভাইসে কাজ করা

পৃষ্ঠাটি একটি একক স্বয়ংসম্পূর্ণ নথি। ডাউনলোড করার জন্য কোনো ফ্রেমওয়ার্ক নেই, কোনো তৃতীয় পক্ষ থেকে কোনো ফন্ট আনা হয়নি এবং ব্যাকগ্রাউন্ডে কোনো অ্যানালিটিক্স বীকন ফায়ারিং নেই, এই কারণেই এটি একটি খারাপ সংযোগে দ্রুত লোড হয় এবং কেন আপনি মাঝে মাঝে ফিরে আসেন এমন একটি ট্যাবে খোলা রাখতে কোনো খরচ হয় না। এটি একটি ফোন, একটি ট্যাবলেট এবং একটি ডেস্কটপে একই কাজ করে; বিন্যাস মানিয়ে নেয়, আচরণ করে না।

কারণ প্রকৃত কাজের সাথে জড়িত কোন সার্ভার নেই, ডাউন করার জন্য কোন পরিষেবা নেই, আঘাত করার জন্য কোন হারের সীমা নেই এবং আচরণে শান্ত পরিবর্তন অন্য কোথাও থেকে ঠেলে দেওয়া হয়নি। আপনি কি লোড কি রান. আপনি যদি এটি সম্পর্কে নিশ্চিত হতে চান তবে পৃষ্ঠার উত্সটি খুলুন — পুরো বাস্তবায়নটি পাঠযোগ্য আকারে রয়েছে, যা এই ধরণের খুব কম সরঞ্জামই দাবি করতে পারে।

নির্ভুলতা একটি নোট

ফলাফলগুলি স্ট্যান্ডার্ড ডাবল-নির্ভুল গাণিতিকের সাথে গণনা করা হয় এবং হার্ডওয়্যারটি তৈরি করতে পারে এমন প্রতিটি সংখ্যার পরিবর্তে একটি সংবেদনশীল সংখ্যক জায়গায় প্রদর্শিত হয়। দুই দশমিকে দেখানো একটি চিত্র দুটি দশমিকের জন্য সঠিক বলে দাবি করছে না - এটি দাবি করছে যে আপনি যে ইনপুটগুলি সরবরাহ করেছেন, অভিহিত মূল্যে নেওয়া হয়েছে, সেই চিত্রটি তৈরি করে। ডিসপ্লেতে নির্ভুলতা এবং বাস্তব জগতে নির্ভুলতা ভিন্ন জিনিস, এবং এগুলিকে গুলিয়ে ফেলা হল একটি সঠিক টুল একটি ভুল সিদ্ধান্তের জন্য সবচেয়ে সাধারণ উপায়।

যদি একটি ফলাফল ভুল দেখায়, তাহলে আপনি পাটিগণিত নিয়ে সন্দেহ করার আগে ইনপুটগুলি পরীক্ষা করুন। বাস্তবে বিস্ময়কর উত্তরগুলির সিংহভাগই আসে ভুল এককে প্রবেশ করা একটি মান থেকে, একটি দশমিক বিভাজক আপনার ইচ্ছার চেয়ে ভিন্নভাবে পড়া, অথবা একটি ক্ষেত্র যখন এটি পরিবর্তন করা উচিত ছিল তার ডিফল্টে রেখে দেওয়া। এটি কারও সমালোচনা নয় - এটি কেবল যেখানে ত্রুটিগুলি থাকে এবং প্রথমে কোথায় দেখতে হবে তা জানা সবচেয়ে বেশি সময় সাশ্রয় করে৷

বক্স ছায়া FAQ

বক্স ছায়া পরামিতি মানে কি?
এক্স অফসেট: অনুভূমিক দূরত্ব (ধনাত্মক = ডান)। Y অফসেট: উল্লম্ব দূরত্ব (ধনাত্মক = নিচে)। অস্পষ্ট: অস্পষ্ট ব্যাসার্ধ (0 = তীক্ষ্ণ, উচ্চ = অস্পষ্ট)। স্প্রেড: ছায়াকে প্রসারিত করে (+) বা সংকুচিত করে (-)। রঙ: অস্বচ্ছতা সহ ছায়ার রঙ।
আমি কিভাবে একটি ইনসেট ছায়া তৈরি করব?
"ইনসেট" কীওয়ার্ড যোগ করুন: box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2)। একটি চাপা বোতামের প্রভাবের মতো উপাদানটির ভিতরে ইনসেট ছায়া দেখা যায়।
আমি একাধিক ছায়া যোগ করতে পারি?
হ্যাঁ। কমা সহ একাধিক ছায়া ঘোষণা পৃথক করুন: বক্স-ছায়া: 3px 3px 10px rgba(0,0,0,0.2), -3px -3px 10px rgba(255,255,255,0.8)। এই কৌশলটি নিউমরফিজম ডিজাইনে ব্যবহৃত হয়।