مولّد CSS
صمّم التدرّجات اللونية وظلال الصناديق والحواف الدائرية بصريًا، وانسخ كود CSS الذي تحتاجه.
مولّد CSS — تدرّجات لونية وظلال صناديق وحواف دائرية
صمّم ثلاثة من أكثر تأثيرات CSS استخدامًا بعينك لا بالتجربة والخطأ: التدرّجات اللونية، وظلال الصناديق، وتدوير الحواف. حرّك منزلقًا أو اختر لونًا فيتغيّر صندوق المعاينة فورًا؛ وكود CSS أسفله يطابق دائمًا ما تعرضه المعاينة بالضبط، جاهزًا للّصق في ملف الأنماط.
يستخدم الناتج الخصائص القياسية background وbox-shadow وborder-radius، وتدعمها كل المتصفحات الحالية دون بادئات المتصفحات. ولا يُرسل أي شيء إلى أي مكان: الأداة تعمل داخل متصفحك.
طريقة الاستخدام
- اختر تدرّج لوني أو ظل الصندوق أو تدوير الحواف.
- حرّك المنزلقات، أو اكتب أرقامًا دقيقة في الخانات المجاورة لها، أو اختر الألوان.
- اضغط عشوائي لنقطة بداية، أو إعادة تعيين للعودة إلى القيم الافتراضية.
- انسخ كود CSS أسفل المعاينة.
التدرّجات اللونية
التدرّج صورة يرسمها المتصفح، لذلك يوضع في background (أو background-image) ويتكيّف مع أي حجم دون أن يتشوّش. تتوفر ثلاثة أنواع:
| النوع | مثال | الشكل |
|---|---|---|
| خطي | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | تتغيّر الألوان على امتداد خط مستقيم بالزاوية التي تحددها |
| شعاعي | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | تنتشر الألوان من المركز في حلقات |
| مخروطي | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | تدور الألوان حول المركز مثل عجلة الألوان |
لكل لون موضع بالنسبة المئوية. ولونان في الموضع نفسه يعطيان حافة حادة بدل الامتزاج، وهكذا تُصنع الخطوط والمخططات الدائرية بـ CSS وحده. استخدم إضافة لون لما يصل إلى ست نقاط لونية موزّعة بالتساوي؛ ويحذف حذف اللون آخر لون، حتى يبقى لونان.
تبدأ الزوايا في CSS من الأعلى وتدور مع عقارب الساعة: 0deg يتجه إلى الأعلى، و90deg إلى اليمين، و180deg إلى الأسفل.
ظلال الصناديق
يقبل ظل الصندوق حتى خمس قيم: الإزاحة الأفقية، والإزاحة العمودية، والتمويه، والانتشار، واللون، إضافة إلى الكلمة المفتاحية الاختيارية inset.
- أفقي وعمودي يحرّكان الظل؛ والقيم السالبة تحرّكه إلى اليسار أو إلى الأعلى.
- التمويه يليّن الحافة. القيمة 0 تعطي ظلًا حادًا كأنه مقصوص.
- الانتشار يكبّر الظل قبل التمويه. والانتشار السالب مع تمويه كبير يعطي المظهر الناعم المرفوع الشائع في الواجهات الحديثة.
- العتامة مدمجة في اللون بصيغة
rgba()، فلا يحجب الظل أبدًا ما خلفه. - ظل داخلي (inset) يرسم الظل داخل الصندوق، فيبدو كأنه مضغوط إلى الداخل.
الظلال الخفيفة تبدو عادةً أجمل من القوية: لون داكن شفاف قليلًا مأخوذ من لوحة ألوانك، بدل الأسود الخالص، يندمج بشكل أكثر طبيعية.
تدوير الحواف
عند تحديد القيمة نفسها لكل الزوايا يدوّر منزلق واحد الزوايا الأربع. ألغِ التحديد لضبط كل زاوية على حدة؛ وعندها يسرد كود CSS أربع قيم بهذا الترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار.
بالبكسل يبقى التدوير كما هو بأي حجم. أما بالنسبة المئوية فيتبع الصندوق: border-radius: 50% يحوّل المربع إلى دائرة والمستطيل إلى شكل بيضاوي.
أدوات ذات صلة
لتحويل لون بين HEX وRGB وHSL، أو لإيجاد لون بتباين كافٍ مع خلفيته، استخدم محوّل الألوان. ولترتيب ملف الأنماط الذي تلصق فيه الكود أو ضغطه، استخدم منسّق الأكواد. وصفحات المهام تفتح هذه الأداة على تأثير واحد: مولّد تدرّج CSS ومولّد box-shadow ومولّد border-radius.