ডিজাইন ও CSS

আপনার ব্রাউজারেই একটি কোড স্নিপেটকে সিনট্যাক্স-হাইলাইট করা ইমেজে রূপান্তর করুন — ২০+ ভাষা, কাস্টম থিম ও পটভূমি, লাইন নম্বর এবং PNG বা SVG এক্সপোর্ট সহ।

টেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG 2.1 কনট্রাস্ট ও APCA Lc স্কোর যাচাই করুন, AA, AAA ও 3:1 ব্যাজ দেখুন এবং নিকটতম উত্তীর্ণ রঙ প্রয়োগ করুন।

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

একটি বেস HEX রঙকে সমন্বয়যোগ্য ধাপ, প্রতি-ধাপ WCAG কনট্রাস্ট ইঙ্গিত এবং CSS, Tailwind ও JSON এক্সপোর্টসহ OKLCH, HSL বা RGB স্কেলে রূপান্তর করুন।

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

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

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

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

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

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

CSS Flexbox বা Grid দৃশ্যত তৈরি করুন — কন্টেইনার ও প্রতি-আইটেম নিয়ন্ত্রণ, কাস্টম ট্র্যাক আকার এবং grid-template-areas সম্পাদক দিয়ে, তারপর জেনারেট করা CSS কপি করুন।

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