أدوات وحاسبات CSS

gradient منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئchevron_right layers منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئchevron_right rounded_corner منشئ استدارة الحواف CSS دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ. أنشئchevron_right text_format منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئchevron_right border_style منشئ حدود CSS صمّم حدًا بصريًا — السماكة، النمط (solid, dashed, dotted, double…)، اللون، ونصف القطر — مع معاينة حية. أنشئchevron_right blur_on مولّد تأثير الزجاج بلغة CSS صمّم تأثير الزجاج (glassmorphism) بمعاينة حيّة — اضبط التمويه والشفافية ولون الزجاج والحدود، ثم انسخ كود CSS. استخدمchevron_right transform منشئ التحويل CSS (transform) ادمج التدوير والتحجيم والإزاحة والإمالة بصريًا وانسخ كود transform الناتج. أنشئchevron_right swap_vert مولّد شريط التمرير بـ CSS صمّم شريط تمرير ملونًا مخصصًا مع معاينة مباشرة وانسخ كود CSS — متوافق مع WebKit وFirefox. استخدمchevron_right speed منشئ الانتقال CSS (transition) اضبط انتقالًا — الخاصية، المدة، دالة التوقيت، والتأخير — واختبره مباشرة بنقرة واحدة. أنشئchevron_right photo_filter منشئ فلاتر CSS امزج blur وbrightness وcontrast وgrayscale وhue-rotate وsaturate وsepia وinvert مع معاينة حية. أنشئchevron_right animation منشئ الرسوم المتحركة CSS اختر قالب keyframe جاهزًا — دوران، نبض، ارتداد، اهتزاز، تلاشٍ، انزلاق — واضبط المدة وعدد التكرارات، وانسخ @keyframes مع الفئة (class). أنشئchevron_right view_column ملعب CSS Flexbox اضبط flex-direction وjustify-content وalign-items وwrap وgap على صناديق حيّة، ثم انسخ كود CSS الخاص بالحاوية. استخدمchevron_right mouse منتقي مؤشر CSS مرّر المؤشر فوق كل قيمة cursor في CSS لتجربتها مباشرة، وانقر لنسخ التصريح. استخدمchevron_right view_week منشئ الأعمدة المتعددة CSS وزّع النص في أعمدة على طراز الجرائد — العدد، الفجوة وخط الفاصل — مع معاينة حية وكود CSS. أنشئchevron_right format_size مولد السلم الطباعي (Type Scale) أنشئ سلمًا طباعيًا معياريًا من حجم أساسي ونسبة — معاينة حية، جدول px/rem، ومتغيرات CSS جاهزة للنسخ. أنشئchevron_right text_fields حاسبة الطباعة المرنة — CSS clamp() أنشئ دالة CSS clamp() تُغيّر حجم الخط بسلاسة بين عرضي إطار عرض — دون الحاجة إلى نقاط توقف (breakpoints). احسبchevron_right view_column حاسبة أعمدة الشبكة عروض الأعمدة لأي حاوية وعدد أعمدة ومسافة فاصلة — مع كود CSS Grid جاهز للنسخ وقياسات الامتداد متعدد الأعمدة. احسبchevron_right