जानें कि इस आकर्षक घटक को कैसे तैयार किया जाए, और अपने वेब डिज़ाइन में पेशेवर स्पर्श जोड़ने के लिए इसका उपयोग करें।

हालांकि कार्ड घटक सरल दिख सकते हैं, उन्हें बनाते समय विचार करने के लिए विशिष्ट मानदंड हैं। आरंभ करने के लिए आपको विभिन्न प्रकार के कार्ड घटकों का सामना करना पड़ेगा और एक वेब डेवलपर के रूप में, आपको यह सुनिश्चित करना होगा कि आपका इंटरफ़ेस पहुंच योग्य है।

एचटीएमएल और सीएसएस का उपयोग करके कार्ड घटकों का निर्माण कैसे करें और पहुंच संबंधी विचारों और अनुकूलन के बारे में जानें।

कार्ड घटकों के लिए HTML संरचना

कार्ड की संरचना में कार्ड कंटेनर, उसका हेडर, छवि और बॉडी और एक वैकल्पिक कार्ड फ़ुटर शामिल होता है।

आप तीन सरल कार्ड घटक बनाएंगे: सामग्री, उत्पाद और प्रोफ़ाइल कार्ड। ये वेब पर पाए जाने वाले कुछ सबसे सामान्य कार्ड प्रकार हैं।

एक कंटेनर डिव बनाकर शुरुआत करें, इसमें प्रत्येक कार्ड के लिए क्लास विशेषताओं के साथ तीन और डिव टैग्स को नेस्ट करें, साथ ही तीनों कार्डों में से प्रत्येक के लिए उपयुक्त चाइल्ड एलिमेंट्स भी रखें। आपको ऐसे तत्वों का उपयोग करना चाहिए जो कार्ड की संरचना के सभी भागों को ध्यान में रखते हों। उदाहरण के लिए, सामग्री कार्ड में मीडिया के लिए एक छवि टैग, शीर्षक के लिए एक h3 टैग और पाठ के लिए एक एपी टैग है।

instagram viewer 

<डिवकक्षा="कार्ड-कंटेनर">
 सामग्री कार्ड 
<डिवकक्षा="सामग्री-कार्ड">
<आईएमजीस्रोत=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"वैकल्पिक="कीबोर्ड नोटबुक, कॉफी का कप और एक इयरपीस के साथ एक कार्यस्थल">
<h3>शीर्षकh3>
<पी>लोरेम इप्सम डोलर सिट अमेट कंसेक्टेचर एडिपिसिसिंग एलीट। विज्ञापन
 एक्सेप्टुरी एक्सप्लिकाबो मोलेस्टिए नेटस मैग्नम रेम...पी>
<एhref="#">और पढ़ेंए>
डिव>
 उत्पाद कार्ड 
<डिवकक्षा="उत्पाद-कार्ड">
<आईएमजीस्रोत=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"वैकल्पिक="पीले रंग की पृष्ठभूमि पर हेडफ़ोन">
<h3>प्रोडक्ट का नामh3>
<पी>$19.99पी>
<पी>लोरेम इप्सम डोलर सिट अमेट कंसेक्टेचर एडिपिसिसिंग एलीट।
 एस्परनेचर, वोलुप्टैटिबस।पी>
<एhref="#"><बटन>कार्ट में जोड़ेंबटन>ए>
डिव>
 प्रोफ़ाइल कार्ड 
<डिवकक्षा="प्रोफ़ाइल-कार्ड">
<आईएमजीस्रोत=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"वैकल्पिक="एक श्वेत पुरुष ने काले बटन वाली शर्ट पहनी हुई है">
<h3>जॉन डोh3>
<पी>वेब डेवलपरपी>
<पी>लोरेम इप्सम डोलर सिट अमेट कंसेक्टेचर एडिपिसिसिंग एलीट।
 एक्सपेडिटा टेम्पोरा ईओएस मोलेस्टियास रिपेलैट?पी>
<एhref="#"कक्षा="प्रोफ़ाइल-लिंक">प्रोफ़ाइल देखेंए>
डिव>
डिव>

कोई भी कस्टम स्टाइल लागू करने से पहले, डिफ़ॉल्ट रूप से, यह आपके ब्राउज़र में कैसा दिखना चाहिए:

यदि आप अधिक कार्ड बनाना चाहते हैं या एक ही कार्ड में अधिक सामग्री शामिल करना चाहते हैं, तो जारी रखने से पहले ऐसा करें।

कार्ड घटकों के लिए सीएसएस स्टाइलिंग

सीएसएस का उपयोग करके, आप प्रत्येक कार्ड को देखने में आकर्षक बनाने के लिए उसे व्यक्तिगत रूप से स्टाइल कर सकते हैं। सार्वभौमिक चयनकर्ता का प्रयोग करें रीसेट करना मार्जिन, गद्दी, और स्थिति का उपयोग कर बॉक्स आकार. फिर कुछ जगह बनाने के लिए कंटेनर को पैडिंग देकर स्टाइल करें।

​​​​​​* {
अंतर: 0;
गद्दी: 0;
बॉक्स आकार: बॉर्डर-बॉक्स;
}
.कार्ड-कंटेनर {
गद्दी: 20पिक्सल;
}

इसके बाद, सभी कार्डों के लिए एक बहु चयनकर्ता का उपयोग करें, प्रत्येक कार्ड के चारों ओर जगह प्रदान करने के लिए इसे एक मार्जिन दें और सेट करें दिखाना और फ्लेक्स-दिशा लेआउट के लिए. इसके अलावा, कार्ड को परिभाषित करने के लिए बॉर्डर, कुछ वक्रों के लिए बॉर्डर-त्रिज्या और प्रतिक्रिया के लिए अधिकतम-चौड़ाई सेट करें।

.सामग्री-कार्ड,
.उत्पाद-कार्ड,
.प्रोफ़ाइल-कार्ड {
अंतर: 20पिक्सल;
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
सीमा: 2पिक्सलठोस#सीसीसी;
बॉर्डर-त्रिज्या: 7पिक्सल;
अधिकतम चौड़ाई: 250पिक्सल;
}

अब सामग्री कार्ड से शुरू करते हुए प्रत्येक कार्ड पर ध्यान केंद्रित करें और इसे पृष्ठभूमि रंग और पैडिंग दें। सामग्री कार्ड में तत्वों के लिए वंशज चयनकर्ता जोड़ें।

छवि को स्टाइल करें अधिकतम चौड़ाई और सीमा-त्रिज्या. h3 के लिए मार्जिन, फ़ॉन्ट-फ़ैमिली और फ़ॉन्ट आकार सेट करें। एंकर टैग के लिए, टेक्स्ट सजावट हटाएं, और रंग, मार्जिन-टॉप और फ़ॉन्ट आकार सेट करें।

.सामग्री-कार्ड {
पृष्ठभूमि: #ई9724सी;
गद्दी: 10पिक्सल;
}
.सामग्री-कार्डआईएमजी {
अधिकतम चौड़ाई: 100%;
बॉर्डर-त्रिज्या: 5पिक्सल;
}


.सामग्री-कार्डh3 {
अंतर: 10पिक्सल 0;
फुहारा परिवार: एकलस्पेस;
फ़ॉन्ट आकार: 1.5रेम;
}
.सामग्री-कार्डए {
text-decoration: कोई नहीं;
रंग: #6f2ed8;
अंतर:12px 0 7पिक्सल 0;
फ़ॉन्ट आकार: 1रेम;
}

उत्पाद कार्ड को अपने अतिरिक्त तत्वों के कारण अधिक शैली की आवश्यकता होगी। प्रत्येक चाइल्ड तत्व के लिए चयनकर्ता बनाएं और उन्हें तदनुसार स्टाइल करें।

बटन कॉल-टू-एक्शन प्रभाव को प्राप्त करने के लिए तत्व में सबसे अधिक शैली विशेषताएँ शामिल हैं। एंकर चयनकर्ता में एलाइन-सेल्फ को फ्लेक्स-एंड पर सेट करके केवल बटन को दाईं ओर संरेखित करें।

.उत्पाद-कार्डआईएमजी {
बॉर्डर-त्रिज्या: 5पिक्सल 5पिक्सल 0 0;
चौड़ाई: 100%;
}
.उत्पाद-कार्डh3 {
अंतर: 5पिक्सल 10पिक्सल;
फुहारा परिवार: एकलस्पेस;
फ़ॉन्ट आकार: 1.5रेम;
}


.उत्पाद-कार्डपी {
अंतर: 5पिक्सल 10पिक्सल;
फुहारा परिवार: जॉर्जिया, 'टाइम्सनयारोमन', टाइम्स, सेरिफ़;
}


.उत्पाद-कार्डए {
संरेखित-स्वयं: फ्लेक्स-एंड;
}
.उत्पाद-कार्डबटन {
चौड़ाई: 100पिक्सल;
ऊंचाई: 30पिक्सल;
अंतर: 10पिक्सल;
सीमा: 1पिक्सलठोस#8f3642;
बॉर्डर-त्रिज्या: 4पिक्सल;
पृष्ठभूमि का रंग: #FFC857;
फ़ॉन्ट वजन: 700;
कर्सर: सूचक;
}

अंत में, प्रोफ़ाइल कार्ड को स्टाइल करें। कंटेनर से मिलान करने के लिए छवि के ऊपर-दाएं और ऊपर-बाएं पर बॉर्डर त्रिज्या सेट करें। यदि आवश्यक हो तो छवि का आकार समायोजित करें और फ़िट करें। परिभाषा के लिए पाठ पर कम से कम दो फ़ॉन्ट प्रकार और पूरक रंगों का उपयोग करें। इसके अलावा, आप कार्रवाई योग्य तत्व बना सकते हैं - यानी। एंकर टैग—ए के साथ अलग दिखें सीमा.

.प्रोफ़ाइल-कार्डआईएमजी {
बॉर्डर-त्रिज्या: 5पिक्सल 5पिक्सल 0 0;
ऊंचाई: 200पिक्सल;
वस्तु-फिट: ढकना;
}
.प्रोफ़ाइल-कार्डh3 {
अंतर: 10पिक्सल;
फुहारा परिवार: एकलस्पेस;
फ़ॉन्ट आकार: 1.5रेम;
}


.प्रोफ़ाइल-कार्डपी:प्रथम प्रकार का {
अंतर:0px 10पिक्सल;
फुहारा परिवार: 'टाइम्सनयारोमन', टाइम्स, सेरिफ़;
रंग: नीले फूलों वाला जंगली पेड़ जैसा नीला रंग;
}


.प्रोफ़ाइल-कार्डपी:अंतिम-प्रकार {
अंतर: 5पिक्सल 10पिक्सल;
फ़ॉन्ट आकार: 0.9रेम;
}
.प्रोफ़ाइल-कार्डए {
text-decoration: कोई नहीं;
अंतर: 5पिक्सल 10पिक्सल 10पिक्सल 10पिक्सल;
गद्दी: 5पिक्सल 15पिक्सल;
संरेखित-स्वयं: केंद्र;
सीमा: 1पिक्सलठोसनीले फूलों वाला जंगली पेड़ जैसा नीला रंग;
बॉर्डर-त्रिज्या: 15पिक्सल;
रंग: काला;
फुहारा परिवार: एकलस्पेस;
फ़ॉन्ट वजन: 500;
}

स्टाइल करने के बाद, आपके कार्ड इस तरह दिखने चाहिए:

कार्ड लेआउट और लचीलापन

सभी डिवाइसों में इंटरफ़ेस के साथ एक सहज अनुभव प्रदान करने के लिए जवाबदेही महत्वपूर्ण है। तुम कर सकते हो या तो सीएसएस फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करें लेआउट के लिए. अंततः, आप कर सकते हैं प्रतिक्रिया के लिए मीडिया प्रश्नों का उपयोग करें.

सीएसएस फ्लेक्सबॉक्स का उपयोग करना

पहले तो, एक डिस्प्ले विशेषता जोड़ें और इसे फ्लेक्स पर सेट करें आपके कार्ड कंटेनर चयनकर्ता पर. फ्लेक्स-रैप लगाएं और इसे रैप करने के लिए सेट करें, ताकि कार्ड छोटे स्क्रीन आकार में रैप हो सकें।

इसके अलावा, सेट करें संरेखित-आइटम और औचित्य-सामग्री आपकी इच्छा के लिए गुण.

​​​​​​.कार्ड-कंटेनर {
गद्दी: 20पिक्सल;
दिखाना: मोड़ना;
फ्लेक्स-रैप: लपेटना;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: स्थान-समान रूप से;
}

पेज इस तरह दिखना चाहिए:

इससे बड़े स्क्रीन आकारों पर प्रतिक्रिया समाप्त हो जाती है। मोबाइल फ़ोन जैसे छोटे व्यूपोर्ट के लिए, आप मीडिया क्वेरी नियम का उपयोग कर सकते हैं और अधिकतम-चौड़ाई सेट कर सकते हैं।

मीडिया क्वेरी में, निर्धारित करें कि आप किन तत्वों को बदलना चाहते हैं। इस स्थिति में, कार्ड कंटेनर बदल जाएगा.

ठीक फ्लेक्स-दिशा को कॉलम, इसलिए कार्ड लंबवत रूप से ढेर हो जाते हैं। कार्ड को स्क्रीन के केंद्र में क्षैतिज रूप से प्रदर्शित करने के लिए, औचित्य-सामग्री और संरेखित-आइटम गुणों को केंद्र में सेट करें:

@मीडिया स्क्रीन और (अधिकतम चौड़ाई:480px गुणित) {
.कार्ड-कंटेनर {
फ्लेक्स-दिशा: कॉलम;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
 }
}

मीडिया क्वेरी प्रभाव देखने के लिए, कोड की जाँच करें कोडपेन.

सीएसएस ग्रिड का उपयोग करना

सबसे पहले, कार्ड कंटेनर के डिस्प्ले को ग्रिड पर सेट करें। उपयोग ग्रिड-टेम्पलेट-कॉलम कार्डों को अपनी चौड़ाई स्वचालित रूप से समायोजित करने की अनुमति देने के लिए। का उपयोग करो ग्रिड-अंतराल कार्डों के बीच अंतर के लिए. उपयोग औचित्य-आइटम कार्डों को केन्द्रित करने के लिए.

.कार्ड-कंटेनर {
गद्दी: 20पिक्सल;
दिखाना: जाल;
ग्रिड-टेम्पलेट-कॉलम: दोहराना(स्वत: फ़िट, न्यूनतम अधिकतम(300पिक्सल, 1फादर));
ग्रिड-अंतराल: 20पिक्सल;
औचित्य-आइटम: केंद्र;
}

पेज इस तरह दिखना चाहिए:

मोबाइल स्क्रीन के लिए, मीडिया क्वेरी लागू करें. क्वेरी के भीतर, छोटे व्यूपोर्ट के लिए ग्रिड लेआउट को संशोधित करें। तय करना ग्रिड-टेम्पलेट-कॉलम को 1फ्र प्रत्येक कार्ड को पूरी चौड़ाई पर कब्जा करने के लिए। साथ ही, सेटिंग औचित्य-आइटम और संरेखित-आइटम केंद्र में गुण कार्ड को क्षैतिज और लंबवत दोनों तरह से केंद्र में रखेंगे।

@मीडिया स्क्रीन और (अधिकतम चौड़ाई:480px गुणित) {
.कार्ड-कंटेनर {
ग्रिड-टेम्पलेट-कॉलम: 1फादर;
औचित्य-आइटम: केंद्र;
संरेखित-आइटम: केंद्र;
 }
}

द्वारा सीएसएस ग्रिड और मीडिया प्रश्नों का संयोजन, कार्ड बड़ी स्क्रीन पर रैप हो जाएंगे और छोटी स्क्रीन पर लंबवत रूप से ढेर हो जाएंगे, जिससे एक प्रतिक्रियाशील कार्ड लेआउट प्राप्त होगा। मीडिया क्वेरी प्रभाव देखने के लिए, कोड की जाँच करें कोडपेन.

कार्ड घटकों के लिए पहुंच संबंधी विचार

यह सुनिश्चित करना महत्वपूर्ण है कि आपके द्वारा बनाए गए कार्ड घटक विकलांग लोगों सहित सभी उपयोगकर्ताओं के लिए पहुंच योग्य हों। कार्ड घटकों को अधिक सुलभ बनाने के लिए यहां कुछ प्रमुख विचार दिए गए हैं:

  • सिमेंटिक HTML
  • कीबोर्ड नेविगेशन
  • फोकस शैलियाँ
  • ARIA लेबल और भूमिकाएँ
  • वैकल्पिक शब्द
  • उचित शीर्षक संरचना
  • रंग विरोधाभास

इन पहुंच संबंधी विचारों को लागू करके, वेब डेवलपर्स यह सुनिश्चित कर सकते हैं कि कार्ड घटक समावेशी हैं।

अनुकूलन और आगे की खोज

आप अपने कार्ड घटक को अनुकूलित करने के साथ आगे बढ़ सकते हैं। यहां कुछ विचार दिए गए हैं जिन पर आप गौर कर सकते हैं:

  • संक्रमण और एनिमेशन
  • छवि शैलियाँ
  • पृष्ठभूमि और रंग योजनाएं
  • सीमा शैलियाँ
  • इंटरैक्टिव तत्व

ऐसे कई अलग-अलग तरीके हैं जिनसे आप अपने कार्ड घटकों को अनुकूलित कर सकते हैं, इसलिए बेझिझक प्रयोग करें।

देखने में आकर्षक और प्रतिक्रियाशील कार्ड घटक बनाएं

कार्ड घटक लगभग किसी भी वेबसाइट में भूमिका निभा सकते हैं। HTML और CSS के साथ इसे तैयार करना आसान है, लेकिन पहुंच को कैसे संभालना है यह जानना भी महत्वपूर्ण है।

अन्य सीएसएस प्रभाव भी हैं जिन्हें आप आज़मा सकते हैं, जैसे दृश्य प्रभावों के लिए सीएसएस फ़िल्टर और ब्लेंड मोड। दृश्य अपील के लिए विभिन्न अनुकूलन के साथ और अधिक बनाने का अभ्यास करें।