10 أنماط خلفية CSS يمكنك استخدامها على موقع الويب الخاص بك

يمكن أن تغير أنماط الخلفية بشكل جذري مظهر موقع الويب الخاص بك. يمكنك بسهولة إنشاء أنماط خلفية أنيقة باستخدام CSS والتي ستأخذ تصميم موقعك إلى المستوى التالي.

فيما يلي قائمة بعشرة أنماط للخلفية يمكنك استخدامها في مشاريعك.

1. المسدس الأسود

الكود في هذه الأمثلة متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه تحت رخصة معهد ماساتشوستس للتكنولوجيا.

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

كود HTML

<h1>المسدس الأسود</h1>

كود CSS

هيئة {
 خط العائلة: 'شارك Tech'، بلا الرقيق؛
 حجم الخط: 68 بكسل ؛
 اللون الابيض؛
 عرض: فليكس ؛
 jsutify- المحتوى: المركز ؛
 محاذاة العناصر: مركز ؛
 الهامش: 0؛
 العرض: 100vw ؛
 الارتفاع: 100 فولت
 ظل النص: 8مقصف 8مقصف 10مقصف # 0000008c ؛
 لون الخلفية: # 343a40 ؛
 صورة الخلفية: url ("البيانات: الصورة / svg + xml ،٪ 3Csvg xmlns ='http://www.w3.org/2000/svg' العرض ='28' الارتفاع ='49' viewBox ='0 0 28 49'قاعدة تعبئة٪ 3E٪ 3Cg ='زوجي'معرّف٪ 3E٪ 3Cg ='السداسي' ملء ='٪ 239C92AC





instagram viewer

' ملء التعتيم ='0.25' ملء القاعدة ='غير صفرية'٪ 3E٪ 3 المسار d ='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15 فولت'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") ، التدرج الخطي (إلى أعلى اليمين ، # 343a40 ، # 2b2c31 ، # 211f22 ، # 151314 ، # 000000) ؛
}
h1 {
 الهامش: 20 بكسل ؛
}

2. ذا بلو ستربس

يستخدم نمط خلفية الشرائط الزرقاء تنسيق الخطي التدرج خاصية CSS لإنشاء شرائط متدرجة فوق خلفية. تستطيع تغيير لون الخلفية ولون التدرج لتلبية متطلباتك.

كود HTML

<فئة div ="أنماط pt1"></div>

كود CSS

هيئة {
 الهامش: 0 بكسل ؛
}
.أنماط {
 العرض: 100vw ؛
 الارتفاع: 100vw ؛
}
.pt1 {
 حجم الخلفية: 50 بكسل 50 بكسل ؛
 لون الخلفية: # 0ae ؛
الصورة الخلفية: -مجموعة ويب- التدرج الخطي(rgba(255, 255, 255, .2) 50%, شفاف 50%, شفاف);
الصورة الخلفية: -موز-التدرج الخطي(rgba(255, 255, 255, .2) 50%, شفاف 50%, شفاف);
الصورة الخلفية: -ms- التدرج الخطي(rgba(255, 255, 255, .2) 50%, شفاف 50%, شفاف);
الصورة الخلفية: - التدرج الخطي(rgba(255, 255, 255, .2) 50%, شفاف 50%, شفاف);
الصورة الخلفية: الخطي التدرج(rgba(255, 255, 255, .2) 50%, شفاف 50%, شفاف);
}

3. رقعة الشطرنج

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

كود HTML

<فئة div ="أنماط pt1"></div>

كود CSS

هيئة {
 الهامش: 0 بكسل ؛
}
.أنماط {
 العرض: 100vw ؛
 الارتفاع: 100vw ؛
}
.pt1 {
 لون الخلفية: #إيييي؛
 حجم الخلفية: 60 بكسل 60 بكسل ؛
 موضع الخلفية: 0 0 ، 30 بكسل 30 بكسل ؛
 صورة الخلفية: -webkit-linear-gradient (45deg ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود) ، -webkit-linear-gradient (45deg ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود)؛
 صورة الخلفية: - متدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود) ، متدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود)؛
 صورة الخلفية: -ms-linear-gradient (45deg ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود) ، -ms-linear-gradient (45deg ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود)؛
 صورة الخلفية: - تدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود) ، تدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ أسود 75٪ أسود) ؛
 صورة الخلفية: تدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود) ، تدرج خطي (45 درجة ، أسود 25٪ ، شفاف 25٪ ، شفاف 75٪ ، أسود 75٪ ، أسود)؛
}

4. البحر الصامت

يمكنك استخدام أنماط الخطوط الأفقية البسيطة هذه لإضافة خلفية ثابتة لأي عنصر HTML.

كود HTML

<فئة div ="أنماط pt1"></div>

كود CSS

هيئة {
 الهامش: 0 بكسل ؛
}
.أنماط {
 العرض: 100vw ؛
 الارتفاع: 100vw ؛
}
.pt1 {
 لون الخلفية: #026873;
 حجم الخلفية: 13 بكسل 13 بكسل ، 29 بكسل 29 بكسل ، 37 بكسل 37 بكسل ، 53 بكسل 53 بكسل ؛
الصورة الخلفية: -مجموعة ويب- التدرج الخطي(0, rgba(255, 255, 255, .07) 50%, شفاف 50%), -مجموعة ويب- التدرج الخطي(0, rgba(255, 255, 255, .13) 50%, شفاف 50%), -مجموعة ويب- التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .17) 50%), -مجموعة ويب- التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .19) 50%);
الصورة الخلفية: -موز-التدرج الخطي(0, rgba(255, 255, 255, .07) 50%, شفاف 50%), -موز-التدرج الخطي(0, rgba(255, 255, 255, .13) 50%, شفاف 50%), -موز-التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .17) 50%), -موز-التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .19) 50%);
الصورة الخلفية: -ms- التدرج الخطي(0, rgba(255, 255, 255, .07) 50%, شفاف 50%), -ms- التدرج الخطي(0, rgba(255, 255, 255, .13) 50%, شفاف 50%), -ms- التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .17) 50%), -ms- التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .19) 50%);
الصورة الخلفية: - التدرج الخطي(0, rgba(255, 255, 255, .07) 50%, شفاف 50%), - التدرج الخطي(0, rgba(255, 255, 255, .13) 50%, شفاف 50%), - التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .17) 50%), - التدرج الخطي(0, شفاف 50%, rgba(255, 255, 255, .19) 50%);
الصورة الخلفية: الخطي التدرج(0, rgba(255, 255, 255, .07) 50%, شفاف 50%), الخطي التدرج(0, rgba(255, 255, 255, .13) 50%, شفاف 50%), الخطي التدرج(0, شفاف 50%, rgba(255, 255, 255, .17) 50%), الخطي التدرج(0, شفاف 50%, rgba(255, 255, 255, .19) 50%);
}

5. الطوب الحديث

يمكنك إنشاء نمط لبنة حديث CSS خالص باستخدام امتداد الخطي التدرج خاصية CSS.

كود CSS

هيئة {
 صورة الخلفية: تدرج خطي (45 درجة ، شفاف 20٪ ، أسود 25٪ ، شفاف 25٪) ،
 التدرج الخطي (-45 درجة ، شفاف 20٪ ، أسود 25٪ ، شفاف 25٪) ،
 التدرج الخطي (-45 درجة ، شفاف 75٪ ، أسود 80٪ ، شفاف 0) ،
 شعاعي التدرج (رمادي 2 بكسل ، شفاف 0) ؛
 حجم الخلفية: 30 بكسل 30 بكسل ، 30 بكسل 30 بكسل ؛
}

6. Web3 نمط الخلفية

يمكنك إنشاء ملف ويب 3- نمط الخلفية باستخدام صورة خلفية وإضافة تأثير ضبابي إليها. يستخدم هذا المثال صورة مجرة ​​من Unsplash. يمكنك أن تكون مبدعًا وتستخدم صورة مجرة ​​أو بحر أو آثار أو أي شيء آخر.

كود HTML

<فئة div ="بطاقة bg-blur">
<h1>بطاقة مع خلفية متدرجة</h1>
</div>

كود CSS

:جذر {
 --bg-image: url ('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid = MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&تلقائي = تنسيق&تناسب = المحاصيل&ث = 1169&ف = 80');
}
هيئة {
 لون الخلفية: # 1D1E22 ؛
 عائلة الخطوط: sans-serif ؛
 عرض: فليكس ؛
}
.بطاقة {
 الهامش: تلقائي ؛
 الحشو: 1rem.
 الارتفاع: 300 بكسل ؛
 العرض: 300 بكسل ؛
 محاذاة النص: مركز ؛
 اللون الابيض؛
 عرض: فليكس ؛
 محاذاة العناصر: مركز ؛
 تبرير المحتوى: مركز ؛
 الموقف: نسبي ؛
 لون الخلفية: رمادي ؛
 نصف قطر الحدود: 10 بكسل ؛
}
.bg-blur {
 إخفاء الفائض؛
 لون الخلفية: شفاف.
}
.bg-blur::قبل {
 المحتوى: '';
 الصورة الخلفية: فار(--bg-image) ؛
 حجم الخلفية: غطاء ؛
 الارتفاع: 100٪؛
 العرض: 100٪؛
 الموقف: مطلق.
 عامل التصفية: طمس (30 بكسل) ؛
 مؤشر z: -1 ؛
}

7. خلفية متدرجة متحركة

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

كود HTML

<فئة div ="د-فليكس عمود مرن يضبط مركز المحتوى w-100 h-100"></div>

كود CSS

هيئة {
معرفتي: الخطي التدرج(-45 درجة, # ee7752, # e73c7e, # 23a6d5, # 23d5ab);
 حجم الخلفية: 400٪ 400٪ ؛
 الرسوم المتحركة: التدرج 15 ثانية سهل لانهائي ؛
 الارتفاع: 100 فولت
}
تضمين التغريدة الانحدار {
 0% {
 موضع الخلفية: 0٪ 50٪ ؛
 }
50% {
 موضع الخلفية: 100٪ 50٪ ؛
 }
100% {
 موضع الخلفية: 0٪ 50٪ ؛
 }
}

8. موجات متعرجة

يمكنك إنشاء نمط موجات متعرج بسيط باستخدام شعاعي التدرج خاصية CSS.

كود HTML

<فئة div ="أنماط pt1"></div>

كود CSS

هيئة {
 الهامش: 0 بكسل ؛
}
.أنماط {
 العرض: 100vw ؛
 الارتفاع: 100vw ؛
}
.pt1 {
معرفتي: -موز-شعاعي-الانحدار(0% 2%, دائرة, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), -موز-شعاعي-الانحدار(100% 100%, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), لا أحد;
معرفتي: -مجموعة ويب-شعاعي-الانحدار(0% 2%, دائرة, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), -مجموعة ويب-شعاعي-الانحدار(100% 100%, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), لا أحد;
معرفتي: -ms- شعاعي-الانحدار(0% 2%, دائرة, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), -ms- شعاعي-الانحدار(100% 100%, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), لا أحد;
معرفتي: -o-شعاعي-الانحدار(0% 2%, دائرة, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), -o-شعاعي-الانحدار(100% 100%, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), لا أحد;
معرفتي: شعاعي التدرج(0% 2%, دائرة, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), شعاعي التدرج(100% 100%, rgba(96, 16, 48, 0) 9مقصف, #661133 10مقصف, rgba(96, 16, 48, 0) 11مقصف), لا أحد;
 حجم الخلفية: 20 بكسل 20 بكسل ؛
}

9. غطاء طاولة

هل تحتاج إلى نمط خلفية قياسي لـ HTML div الخاص بك؟ جرب نمط قماش الطاولة هذا.

كود CSS

هيئة {
 الخلفية: أبيض ؛
الصورة الخلفية: الخطي التدرج(90درجة, rgba(200,0,0,.5) 50%, شفاف 0),
الخطي التدرج(rgba(200,0,0,.5) 50%, شفاف 0);
 حجم الخلفية: 30 بكسل 30 بكسل ؛
}

10. انزلاق الأقطار

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

كود HTML

<فئة div ="bg"></div>
<فئة div ="bg bg2"></div>
<فئة div ="bg bg3"></div>
<فئة div ="المحتوى">
<h1>انزلاق تأثير الأقطار الخلفية</h1>
</div>

كود CSS

لغة البرمجة {
ارتفاع:100%;
}
هيئة {
حافة:0;
}
.bg {
الرسوم المتحركة:الانزلاق 3سسهولة في الخروجلانهائيالبديل;
الصورة الخلفية: الخطي التدرج(-60 درجة, # 6c3 50%, # 09 و 50%);
الأسفل:0;
اليسار:-50%;
العتامة:.5;
موقع:مُثَبَّت;
حق:-50%;
أعلى:0;
الفهرس z:-1;
}
.bg2 {
اتجاه الرسوم المتحركة: عكس بديل;
مدة الرسوم المتحركة: 4 ث;
}
.bg3 {
مدة الرسوم المتحركة: 5 ث;
}
.المحتوى {
لون الخلفية: rgba (255,255,255,.8);
نصف قطر الحد: .25em;
مربع الظل:0 0 .25emrgba(0,0,0,.25);
تحجيم الصندوق: مربع الحدود;
اليسار:50%;
حشوة: 10 دقيقة;
موقع:مُثَبَّت;
محاذاة النص:المركز;
أعلى:50%;
تحول: ترجمة (-50%, -50%);
}
h1 {
خط العائلة: monospace;
}
تضمين التغريدة الانزلاق {
 0% {
تحول: translateX (-25%);
 }
100% {
تحول: translateX (25%);
 }
}

قم بتجميل موقع الويب الخاص بك باستخدام CSS

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

8 نصائح وحيل أساسية لـ CSS يجب على كل مطور معرفتها

اقرأ التالي

نبذة عن الكاتب