Softonic

مولد خلفيات الأنماط

خطوة 1 / 3

اختر نمطا

ينشئ كل خيار نمطا متكررا بتدرجات CSS من دون ملف صورة.

شكل النمط

اختر نمطا من النقاط أو الشبكة أو الخطوط الكثيفة أو رقعة الشطرنج أو التهشير المتقاطع أو الخطوط القطرية المتباعدة. حدّد لون الخلفية ولون النمط ومسافة التكرار. ينشئ المولد خلفية متكررة بتدرجات CSS، ويعرض معاينة مباشرة، ويقدم خصائص جاهزة للصق في قاعدة CSS. قد يتضمن الناتج background-color وbackground-image وbackground-size وbackground-position حسب النمط. لا ينشئ ملف صورة أو SVG.

كيفية توليد نمط

  1. 1

    اختر النمط

    نقاط أو شبكة أو خطوط كثيفة أو رقعة شطرنج أو تهشير متقاطع أو خطوط قطرية متباعدة.

  2. 2

    حدّد لونين

    لون للخلفية ولون لخطوط التدرج أو أشكاله.

  3. 3

    اضبط المسافة

    اختر مسافة تكرار من 5 بكسلات لقوام كثيف إلى 80 بكسلا لنمط أكثر تباعدا.

  4. 4

    راجع المعاينة المباشرة

    تتحدث المعاينة فور تغيير النمط أو اللونين أو المسافة.

  5. 5

    انسخ CSS

    انسخ الخصائص المولدة والصقها داخل أي قاعدة CSS.

CSS خالص، بلا ملفات صور

يرسم كل نمط بتدرجات CSS فوق background-color ثابت. لا يحتاج الناتج إلى استضافة ملف صورة أو طلبه. يبدو نمط النقاط مثلا هكذا:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

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

مِمّ يتكوّن كل مِعلم

المِعلم مبني من جيد لـ
نقاط radial-gradient متكرر الصفحات التقنية، لوحات المعلومات، واجهات حديثة
شبكة خطّا linear-gradient متقاطعان إحساس الورق المخطط، السبورات، المخططات
خطوط كثيفة repeating-linear-gradient بزاوية 45 درجة لمسات على طراز عمود الحلاق، أقسام مرحة
رقعة شطرنج أربع طبقات linear-gradient مائلة واجهات ريترو، خلفيات على طراز الشفافية
تظليل متقاطع repeating-linear-gradient متقاطعان قوام الرسم والطباعة، أسلوب تحريري
خطوط قطرية متباعدة repeating-linear-gradient واحد بزاوية 45 درجة حالات التحذير، المظلات المخططة، الرياضة

نصائح للون والتباين

  • استخدم تباينا منخفضا للخلفيات. غالبا ما يبدو لون النمط القريب من لون الخلفية أكثر هدوءا، بينما قد يزاحم التباين القوي محتوى الصفحة.
  • نسّق النمط مع الهوية البصرية. يمكن استخدام لون من ألوان العلامة بدلا من الرمادي حتى ينسجم القوام مع التصميم المحيط.
  • جرّب إعدادا داكنا. قد يناسبك لون خلفية داكن مع لون نمط أفتح قليلا. يمكن أن يبدو التباين القوي صاخبا على مساحة داكنة كبيرة.
  • افحص النص مع اللونين. إذا ظهر نص فوق النمط، فاختبر تباين لون النص مع لون الخلفية ومع لون النمط في المواضع التي قد يقع فيها أي منهما تحت الحروف. تعرض هذه الأداة النمط، لكنها لا تجري تدقيقا لتباين WCAG.

أين تستخدمه

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

لأن النمط CSS وليس ملف خلفية منفصلا، فهو لا يضيف طلبا لتحميل صورة. ويمكن تعديل قيم التدرج والحجم والموضع لاحقا في أدوات المطور بالمتصفح.

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

لا. المخرج CSS خالص: background-color إضافةً إلى background-image مكوّن من تدرجات CSS. تنسخ الـ CSS وتلصقه على عنصر. لا توجد صورة أو ملف SVG لتنزيله أو استضافته.

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

يكون النمط منخفض التباين أقل تشتيتا عادة، لكن ذلك لا يثبت أن النص مقروء. اختبر لون النص مع كل لون قد يظهر تحته. وللنص الكثيف تكون الخلفية السادة أسهل في التحقق غالبا.

الألوان مجرد قيم سداسية عشرية (hex) في الـ CSS. عدّل background-color واللون داخل التدرج، أو أعد التوليد هنا بألوان جديدة وانسخ المقطع الجديد.

أدوات ذات صلة

مرجع جدول ASCII

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

مرجع أحرف HTML

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

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

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

عدّاد FPS

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

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

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