सीएसएस और यूज़र इंटरफ़ेस (यूआई)
अपनी साइट के सीएसएस और यूज़र इंटरफ़ेस के डिज़ाइन को बेहतर बनाने के लिए, Chrome के टूल और तकनीकों के बारे में जानें.
अपने यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट स्किल को बेहतर बनाएं
स्क्रोलबार स्टाइलिंग
स्क्रोलबार को स्टाइल देने के लिए,
scrollbar-width
और scrollbar-color
प्रॉपर्टी का इस्तेमाल करें.
सीएसएस टेक्स्ट-रैप बैलेंस
सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए लाइन ब्रेक लिखने की एक क्लासिक टाइपोग्राफ़ी तकनीक का इस्तेमाल किया जाता है.
हाई-डेफ़िनिशन सीएसएस कलर गाइड
CSS Color 4 वेब पर कई तरह के गैमट कलर टूल और सुविधाओं के साथ काम करता है: ज़्यादा कलर, बदलाव करने वाले फ़ंक्शन, और बेहतर ग्रेडिएंट.
सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल
सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल (टाइप किया गया OM) सीएसएस वैल्यू के साथ काम करने के लिए टाइप, तरीके, और सुविधाजनक ऑब्जेक्ट मॉडल को उपलब्ध कराता है.
स्टाइल क्वेरी का इस्तेमाल शुरू करना
@कंटेनर नियम का इस्तेमाल करके, पैरंट एलिमेंट के स्टाइल वैल्यू के लिए क्वेरी करें.
सीएसएस नेस्टिंग
हमारी पसंदीदा सीएसएस प्रीप्रोसेसर सुविधाओं में से एक अब भाषा में बनाई गई है: नेस्टिंग स्टाइल रूल.
सीएसएस @scope
ऐसे स्कोप वाली स्टाइल बनाने का तरीका जानें जो सिर्फ़ आपके डीओएम के सबट्री में एलिमेंट चुनते हैं.
सीएसएस कलर-मिक्स()
इस्तेमाल किए जा सकने वाले किसी भी कलर स्पेस में, सीधे अपने सीएसएस से मिक्स कलर करें.
nth-child() चुनने पर ज़्यादा कंट्रोल
किसी चाइल्ड एलिमेंट पर An+B लॉजिक लागू करने से पहले, उसके सेट को पहले से फ़िल्टर करें.
एक्सलूसिव अकॉर्डियन
एक जैसे
name
वाले कई <details>
एलिमेंट के साथ कोई खास अकॉर्डियन बनाएं.
पेश है Inert
इनर्ट प्रॉपर्टी, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. यह किसी एलिमेंट के लिए उपयोगकर्ता के इनपुट इवेंट को हटाने और वापस लाने का तरीका आसान बनाता है. इसमें सहायक टेक्नोलॉजी के इवेंट और फ़ोकस इवेंट शामिल हैं.
सीएसएस टेक्स्ट-रैप प्रिटी
तेज़ी से खूबसूरती बढ़ाने के लिए, ऑप्टिमाइज़ किए गए टेक्स्ट रैपिंग के लिए ऑप्ट-इन करें.
DevTools में सीएसएस ग्रिड
हमने DevTools में सीएसएस ग्रिड टूल की सुविधा को कैसे डिज़ाइन और लागू किया है.
DevTools में CSS-in-JS की सहायता
हम DevTools में CSS-in-JS के साथ कैसे काम करते हैं और यह सामान्य सीएसएस से किस तरह अलग है.
शैडो डीओएम
एलान वाला शैडो डीओएम
सीधे एचटीएमएल में शैडो DOM को लागू और इस्तेमाल करने का नया तरीका.
लेखक के तय किए गए सीएसएस नाम और शैडो डीओएम
लेखक के तय किए गए नामों और शैडो डीओएम की इंटरऑपरेबिलिटी मौजूदा स्थिति.
लेआउट
कैल्क() इस्तेमाल करने का तरीका
साइज़ बताने वाली इकाइयों को मिला-जुलाकर इस्तेमाल करके, सीएसएस में साइज़ तय करें.
सीएसएस पोज़िशन स्टिकी के लिए इवेंट
मैसेज लॉग करें और JavaScript चलाएं.
छोटे किए गए कॉन्टेंट को ऐक्सेस करने लायक बनाएं
'छिपाया गया=में-मिला' को खोजें, एट्रिब्यूट की वैल्यू से यह पक्का किया जा सकता है कि अकॉर्डियन सेक्शन में कॉन्टेंट ढूंढा जा सकता है और उससे लिंक किया जा सकता है.
सीएसएस और यूज़र इंटरफ़ेस (यूआई) की केस स्टडी
वेब यूज़र इंटरफ़ेस (यूआई) की सुविधाएं आपकी वेबसाइट के लिए क्यों अहम हैं?
वेब यूआई की क्षमताएं क्या हैं और वे आपके कन्वर्ज़न फ़नल को कैसे बेहतर बना सकती हैं? इन सुविधाओं को अपनाने के क्या फ़ायदे हैं.
स्क्रोल-ड्रिवन ऐनिमेशन की केस स्टडी
पारदर्शिता बाज़ार, RedBus, और Tokopedia के साथ स्क्रोल करके चलने वाले ऐनिमेशन के फ़ायदों के बारे में जानें.
ट्रांज़िशन की केस स्टडी देखें
RedBus, Policybaza, और Tokopedia जैसे ऐप्लिकेशन, View ट्रांज़िशन एपीआई का इस्तेमाल करते हैं. इससे उन्हें बेहतर परफ़ॉर्मेंस और बेहतर यूज़र इंटरफ़ेस (यूआई) का फ़ायदा मिलता है.
पॉपओवर एपीआई की केस स्टडी
Tokopedia अपने ऐप्लिकेशन में कोड की मात्रा कम करने के लिए, Popover API का इस्तेमाल करता है.
वेब पर ऐनिमेशन
Web ऐनिमेशन एपीआई
Web Animations API, JavaScript से मिलने वाले ज़रूरी ऐनिमेशन की जानकारी देने के लिए दमदार प्रिमिटिव देता है.
कई ऐनिमेशन इफ़ेक्ट
ऐनिमेशन-कंपोज़िशन प्रॉपर्टी की मदद से यह कंट्रोल किया जा सकता है कि जब एक ही प्रॉपर्टी पर कई ऐनिमेशन एक साथ प्रभावित हों, तब क्या होना चाहिए.
लीनियर() के साथ कॉम्प्लेक्स ऐनिमेशन कर्व
लीनियर() एक सीएसएस ईज़िंग फ़ंक्शन है, जो अपने पॉइंट के बीच लीनियर इंटरपोलेट करता है. इसकी मदद से, बाउंस और स्प्रिंग इफ़ेक्ट को फिर से बनाया जा सकता है.
स्क्रोल करके चलने वाले ऐनिमेशन
स्क्रोल करने की टाइमलाइन और व्यू टाइमलाइन के साथ काम करके, एलान वाले तरीके से स्क्रोल करके चलने वाले ऐनिमेशन बनाएं.
कोर्स
रिस्पॉन्सिव डिज़ाइन सीखें
रिस्पॉन्सिव डिज़ाइन के बारे में पुरानी जानकारी पढ़ें और रिस्पॉन्सिव लेआउट बनाने से जुड़ी बुनियादी बातों को जानें. आपको रिस्पॉन्सिव इमेज, टाइपोग्राफ़ी, सुलभता वगैरह के बारे में पता चलेगा.
कोर्स
सीएसएस के बारे में जानें
इससे आपको बॉक्स मॉडल, कैस्केड, और खासियत, फ़्लेक्सबॉक्स, ग्रिड, और z-इंडेक्स जैसी सीएसएस की बुनियादी बातों के बारे में पता चलेगा. साथ ही, आपको फ़ंक्शन, लॉजिकल प्रॉपर्टी वगैरह के बारे में भी पता चलेगा, ताकि आप अपने फ़्रंट-एंड डेवलपर के कौशल को बेहतर बना सकें.