التصميم و CSS

حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.

افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.

ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.

اضبط جميع قيم الزوايا الثماني لـ border-radius، بما فيها نصفا القطر الأفقي والرأسي للشكل الإهليلجي، لتشاهد معاينة حية للمربع وتنسخ CSS المختصر.

أنشئ ظل صندوق CSS متعدد الطبقات بأدوات التحكم في الإزاحة والتمويه والانتشار واللون وinset، وشاهد معاينة مباشرة، وانسخ الخاصية الجاهزة للاستخدام.

حوّل حجم خط أدنى وأقصى مع عرض إطار عرض أدنى وأقصى إلى تعبير clamp() واحد للطباعة المرنة في CSS بلا نقاط توقف.

أنشئ خاصية CSS clip-path من إعدادات مسبقة للدائرة أو الشكل البيضاوي أو المضلّع أو inset أو inset المُدوّر باستخدام حقول رقمية، وعاينها مباشرةً، وانسخ الخاصية الجاهزة للاستخدام.

حرّر تخفيف CSS من نوع cubic-bezier أو steps() بسحب المقابض، وعاينه بحركة حيّة، وقارنه بإعداد مسبق، وانسخ القيمة.

أنشئ CSS Flexbox أو Grid بصريًا بعناصر تحكم للحاوية ولكل عنصر، وأحجام مسارات مخصصة، ومحرر grid-template-areas، ثم انسخ الـ CSS.

أنشئ كود CSS بتأثير الزجاج الضبابي مع عناصر تحكم في التمويه والشفافية والتشبع والحدود والظل بالإضافة إلى لون صبغة، وعاينه فوق خلفية، وانسخ كود backdrop-filter.