Softonic

مولّد نسيج الضوضاء

خطوة 1 / 2
التالي

قليل من الضوضاء يخفي التدرّج المتقطّع (banding)، ويلطّف مساحات اللون المسطّح، ويجعل تدرجات الواجهة أقل جمودًا. يبني هذا المولّد نسيج ضوضاء مربعًا قابلًا للتكرار بلا حدود ظاهرة باستخدام مرشّح feTurbulence في SVG، مع تحكم في لون الخلفية وشفافية الضوضاء وتردد الحبيبات ونوع الضوضاء، ثم يمنحك كود CSS جاهزًا: لون خلفية مع عنوان بيانات SVG مضمّن يمكنك لصقه مباشرة في ملف الأنماط.

كيفية إنشاء نسيج ضوضاء

  1. 1

    اختر لون الخلفية

    تُضاف الحبيبات فوق هذا اللون، فابدأ من السطح الذي تنوي استخدامه فعلًا.

  2. 2

    اضبط الشفافية

    من ضوضاء تكاد لا تُرى (2-5%) إلى حبيبات فيلمية كثيفة (25% فما فوق). القيم الخفيفة هي الأنسب للواجهات.

  3. 3

    اضبط التردد

    التردد الأساسي الأعلى يعطي حبيبات دقيقة وكثيفة، والأدنى يعطي بقعًا أكبر وأنعم.

  4. 4

    اختر نوع الضوضاء

    الضوضاء الكسورية (fractalNoise) ناعمة وطبيعية، أما الاضطراب (turbulence) فأعلى تباينًا وأقرب إلى الغيوم.

  5. 5

    انسخ كود CSS

    الناتج هو لون خلفية مع عنوان بيانات SVG مضمّن، جاهز للصق في ملف الأنماط لديك.

ضوضاء SVG باستخدام feTurbulence

أقصر طريقة لإضافة الضوضاء هي SVG مع مرشّح الاضطراب:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

ضمّنه على شكل background-image: url("data:image/svg+xml,...") لتحصل على بضع مئات من البايتات تتكرر على أي سطح، دون أي طلب HTTP إضافي.

الإعدادات الموصى بها حسب حالة الاستخدام

حالة الاستخدام الشفافية التردد الأساسي نوع الضوضاء
ألواح واجهة في الوضع الداكن 3-5% 0.8-1.0 ضوضاء كسورية
طبقة فوق تدرّج قسم البطل 5-10% 0.7-0.9 ضوضاء كسورية
بطاقة بملمس ورقي 8-15% 0.6-0.8 ضوضاء كسورية
مظهر حبيبات الفيلم 15-25% 0.9-1.2 ضوضاء كسورية
حبيبات ملصق قديم الطراز 25-40% 0.4-0.6 اضطراب

ملاحظات حول الأداء

  • اضطراب SVG لا يحتاج إلى معالج رسوميات في معظم المتصفحات. فهو يعمل داخل خلفيات CSS وتُعاد رسمته بتكلفة منخفضة.
  • أعد استخدام بلاطة واحدة. يولّد الأداة بلاطة مقاسها 200 × 200 مع stitchTiles="stitch"، فتتكرر دون حدود ظاهرة على شاشة كبيرة.
  • تجنّب تحريك الضوضاء. لا يتحرك feTurbulence بسلاسة من دون تغيير baseFrequency، ويتراجع الأداء بوضوح في الجلسات الطويلة.
  • اجمع الضوضاء فوق التدرجات. حبيبات بشفافية 10% فوق تدرّج CSS تعطي سطحًا أغنى من التدرّج وحده.

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

كلما كانت لديك مساحة كبيرة من لون مسطّح أو تدرّج تبدو نظيفة أكثر من اللازم. تكتسب أقسام البطل وخلفيات النوافذ المنبثقة وألواح الواجهة الداكنة عمقًا بضوضاء بنسبة 3-10%. تجنّبها في مناطق النصوص لأنها قد تضر بوضوح القراءة.

في مرشّح feTurbulence الخاص بـ SVG، ينتج type="turbulence" القيمة المطلقة لضوضاء بيرلين (تباين أعلى ومظهر غيمي)، بينما يعطي type="fractalNoise" قيمًا موجبة وسالبة (حبيبات أنعم وأقرب إلى الطبيعة). والضوضاء الكسورية هي الخيار المناسب لواجهات المستخدم في معظم الحالات.

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

نعم. قد تُظهر التدرجات على الشاشات ذات 8 بتات لكل قناة تقطّعًا مرئيًا عند التباين المنخفض. طبقة ضوضاء بنسبة 2-3% تشتّت الانتقال وتزيل التقطّع على الهواتف والشاشات معًا.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

مولد EditorConfig

أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.

الأداة متاحة بلغات أخرى