CSS कस्टम प्रॉपर्टी वाला कार्ड घटक
आसान थीमिंग के लिए पूरी तरह CSS कस्टम प्रॉपर्टी से संचालित लचीला कार्ड घटक बनाएँ।
CSS कस्टम प्रॉपर्टी वाला कार्ड घटक, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
डिज़ाइन लक्ष्य
कार्ड घटक सामग्री के लिए एक स्व-निहित कंटेनर होता है। डिज़ाइन लक्ष्य हैं: स्पेसिंग टोकन का उपयोग करके सुसंगत पैडिंग, उपनाम टोकन का उपयोग करके थीम के अनुसार बदलने वाले रंग, JS के बिना प्रतिक्रियाशील आकार और CSS कस्टम प्रॉपर्टीज़ के माध्यम से वैरिएंट समर्थन (उभरा हुआ, आउटलाइन वाला, सपाट)।
बेस कार्ड संरचना
कॉन्फ़िगर किए जा सकने वाले मानों के लिए CSS कस्टम प्रॉपर्टीज़ वाली एकल .card क्लास का उपयोग करें। आंतरिक तत्व (शीर्षलेख, मुख्य भाग, पादलेख) कार्ड के दायरे से मान विरासत में लेते हैं। इससे पूरे कोडबेस में कार्ड इंस्टेंस के बीच शैली में होने वाला विचलन सीमित रहता है।
<div class="card">
<h3>Card Title</h3>
<p>Card content styled via custom properties.</p>
</div>
वैरिएंट क्लासें
अलग-अलग नियम-समुच्चय लिखने के बजाय वैरिएंट क्लासों के साथ कार्ड-स्तरीय कस्टम प्रॉपर्टीज़ को ओवरराइड करें। वैरिएंट क्लासों को केवल बदले गए चरों को फिर से परिभाषित करना होता है—अपरिवर्तित प्रॉपर्टीज़ बिना दोहराव के बेस मानों को स्वचालित रूप से विरासत में लेती हैं।
<div class="card card--elevated">
<p>Elevated variant</p>
</div>
<div class="card card--outlined">
<p>Outlined variant</p>
</div>
कार्ड में थीम लागू करना
जब कोई पैरेंट थीम क्लास --color-surface को बदलती है, तो उस थीम के अंदर मौजूद सभी कार्ड अपनी पृष्ठभूमि अपने-आप अपडेट कर लेते हैं। कार्ड-विशिष्ट थीम ओवरराइड कोड की आवश्यकता नहीं होती—उपनाम टोकन प्रणाली इसे पारदर्शी ढंग से संभालती है।
अनुकूली कार्ड की आंतरिक रिक्ति
तरल आंतरिक रिक्ति के लिए कस्टम गुणों के ओवरराइड के साथ सीमा-निर्धारक फ़ंक्शन का उपयोग करें: --card-padding: clamp(1rem, 4vw, 2rem)। बड़े व्यूपोर्ट में अधिक उदार आंतरिक रिक्ति मिलेगी; छोटे व्यूपोर्ट में न्यूनतम आंतरिक रिक्ति मिलेगी—यह सब एक ही टोकन परिभाषा से नियंत्रित होगा।
कार्ड ग्रिड विन्यास
स्वचालित भराई और न्यूनतम-अधिकतम मानों वाला CSS Grid एक स्वयं-संगठित विन्यास बनाता है: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))। कार्ड उपलब्ध स्थान भरते हैं और माध्यम-क्वेरी विराम-बिंदुओं के बिना अपने-आप अगली पंक्ति में आ जाते हैं।
छवि का आस्पेक्ट अनुपात
छवि कंटेनर पर aspect-ratio: 16/9 लगाकर कार्ड की छवियों का एकसमान आस्पेक्ट अनुपात बनाए रखें। छवियाँ object-fit: cover के साथ कंटेनर को भरती हैं, जिससे स्रोत छवि के आयामों की परवाह किए बिना कार्ड की ऊँचाई एकसमान रहती है।
अंतःक्रियात्मक अवस्थाएँ
माउस ले जाने और अंदर फ़ोकस होने की अवस्थाएँ जोड़ें, जो कार्ड को थोड़ा ऊपर उठाएँ: transform: translateY(-2px) और बढ़ी हुई box-shadow। इसे रूपांतरण और छाया पर 200ms के सहज संक्रमण के साथ ऐनिमेट करें, ताकि अंतःक्रिया का सहज और कंपोज़िटर-अनुकूल दृश्य संकेत मिले।
सुलभ कार्ड लिंक
विस्तारित लिंक से पूरे कार्ड को क्लिक करने योग्य बनाएँ: कार्ड की स्थिति को सापेक्ष रखें और मुख्य लिंक की स्थिति को inset: 0 के साथ निरपेक्ष करें। स्क्रीन रीडर लिंक का पाठ पढ़ते हैं; माउस उपयोगकर्ताओं के लिए ऊपरी परत कार्ड को दृश्य रूप से ढक लेती है।
लोड होने की अवस्था
एक .card--loading रूपांतर जोड़ें, जो सामग्री की जगह CSS ऐनिमेशन से बना स्केलेटन चमक प्रभाव दिखाए: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) को background-size: 200% और animation: shimmer 1.5s infinite के साथ ऐनिमेट करें।
गहरे मोड का कार्ड
गहरे मोड में --color-surface टोकन अपने-आप हल्के से गहरे रंग में बदल जाता है। यदि उभरे हुए कार्ड गहराई दिखाने के लिए box-shadow पर निर्भर करते हैं, जो गहरे बैकग्राउंड पर दिखाई नहीं देता, तो गहरे मोड में उभार का आभास देने के लिए हल्की बॉर्डर जोड़ें या सतह के रंग का कंट्रास्ट बढ़ाएँ।
ज्ञान जाँच
CSS कस्टम गुण पूरे नियम-समुच्चय की प्रतिलिपि बनाए बिना कार्ड के रूपांतर कैसे सक्षम करते हैं?
सारांश
CSS कस्टम गुणों से कार्ड घटक बनाने पर एक लचीला, थीम के अनुसार ढलने वाला और रूपांतर-सक्षम UI आधारभूत घटक मिलता है। आधार चर डिफ़ॉल्ट मान तय करते हैं; रूपांतर वर्ग चुनिंदा मानों को ओवरराइड करते हैं; थीम वर्ग वैश्विक रूप से ओवरराइड करते हैं। अनुकूली आकार, सुलभ लिंक और लोड होने की अवस्थाओं के साथ यह प्रतिरूप विभिन्न डिज़ाइन प्रणालियों में आसानी से विस्तार पाता है।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “CSS कस्टम प्रॉपर्टी वाला कार्ड घटक” पाठ निःशुल्क है?
हाँ—“CSS कस्टम प्रॉपर्टी वाला कार्ड घटक” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“CSS कस्टम प्रॉपर्टी वाला कार्ड घटक” में मैं क्या सीखूँगा?
आसान थीमिंग के लिए पूरी तरह CSS कस्टम प्रॉपर्टी से संचालित लचीला कार्ड घटक बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“CSS कस्टम प्रॉपर्टी वाला कार्ड घटक” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- CSS कस्टम प्रॉपर्टी वाला कार्ड घटक
- मोडल और संवाद की स्टाइलिंग
- ड्रॉपडाउन और पॉपओवर पैटर्न
- :checked तकनीक बनाम JS वाला टैब घटक