المحتوى
باستخدام رمز CSS ، يمكنك إنشاء خلفية شريطية لصفحة ويب دون استخدام الرسومات. يستخدم هذا التأثير مستويات تدرج CSS مع فواصل ألوان متعددة ، وكذلك خاصية حجم الخلفية لتجعل متجه التدرج يتكرر عبر الشاشة. أفضل طريقة للقيام بذلك هي أن تبدأ بلون الخلفية الصلبة وجعل واحدة من خطوط شفافة لتمييز اللون. سيرى المستخدمون الذين يزورون صفحتك مستخدمين متصفحات الإنترنت القديمة لونًا صلبًا.
الاتجاهات
-
افتح ملف ورقة أنماط CSS في المفكرة أو في برنامج لتحرير الكود. أضف هذه القاعدة إلى نهاية الملف:
html {height: 100٪؛ }
تتيح هذه القاعدة ملء الخلفية الكاملة لصفحة الويب بشريط التدرج الذي ستقوم بإنشائه.
-
عيِّن لونًا خلفيًا لصفحتك ضمن "html {}" لتوفير اللون الأساسي لشرائطك ولافتراضي للمتصفحات القديمة:
html {height: 100٪؛ لون الخلفية: أسود. }
-
أضف التعليمات البرمجية التالية إلى الافتراضي الخاص بك "html {}" لإنشاء تأثير شريط أفقي:
صورة خلفية: التدرج الخطي (شفاف 50٪ ، أبيض 50٪) ؛
سيؤدي ذلك إلى إنشاء فواصل لونية ، الأول يكون شفافًا والثاني أبيض. تأخذ كل مقاطعة لون 50٪ من مساحة التدرج على الشاشة. اضبط عرض الشرائط عن طريق تغيير قيم النسبة المئوية.
-
أضف قيمة صفر إلى فاصل اللون الأول وفصلها بفاصلة:
صورة الخلفية: التدرج الخطي (0 ، شفاف 50٪ ، أسود 50٪) ؛
سيؤدي ذلك إلى وضع خطوطك رأسياً ، بدلاً من وضعها أفقياً.
-
تكرار خاصية صورة الخلفية وقيمها في سطر جديد. قم بذلك مرتين ، وخلق ثلاثة أسطر بنفس الكود. أضف بادئة "-moz" إلى التدرج الخطي في أحد أسطر التعليمات البرمجية المكررة. أضف بادئة "-webkit" إلى السطر المكرر الآخر:
صورة خلفية: التدرج الخطي (0 ، شفاف 50٪ ، أبيض 50٪) ؛ خلفية الصورة: - التدرج اللوني الخطي (0 ، شفاف 50٪ ، أبيض 50٪) ؛ خلفية الصورة: -تدرج-خطي التدرج (0 ، شفافة 50 ٪ ، أبيض 50 ٪) ؛
-
قصر التدرج اللوني على مقدار معين من البكسل من خلال تحديد حجم الخلفية في السطر التالي في كود CSS الخاص بك:
حجم الخلفية: 20 بكسل ؛
قم بتغيير عدد وحدات بكسل حجم الخلفية لتعديل حجم التدرج. نظرًا للتكرار المستمر لتدرج عرض الصفحة ، فإن كل تكرار يتوافق مع مجموعة من الأشرطة على الشاشة.
الاتجاهات
تحذير
- لا تدعم بعض المتصفحات القديمة تدرجات CSS3. عندما تريد عرض خطوط لكل أنواع المتصفحات ، استخدم التعليقات الشرطية لتضمين ورقة أنماط ذات مخطط متكرر.