ডিজাইন ও CSS

আপনার ব্রাউজারেই একটি কোড স্নিপেটকে সিনট্যাক্স-হাইলাইট করা ঝকঝকে PNG কার্ডে রূপান্তর করুন — থিম, গ্রেডিয়েন্ট বা স্বচ্ছ পটভূমি ও প্যাডিং সহ, কোনো আপলোড ছাড়াই।

একটি ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড HEX রঙের মধ্যে WCAG কনট্রাস্ট অনুপাত যাচাই করুন এবং দেখুন এটি সাধারণ ও বড় টেক্সট উভয়ের জন্য AA ও AAA উত্তীর্ণ হয় কি না।

RGB বা Lab কালার স্পেসে আপনার বেছে নেওয়া অনুপাতে দুটি HEX রং মেশান এবং ফলস্বরূপ মধ্যবর্তী রংটি একটি সোয়াচ ও কপি করার যোগ্য HEX মান হিসেবে পড়ুন।

একটি বেস HEX রঙকে Tailwind-শৈলীর 50-950 শেড স্কেলে রূপান্তর করুন, সাদা ও কালোর দিকে মিশিয়ে, প্রতিটি ধাপে একটি সোয়াচ ও কপিযোগ্য HEX সহ।

একটি ছবি আপলোড করুন এবং প্রোটানোপিয়া, ডিউটেরানোপিয়া, ট্রাইটানোপিয়া বা সম্পূর্ণ বর্ণান্ধতায় তা কেমন দেখায় তা প্রিভিউ করুন, তারপর সিমুলেট করা ফলাফল ডাউনলোড করুন।

উপবৃত্তাকার অনুভূমিক ও উল্লম্ব ব্যাসার্ধসহ border-radius-এর আটটি কোণ মান সামঞ্জস্য করুন, বক্সের লাইভ প্রিভিউ দেখুন এবং সংক্ষিপ্ত CSS কপি করুন।

অফসেট, ব্লার, স্প্রেড, রঙ এবং inset নিয়ন্ত্রণ দিয়ে বহু-স্তরের CSS box-shadow তৈরি করুন, লাইভ প্রিভিউ দেখুন এবং ব্যবহারের জন্য প্রস্তুত প্রপার্টি কপি করুন।

একটি ন্যূনতম ও সর্বোচ্চ ফন্ট আকার এবং একটি ন্যূনতম ও সর্বোচ্চ ভিউপোর্ট প্রস্থকে ব্রেকপয়েন্টবিহীন একটি একক CSS clamp() ফ্লুইড-টাইপোগ্রাফি এক্সপ্রেশনে রূপান্তর করুন।

সংখ্যা ইনপুট দিয়ে circle, ellipse, polygon, inset বা rounded-inset প্রিসেট থেকে একটি CSS clip-path তৈরি করুন, লাইভ প্রিভিউ দেখুন এবং ব্যবহারের জন্য প্রস্তুত প্রপার্টি কপি করুন।

CSS cubic-bezier ইজিং কার্ভের চারটি নিয়ন্ত্রণ বিন্দু সম্পাদনা করুন, হ্যান্ডেল টেনে নিন বা মান টাইপ করুন, কার্ভ প্রিভিউ দেখুন এবং cubic-bezier() ফাংশন কপি করুন।

CSS Flexbox বা Grid-এর কন্টেইনার বৈশিষ্ট্য সামঞ্জস্য করুন, লেআউট লাইভ আপডেট হতে দেখুন এবং জেনারেট করা CSS কপি করুন।

ব্লার, স্বচ্ছতা, স্যাচুরেশন, বর্ডার ও শ্যাডো নিয়ন্ত্রণ এবং একটি টিন্ট রঙসহ ফ্রস্টেড-গ্লাস CSS তৈরি করুন, একটি ব্যাকড্রপের উপর প্রিভিউ দেখুন, এবং backdrop-filter ভিত্তিক CSS কপি করুন।