HTML और CSS के साथ अपनी वेबसाइट के लिए एक सरल, सुंदर UI कार्ड घटक डिज़ाइन करना सीखें। आप अपने कार्ड को बहुत गहरा किए बिना अपने टेक्स्ट को थोड़ा अतिरिक्त पॉप बनाने के लिए एक रैखिक-ढाल "ट्रिक" भी सीखेंगे।
UI कार्ड एक UI घटक है जो वेबसाइटों पर एक प्रकार के ऐपेटाइज़र के रूप में कार्य करता है। एक विशिष्ट यूआई कार्ड में टेक्स्ट, फोटोग्राफी, आइकन और एक या कई इंटरैक्टिव तत्व (जैसे बटन या लिंक) होते हैं।
UI कार्ड उतने ही सरल या जटिल हो सकते हैं जितने की आपको उनकी आवश्यकता है।
आज हम एक डेड-सिंपल यूआई कार्ड डिजाइन कर रहे हैं, यह एक:
इस यूआई कार्ड में एक लैंडस्केप की पृष्ठभूमि छवि, दो टेक्स्ट तत्व (शीर्षक और विवरण), और एक बड़ा क्लिक करने योग्य इंटरफ़ेस है:संपूर्ण कार्ड एक लिंक है।
आप बहुत सारे मुफ़्त पा सकते हैं Unsplash.com पर खूबसूरत लैंडस्केप तस्वीरें।
चरण 1:HTML
इस HTML को अपने दस्तावेज़ में जोड़ें (<body> . के अंदर तत्व):
<a class="card-link" href="#">
<div class="card">
<div class="card-overlay"></div>
<img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
<div class="card-text-container">
<div class="card-text-wrapper">
<h3 class="card-title">The North Sea of Denmark</h3>
<p class="card-description">
Explore the beautiful & dynamic North Sea of Denmark — where every day
is a new experience.
</p>
</div>
</div>
</div>
</a>ऊपर दिए गए HTML मार्कअप का महत्वपूर्ण हिस्सा यह है कि हम पूरे कार्ड को एक एंकर एलिमेंट के अंदर लपेट रहे हैं। हम इसे इस विशिष्ट कार्ड के लिए करते हैं क्योंकि हम चाहते हैं कि संपूर्ण उपयोगकर्ता इंटरफ़ेस एक बड़ा क्लिक करने योग्य लिंक हो।
एंकर लिंक को सही ब्लॉग पोस्ट से जोड़ने के लिए, लेख (जिस भी सामग्री से आप लिंक करना चाहते हैं) बस प्लेसहोल्डर विशेषता को बदलें (href="#" ) एक वास्तविक स्लग के साथ, उदाहरण के लिए href="/northern-sea-of-denmark" ।
चरण 2:CSS
सबसे पहले, मैं UI कार्ड उदाहरण के लिए उपयोग किया जाने वाला CSS प्रदान करूँगा, फिर मैं नीचे दिए गए कोड के सबसे महत्वपूर्ण भागों की व्याख्या करूँगा:
.card {
position: relative;
height: 350px;
max-width: 400px;
}
.card-thumbnail {
height: 100%;
max-width: 100%;
display: block;
object-fit: cover;
}
.card-text-container {
width: 100%;
position: absolute;
left: 0;
bottom: 10%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.card-text-wrapper {
padding-left: 1rem;
padding-right: 1rem;
max-width: 300px;
color: white;
}
.card-title {
font-size: 1.45rem;
margin-bottom: 0;
}
.card-description {
font-size: 1.15rem;
line-height: 1.4;
margin-top: 0.5rem;
}
.card-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
z-index: 1;
}CSS कैसे काम करता है:
.card:UI कार्ड को प्रतिक्रियाशील बनाने के लिए, इसे अधिकतम-चौड़ाई 400px प्राप्त होती है। यह कार्ड की चौड़ाई को गतिशील बनाता है। यह कभी भी 400px से अधिक चौड़ा नहीं होगा, हालांकि, यदि स्क्रीन की चौड़ाई 400px से कम है, तो यह स्वचालित रूप से कम हो जाएगी (संकीर्ण हो जाएगी)। कार्ड की ऊंचाई निश्चित है (height: 350px) और स्क्रीन आकार की परवाह किए बिना नहीं बदलेगा।.card-thumbnail:कार्ड के पक्षानुपात में परिवर्तन होने पर पृष्ठभूमि छवि के पक्षानुपात (खिंचाव) को खोने से बचने के लिए, हमobject-fit: coverका उपयोग करते हैं . इसे हटाने का प्रयास करें और देखें कि क्या होता है (अच्छा नहीं)।.card-text-container:यह सुनिश्चित करने के लिए कि टेक्स्ट एलिमेंट की स्थिति और रिक्ति (श्वेत स्थान) एक समान बनी रहे, यूआई कार्ड को किसी भी डिवाइस पर देखे जाने पर ध्यान दिए बिना, हमbottom: 10%का उपयोग करते हैं . चूंकि कार्ड की ऊंचाई निश्चित 350 पिक्सेल पर सेट है, जिससे कार्ड के नीचे से टेक्स्ट तत्वों की दूरी को 100% के करीब रखना आसान हो जाता है।z-index: 1;टेक्स्ट तत्वों को ओवरले के ऊपर रखता है।.card-text-wrapper:यह वर्ग दोनों पाठ तत्वों (शीर्षक और विवरण) की अधिकतम-चौड़ाई को नियंत्रित करता है। चूंकि हम कभी नहीं चाहते कि यह कार्ड की चौड़ाई से आगे बढ़े, इसलिए हम इसे300pxके मान पर सेट करते हैं , जो कार्ड की अधिकतम-चौड़ाई से 25% कम है (400px) हम इसे थोड़ा बाएँ और दाएँ पैडिंग भी देते हैं (1rem), इसलिए टेक्स्ट तत्वों और स्क्रीन की सीमाओं (छोटे उपकरणों पर महत्वपूर्ण) के बीच हमेशा थोड़ा सा अंतर होता है।.card-overlay:चूंकि हल्के बैकग्राउंड पर सफेद टेक्स्ट काम नहीं करता है, इसलिए हमें डार्क कंट्रास्ट की जरूरत है। हालाँकि, आप पूरी छवि को बहुत गहरा नहीं बनाना चाहते (फिर क्या बात है?) इसलिए, हम एकlinear-gradient. का उपयोग करते हैं छवि के शीर्ष आधे हिस्से में थोड़ा अंधेरा (जहां कोई पाठ नहीं है) के साथ एक हल्के से अंधेरे ओवरले बनाने के लिए कार्य करता है, लेकिन पाठ को पॉप बनाने के लिए निचले आधे हिस्से में पर्याप्त अंधेरा है।
टिप्स और उपाय
इस तरह के यूआई कार्ड पर, जहां फोटोग्राफी कहानी का एक बड़ा हिस्सा है, यह महत्वपूर्ण है कि कार्ड पर अत्यधिक भीड़ न हो (उदाहरण के लिए, अपने टेक्स्ट के आकार पर विचार करें)। यह मेरे दिमाग में था क्योंकि मैंने इसे CSS के साथ स्टाइल किया था। आपको हमेशा उस कार्ड के विशिष्ट संदर्भ पर विचार करना चाहिए जिसे आप डिजाइन कर रहे हैं।
इस ट्यूटोरियल की शैलियों को दिशानिर्देश के रूप में उपयोग करें, लेकिन UI कार्ड डिज़ाइन पर सख्त नियमों के रूप में नहीं। UI कार्ड डिज़ाइन पर कुछ सार्वभौमिक/उद्देश्य दिशानिर्देश नीचे दिए गए हैं:
- अंतराल महत्वपूर्ण है: सफेद जगह की कमी आपके डिजाइन को भीड़भाड़ और क्लॉस्ट्रोफोबिक बनाती है। आपके UI को सांस लेने . की आवश्यकता है जैसे आप करते हैं। जितना हो सके उतनी दूरी (पैडिंग, मार्जिन, लाइन ऊंचाई) का उपयोग करें (निश्चित रूप से निकटता के कानून को तोड़े बिना)।
- टाइपोग्राफी: कोई फर्क नहीं पड़ता कि आप अपने टेक्स्ट तत्वों (फ़ॉन्ट चयन, फ़ॉन्ट आकार, रेखा ऊंचाई, आदि) को कैसे प्रारूपित करते हैं, सुनिश्चित करें कि किसी भी स्क्रीन आकार पर टेक्स्ट को पढ़ना आसान है। फ़ॉन्ट आकार बढ़ाने (और अधिक स्थान लेने) के बजाय, अपने टेक्स्ट और पृष्ठभूमि के बीच रंग कंट्रास्ट बढ़ाने का प्रयास करें, जैसा कि हमने
.card-overlayके साथ किया था कक्षा। - आसानी से क्लिक करने योग्य इंटरफ़ेस: यदि आपके कार्ड के तत्वों को क्लिक किया जाना है, तो उन्हें इतना बड़ा करें कि कोई भी उन्हें आसानी से अपने माउस या अंगूठे से क्लिक या दबा सके।
इसके अलावा, यूआई कार्ड डिजाइन के कोई नियम नहीं हैं, केवल संदर्भ है।