التصميم و CSS

قم بإنشاء الألوان والتحجيم سريع الاستجابة وCSS الجاهز للإنتاج.

الألوان وسهولة الوصول

محوّل الألوانحوّل الألوان بين HEX وRGB وHSL وHSV وCMYK وLAB؛ عدّل أي حقل لتتحدّث بقية القيم فورًا.صفحات متخصصة (8)
فاحص التباينأدخل لوني النص والخلفية لمعرفة نسبة تباين WCAG ومستويات AA وAAA المستوفاة.

تنسيقات CSS والتأثيرات

مولد الظل الصندوقياسحب أشرطة التمرير لتشكيل box-shadow، وقم بتكديس الطبقات للحصول على العمق، وانسخ CSS النهائي فورًا.
مولّد التدرجاتأنشئ تدرجًا خطيًا أو شعاعيًا أو مخروطيًا، وأضف توقفات لونية وحدد الاتجاه، ثم انسخ CSS بنقرة واحدة.
مولّد تدوير الزوايادوّر كل زاوية باستخدام أشرطة التمرير، وأنشئ أشكالًا فقاعية عضوية بالوضع البيضاوي، وانسخ CSS فورًا.
مولد فليكس بوكسقم بإعداد حاوية مرنة وعناصرها باستخدام عناصر التحكم المرئية، وشاهد التفاعل المباشر للتخطيط، وانسخ CSS بنقرة واحدة.
مولّد شبكة CSSحدد الأعمدة والصفوف، واسحب عبر الخلايا لوضع العناصر، ثم انسخ CSS للشبكة مع HTML المطابق بنقرة واحدة.
CSS مولد بيزير مكعباسحب المقبضين لتشكيل منحنى تسارع، وشاهد نقطة تتحرك عليه بجانب نقطة ثابتة السرعة، ثم انسخ قيمة cubic-bezier().
حاسبة CSS clamp()أدخل حجمًا للشاشات الصغيرة وآخر للشاشات الكبيرة لتحصل على قيمة clamp() مرنة تتغير بسلاسة بينهما، سواء لحجم الخط أو الحشو أو الهوامش أو الفجوات.

الشاشة، الطباعة، والنسب

محول بكسل / نقطة في البوصةقم بتحويل وحدات البكسل إلى بوصات، سم و مم في أي DPI/PPI — لتصميم الشاشة وعمل الطباعة على حد سواء.
حاسبة كثافة بكسلات الشاشة (PPI)أدخل دقة الشاشة وحجمها لتحصل على كثافة البكسلات وتباعد النقاط والأبعاد الفعلية والمزيد.
محوّل px إلى rem وemقم بالتحويل بين px وrem وem باستخدام أحجام خطوط الجذر والسياق الخاصة بك - قم بتحرير أي حقل وتحديث الحقلين الآخرين أثناء الكتابة.

فحص الخطوط وتراخيصها

فاحص معلومات وتراخيص الخطوطافتح ملف خط محلي لقراءة أسمائه المضمنة، ونص الترخيص، وأعلام تضمين المستندات — كدليل من الملف نفسه، وليس كإثبات على امتلاكك للترخيص.