CSS ग्रेडिएंट्स के बारे में कुछ लिंक

हर बार एक समय में, ब्लॉगिंग zeitgiest एक निश्चित विषय के इर्द-गिर्द जम जाता है और ऐसा लगता है कि मेरे बुकमार्क फ़ोल्डर में सहेजे गए लेख बातचीत कर रहे हैं। वहां अब जो बातचीत चल रही है वह सीएसएस ग्रेडिएंट्स के बारे में है और मैंने सोचा कि मैं कुछ और दिलचस्प टुकड़े जोड़ूंगा।

• दिन 22: शंक्वाकार ढाल - मैनुअल माटुज़ोविक ने आधुनिक सीएसएस के बारे में अपनी 21-दिवसीय श्रृंखला के 100वें दिन कोनिक ग्रेडिएंट्स को देखा, जो रंग, कोण, प्लेसमेंट और रंग स्टॉप पर एक अच्छा उच्च-स्तरीय रूप प्रदान करता है। तब से दिन 22, वह इसका उपयोग करता है ::backdrop छद्म तत्व। (वैसे, ट्विटर अप्रत्याशित रूप से उसका अकाउंट सस्पेंड कर दिया - अगर हम कर सकते हैं तो उस जहाज की मदद करें।)
• क्या आप वास्तव में CSS रेडियल-ग्रेडिएंट्स को समझते हैं? - पैट्रिक ब्रोसेट मैंने यहां मार्गदर्शन-योग्य काम किया है और मैं ईमानदारी से अभी भी इसके माध्यम से अपना काम कर रहा हूं। लेकिन मैं पहले से ही उनकी स्पष्ट व्याख्याओं और उन चीजों के डेमो की सराहना करता हूं जिन्हें मैं अभी भी भूल जाता हूं, जैसे कि रेडियल ग्रेडिएंट के आकार और आकार के लिए कीवर्ड। मैं इसे पहले से ही अपने आप में जोड़ रहा हूं सीएसएस ग्रेडिएंट गाइड!
• अत्यधिक अनुकूलन योग्य पृष्ठभूमि ग्रेडिएंट - अरे, रेडियल ग्रेडिएंट की बात करें तो, स्कॉट वंदेहेएकाधिक रंग स्टॉप वाले एक के लिए नुस्खा ने पिछले हफ्ते चक्कर लगाया। उनकी चुनौती एक ढाल पैटर्न बनाना था जो विभिन्न रंग भिन्नताओं का समर्थन कर सके, जो सामान्य रूप से सीएसएस कक्षाओं और रंग मूल्यों का एक गर्म गड़बड़ होगा यदि उपयोग करने के लिए नहीं तो प्रत्येक भिन्नता के लिए रंग मान कस्टम गुण. इस तरह, वह प्रत्येक रंग स्टॉप के लिए अलग-अलग रंगों और प्लेसमेंट मानों के लिए एक कस्टम प्रॉपर्टी असाइन कर सकता है, फिर संदर्भ के आधार पर मानों को अपडेट कर सकता है। और क्या अधिक है कि जिस तरह से कस्टम गुणों को जावास्क्रिप्ट के साथ अपडेट किया जा सकता है, स्कॉट को अनुमति दी गई है उसके ढाल पैटर्न को अनुकूलित करने के लिए एक उपकरण बनाएँ, जिसे पोस्ट के अंत में उदारतापूर्वक साझा किया गया है।
• सीएसएस हाल्टटोन पैटर्न - मिशेल बार्कर एना ट्यूडर के "हाफटोन" पैटर्न के विस्तृत टूटने के साथ। प्रभाव पुराने स्कूल समाचार पत्रों के बिंदीदार स्याही प्रिंट की तरह है। जबकि एना उपयोग करता है हूडिनी एनीमेशन और होवर प्रभावों के लिए, मिशेल विशेष रूप से हाफ़टोन प्रभाव को देखती है और यह कैसे एक रेडियल ग्रेडिएंट के साथ बनाया गया है। मैं विशेष रूप से उस तरीके से प्यार करता हूं जिस तरह से मिशेल दिखाता है कि डॉट्स के सीधे ग्रिड से एक तक कैसे जाना है जहां पैटर्न थोड़ा कंपित है। और यह देखने के लिए अंत तक चिपके रहें कि वह किस तरह से प्रभाव को विरामित करती है a mask-image जो एक लुप्त होती प्रभाव पैदा करने के लिए एक रैखिक ढाल का उपयोग करता है। मैं इस पैटर्न के साथ थोड़ा सा रफ़्ड था, भी, और किसी साफ-सुथरी चीज़ से घाव हो जाता है जो एक बहती स्याही ब्लॉट फ़िल्टर की तरह दिखता है।
• एक तेजतर्रार नेवबार समाधान - एरिक मेयर को एक मेनू के लिए एक दिलचस्प डिजाइन चुनौती दी गई थी जहां एक बिंदीदार रेखा "वर्तमान पृष्ठ" लिंक से निकलती है और सामग्री कंटेनर के बाएं किनारे के साथ एक बड़ी बिंदीदार सीमा का हिस्सा बन जाती है। एरिक हमेशा इसका एक बेहतरीन उदाहरण है फ्रंट-एंड डेवलपर की तरह कैसे सोचें, और वह इसे यहां करता है जब वह एक रेखीय ढाल का उपयोग करके वैकल्पिक मार्ग का वर्णन करता है जब उसने सेटिंग के मानक दृष्टिकोण के साथ एक रोड़ा मारा border-style: dotted तत्व पर।
• नकाबपोश ढाल धराशायी लाइनें - एरिक उस अंतिम लिंक के फॉलो-अप के साथ न केवल यह दर्शाता है कि कैसे उसने एक रेखापुंज छवि के डैश के लिए एक बाईं सीमा के डैश को जोड़ा, लेकिन कैसे उसकी दृढ़ डिजाइन आंख ने उसे निम्न संकल्प की नकल करने के लिए अपने समाधान को बदलने के लिए आश्वस्त किया। छवि के डैश a . के रूप में दो दोहराए जाने वाले रैखिक पृष्ठभूमि ग्रेडिएंट का उपयोग करते हुए mask-image पृष्ठभूमि ढाल पर। इतना नटखट और महान!