مولّد النيومورفيزم لـ CSS

ما هي مولّد النيومورفيزم لـ CSS؟

مولّد النيومورفيزم لـ CSS أداة بصرية مجانية لصياغة مظهر Soft-UI (النيومورفيزم)، حيث تبدو العناصر بارزة من السطح أو مضغوطة فيه باستخدام ظلّين مزاحين من اللون نفسه. صُمّم لمصمّمي الواجهات ومطوّري الواجهة الأمامية الذين يريدون ذلك العمق اللطيف الملموس دون ضبط أزواج box-shadow يدويًّا. حدّد لونًا أساسيًا بأداة الانتقاء أو بحقل سداسي عشري، وبدّل الشكل بين مسطّح ومقعّر ومحدّب، واضبط المسافة (مقدار إزاحة الظلال) والشدّة (قوة التباين بين الفاتح والداكن) والتمويه (النعومة) ونصف القطر (تدوير الزوايا). تشتقّ الأداة إضاءة أفتح وظلًّا أغمق من لونك الأساسي وتدمجهما — مع طبقة تدرّج خفيفة اختياريًّا للأشكال المقعّرة والمحدّبة — في قاعدة CSS واحدة، تُعرض حيًّا على خلفية مطابقة وتُخرَج كشيفرة قابلة للنسخ.

كيفية استخدام مولّد النيومورفيزم لـ CSS

1. اختر لون سطحك الأساسي بالعيّنة أو بكتابة قيمة سداسية عشرية مثل #e0e5ec.
2. اختر شكلاً: مسطّح للوحة بارزة، أو مقعّر لتجويف مضغوط، أو محدّب لنتوء مقبّب.
3. اضبط المسافة لدفع الظلّ الفاتح والداكن إلى الخارج للحصول على بروز أعمق.
4. اضبط الشدّة لجعل التباين بين الإضاءة والظل أقوى أو أكثر خفوتًا.
5. اضبط التمويه لحواف أنعم أو أحدّ ونصف القطر لتدوير الزوايا.
6. تحقّق من المعاينة الحيّة، ثم انسخ CSS النيومورفيزم المُنشأ إلى ورقة الأنماط لديك.

أمثلة

اللون #e0e5ec، الشكل مسطّح، المسافة 12، الشدّة 15، التمويه 24، نصف القطر 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

اللون #e0e5ec، الشكل مقعّر، المسافة 8، الشدّة 15، التمويه 16، نصف القطر 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

اللون #3a3f47، الشكل محدّب، المسافة 6، الشدّة 20، التمويه 12، نصف القطر 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

الأسئلة الشائعة

ما هو النيومورفيزم؟

النيومورفيزم (أو Soft UI) أسلوب تبدو فيه العناصر بارزة من سطح أحادي اللون أو مضغوطة فيه، باستخدام ظلّي box-shadow مزاحين من اللون نفسه — أفتح في أعلى اليسار وأغمق في أسفل اليمين. تشتقّ هذه الأداة كلا الظلّين من لونك الأساسي حتى يتطابقا دائمًا مع السطح.

ما الفرق بين المسطّح والمقعّر والمحدّب؟

المسطّح يُبقي السطح بلون صلب واحد فيبدو العنصر مرتفعًا فوق الخلفية. المقعّر يضيف تدرّجًا خفيفًا يدكن باتجاه أعلى اليسار فيبدو مجوّفًا إلى الداخل. المحدّب يعكس التدرّج فيبدو المركز مقبّبًا ومرتفعًا. يبقى الظلّ الفاتح والداكن كما هما؛ ويتغيّر تعبئة السطح فقط.

كيف تعمل المسافة والشدّة والتمويه ونصف القطر؟

المسافة هي إزاحة الظلّين بالبكسل — تدفع القيم الأكبر العنصر أبعد عن السطح. تتحكّم الشدّة في مقدار فاتحية وداكنية لوني الظلّ مقارنةً باللون الأساسي. يُنعّم التمويه حواف الظل، ويُدوّر نصف القطر الزوايا. يتحدّث CSS حيًّا مع تغيير أيٍّ منها.

أيّ لون ينبغي أن أستخدمه للخلفية؟

لا يظهر النيومورفيزم بشكل صحيح إلا حين يستقرّ العنصر على سطح بنفس اللون الأساسي — طبّق اللون نفسه على العنصر الأب أو خلفية الصفحة. تستخدم المعاينة لونك الأساسي كخلفية لها حتى تستطيع تقييم التأثير بدقّة قبل النسخ.

هل تُرفع بياناتي إلى أيّ مكان؟

لا. يعمل المولّد بالكامل في متصفّحك بلغة JavaScript — لا يُرسَل لونك وإعداداتك إلى خادم أبدًا، لذا يعمل بخصوصية وحتى دون اتصال بمجرّد تحميل الصفحة.