أدوات التصميم و CSS
ابنِ تدرجات وظلالاً وتأثيرات مع CSS جاهز للنسخ.
تأثيرات CSS أسهل بكثير في التصميم بالعين منها في الكتابة من الذاكرة. لا أحد يتذكر الصياغة الدقيقة لتدرج مخروطي متعدد المحطات، أو ظل مركّب يُقرأ كعمق ناعم، أو منحنى cubic-bezier يبدو طبيعياً لا آلياً. هذه المولّدات تعطيك أدوات تحكم بصرية وتنتج CSS المقابل مباشرة، فتضبط حتى يصبح المنظر صحيحاً ثم تنسخ القاعدة إلى ملف أنماطك.
أدوات هذا التصنيف
23عن هذه الأدوات
التدرجات والظلال والعمق المتعدد الطبقات
العمق المقنع لا يأتي من ظل واحد تقريباً أبداً. الواجهات الحقيقية تُكدّس ظلاً قريباً داكناً ضيقاً للتلامس مع آخر أوسع أنعم أفتح للتلاشي المحيط، وCSS يسمح بعدة ظلال مفصولة بفواصل لهذا الغرض بالضبط. والتدرجات مثلها: إضافة محطات ألوان وسيطة هي ما يُزيل ذلك الرمادي الموحل الذي يظهر عندما يستنتج المتصفح ما بين لونين متباعدين.
صيغ الألوان والتباين
HEX مختصر، وRGB صريح، وHSL يتيح بناء لوحة بتحريك رقم واحد، وOKLCH الحديث يحافظ على ثبات الإضاءة المُدركة بين الدرجات فتبدو مجموعة الألوان مجموعة فعلاً. والتحويل بينها روتين؛ أما فحص التباين فليس اختيارياً، لأن النص تحت نسبة WCAG غير مقروء لكثير من الناس وتشير إليه كل مراجعات إمكانية الوصول.
حركة لا تبدو رخيصة
الانتقال الخطي يبدو آلياً لأن لا شيء مادي يتحرك بسرعة ثابتة. منحنيات التسارع تصلح ذلك، والفرق بين انتقال جيد وآخر مزعج يكون عادةً في المدة أكثر من المنحنى: بين 150 و250 مللي ثانية لتغيّرات الحالة الصغيرة، وأطول قليلاً للحركات الأكبر. ورؤية المنحنى يتحرك بجانب الكود هي ما يجعل هذا الحكم سريعاً.