أدوات HTML
اعمل مع HTML وPug وJSX ومكوّنات SVG وCSS. حوّل الترميز والأنماط بما يناسب مشروعك.
تضم هذه الفئة 21 أداة، وكلها تعمل في المتصفح دون تسجيل.
محرّر مسارات SVG
شكّل مسار SVG مباشرة. حرّك نقاط الارتكاز ومقابض المنحنيات، ثم انسخ المسار أو احفظ SVG.
محسّن SVG
حسّن ملفات SVG الثابتة محليًا باستخدام SVGO. قارن النتيجة ونزّل ملفات منفردة أو أرشيف ZIP.
SVG → JSX
حوّل ملفات SVG إلى شيفرة React JSX لإعادة استخدامها داخل مكوّنات React.
SVG → React Native
حوّل ملفات SVG إلى مكوّنات React Native لاستخدامها في تطبيقات الأجهزة المحمولة.
HTML → JSX
حوّل شيفرة HTML إلى React JSX لإعادة استخدامها ضمن مكوّنات مشروع React.
HTML → Pug
حوّل HTML إلى قوالب Pug لتسهيل كتابة القوالب وصيانتها.
Markdown → HTML
حوّل Markdown إلى HTML لعرض النص المنسّق في صفحات الويب.
مولّد Flexbox
أنشئ تخطيط flex فعليًا. اضبط الحاوية وكل عنصر، وجرّب عروضًا مختلفة، ثم احصل على شفرة CSS أو HTML أو Tailwind.
مولّد مسار القص في CSS
شكّل الأشكال مباشرة على اللوحة. اسحب نقاط المضلع، وجرّب الأشكال المستديرة، وصدّر CSS أو SVG.
مولّد ظلال العناصر
أضف العمق طبقة تلو الأخرى. حرّك الضوء، واضبط النعومة واللون، وانسخ ظلًا جاهزًا للاستخدام.
مولّد CSS Grid
ارسم تخطيط شبكة CSS بصريًا. حدّد أحجام الأعمدة والصفوف، واسحب عبر الخلايا لتسمية المناطق، وانسخ شفرة CSS أو HTML أو Tailwind.
مولّد منحنيات Bézier
شكّل منحنيات التسارع في CSS بسحب مقبضين. قارن الحركة بالتوقيت الخطي، وانسخ cubic-bezier() لاستخدامها في الانتقالات أو Tailwind.
مولّد استدارة الحواف
استدر كل زاوية، وانتقل إلى أنصاف الأقطار الإهليلجية، واسحب مقابض الحواف لنحت أشكال عضوية. انسخ border-radius بصيغة CSS أو Tailwind.
مولّد تأثير الزجاج
أنشئ لوحات بمظهر الزجاج المصنفر باستخدام backdrop-filter. اضبط التمويه والشفافية والتشبّع والحد على خلفية حيّة، ثم انسخ CSS.
مولّد تدرجات CSS
أنشئ تدرجات CSS خطية وشعاعية ومخروطية بنقاط ألوان قابلة للسحب وقرص للزاوية وتصاميم جاهزة. انسخ CSS أو فئة Tailwind. مجاني وفوري.
CSS → JS Objects
حوّل CSS إلى كائنات JavaScript لاستخدام الأنماط داخل شيفرة الواجهة الأمامية.
CSS → template literal
حوّل كائنات الأنماط إلى سلاسل قالبية لاستخدامها في الشيفرة وأطر العمل مثل React.
CSS → TailwindCSS
حوّل قواعد CSS إلى فئات TailwindCSS لاستخدامها في تصميم واجهات الويب.
Less → CSS
حوّل شيفرة Less إلى CSS قياسي لاستخدام الأنماط في المتصفح.
Scss → CSS
حوّل شيفرة SCSS إلى CSS قياسي لاستخدام الأنماط في صفحات الويب.
Sass → CSS
حوّل شيفرة Sass إلى CSS قياسي لاستخدامها في صفحات الويب.