सिकाडा सिद्धांत आपको कुछ सरल चित्रों से बहुत लंबे, गैर-दोहराए जाने वाले वेब पेज की पृष्ठभूमि बनाने की अनुमति देता है। यह पहली बार अप्रैल 2011 में एलेक्स वॉकर द्वारा वर्णित किया गया था और जल्दी से लोकप्रियता हासिल की। साइट designfestival.com में इस सिद्धांत पर बनाई गई
पृष्ठभूमि की एक पूरी
गैलरी है ।
कई मामलों में, आप ग्रेडिएंट का उपयोग करके और भी अधिक बचत कर सकते हैं। इस तथ्य के साथ भी कि जब लगभग सभी ब्राउज़र केवल उपसर्गों के साथ
linear-gradient संपत्ति का समर्थन करते हैं, तो पृष्ठभूमि बनाने के लिए आवश्यक सीएसएस कोड की कुल मात्रा टुकड़े के साथ कई पीएनजी के आकार से कई गुना छोटी होती है, और, इससे भी महत्वपूर्ण बात यह है कि इसे अतिरिक्त अनुरोधों की आवश्यकता नहीं होती है। सर्वर के लिए। तो, एरिक मेयर ने हाल ही में वॉकर के मूल लेख से शुद्ध सीएसएस में पहले दो पृष्ठभूमि
के कार्यान्वयन का एक उदाहरण दिया। सरल रंग सलाखों (ऊपर) के लिए, सीएसएस कोड के 2.66 Kb की जरूरत थी (पूर्वसर्गों के साथ, बिना किसी संशोधन और संपीड़न के)। भविष्य में, जब सभी लोकप्रिय ब्राउज़रों को उपसर्गों से छुटकारा मिलेगा, तो कोड का 0.59 Kb पर्याप्त होगा। मूल उदाहरण में, छवियों का सर्वर से 6 केबी + 3 अनुरोधों का वजन था। दूसरा पर्दा उदाहरण (नीचे) और भी प्रभावशाली है। उपसर्गों के साथ भी, आपको लगभग दस गुना लाभ मिलता है।
उदाहरणों के लिए कोड सीधा और सरल है। मैंने सभी उपसर्गों के साथ पूर्ण संस्करण का हवाला नहीं दिया ताकि लेख को अव्यवस्थित न करें। यहाँ शीर्ष उदाहरण है:
background-image: linear-gradient( 0deg, rgba(171,191,196,0.6), rgba(171,191,196,8) 50%, rgba(255,0,0,0) 50%, rgba(255,0,0,0) ) , linear-gradient( 0deg, rgba(203,138,153,0.7), rgba(203,138,153,0.7) 49%, rgba(203,138,153,0.5) 50%, rgba(255,0,0,0) 50%, rgba(255,0,0,0) ) , linear-gradient( 0deg, rgba(220,209,185,0) 0%, rgba(220,209,185,0) 20%, rgba(220,209,185,0.4) 20%, rgba(220,209,185,0.8) 80%, rgba(255,0,0,0) 80%, rgba(255,0,0,0) ) ; background-size: 29px 100%, 37px 100%, 53px 100% ; background-repeat: repeat-x; height: 200px;
यहाँ नीचे एक है:
background-image: linear-gradient( 90deg, rgba(255,128,128,0.25), rgba(255,128,128,0) 75% ) , linear-gradient( -1deg, transparent, transparent 30%, #510A0E 35%, #510A0E 40%, #61100F 43%, #B93F3A 50%, #4B0408 55%, #6A0F18 60%, #651015 65%, #510A0E 70%, #510A0E 75%, rgba(255,128,128,0) 80%, transparent ) , linear-gradient( 2deg, #510A0E, #510A0E 20%, #61100F 25%, #B93F3A 40%, #4B0408 50%, #6A0F18 70%, #651015 80%, #510A0E 90%, #510A0E ) ; background-size: auto, 300px 100%, 109px 100%; background-position: background-repeat: repeat-x; height: 400px;
लीनियर ग्रेडिएंट्स को जोड़ने वाले पहले और सिकाडा के सिद्धांत का
आविष्कार रैंडी मेरिल ने जून 2011 में
किया था। इससे पहले, छद्म यादृच्छिक शोर उत्पन्न
करने के लिए रेडियल ग्रेडिएंट का उपयोग
करने का एक
सफल प्रयास नहीं था। अब तक, इस तरह की तकनीक का व्यापक उपयोग ब्राउज़रों के पिछड़ेपन से बाधित है - ग्रेडिएंट काम करने के लिए, आपको एक ही कोड के पहाड़ों को विभिन्न उपसर्गों के साथ ढेर करना होगा, और संस्करण 10 के तहत IE का समर्थन करने के लिए,
DXImageTransform.Microsoft.gradient() का सामान्य रूप से उपयोग करें।
फिर भी, यदि आप "सिकाडर्स" के साथ प्रयोग करना चाहते हैं, तो यहां कुछ उपयोगी लिंक दिए गए हैं: