आप रैखिक-ढाल का उपयोग करके सीएसएस में पृष्ठभूमि की धारियां बना सकते हैं। हम अक्सर एक ढाल को एक रंग से दूसरे रंग में फीका समझते हैं, लेकिन धारियों के लिए चाल किसी भी तरह से फीका नहीं होती है। इसके बजाय, हम एक ही स्थान पर "रंग स्टॉप" निर्दिष्ट कर सकते हैं, जैसे कि रंग एक से तुरंत बदल जाता है (…)
आप सीएसएस में पृष्ठभूमि धारियों का उपयोग करके बना सकते हैं linear-gradient। हम अक्सर एक ढाल को एक रंग से दूसरे रंग में एक फीका के रूप में सोचते हैं, लेकिन धारियों के लिए चाल बिल्कुल भी फीका नहीं होती है। इसके बजाय, हम एक ही स्थान पर "रंग स्टॉप" निर्दिष्ट कर सकते हैं, जैसे कि रंग एक से दूसरे में तुरंत बदलता है।
फिर इसे और भी आसान बनाने के लिए ट्रिक का उपयोग किया जा रहा है repeating-linear-gradientताकि हम पहले कुछ धारियों का वर्णन कर सकें और यह स्वाभाविक रूप से दोहराएगा:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
एक नाई फैशन में धारियों को चेतन करने के लिए, यह एनिमेट करने की बात है background-position। यह भी सिर्फ एक ठग चाल है। यदि आपके तत्व का आकार दोहराई जाने वाली धारियों के आकार से मेल नहीं खाता है, तो बैकग्राउंड-पोजीशन बढ़ने से कुछ अजीब तरह की धारियां हो सकती हैं:
इन आकारों को पूरी तरह से मेल खाने की कोशिश करने के बजाय, इसे background-position200% तक उड़ाना आसान है और फिर 100% से अपनी स्थिति को चेतन करना।
div ( background-image: repeating-linear-gradient( -45deg, transparent, transparent 1rem, #ccc 1rem, #ccc 2rem ); background-size: 200% 200%; animation: barberpole 10s linear infinite; ) @keyframes barberpole ( 100% ( background-position: 100% 100%; ) )