मुखपृष्ठ > प्रोग्रामिंग > आधुनिक सीएसएस के साथ रिस्पॉन्सिव, समान ऊंचाई वाले कार्ड बनाना (फ्लेक्सबॉक्स का जादू और कोई मीडिया क्वेरी नहीं)
ब्राउज़ करें:701
परिचय
हमारा उद्देश्य क्या है?
सिमेंटिक HTML5 का उपयोग करके संरचना का निर्माण
आधुनिक सीएसएस का उपयोग करके शैली जोड़ना
- सीएसएस को रीसेट करना
- फ्लेक्सबॉक्स के साथ कार्ड लेआउट डिजाइन करना
- कार्ड छवि को स्टाइल करना
- कार्ड सामग्री को स्टाइल करना
- कार्ड बटन को स्टाइल करना
- होवर ट्रांज़िशन जोड़ना
- सीएसएस वेरिएबल्स का उपयोग करना
निष्कर्ष
वेब डेवलपर्स के रूप में, हमें अक्सर कार्ड घटक बनाने की आवश्यकता का सामना करना पड़ता है। चाहे वह उत्पाद/प्रोजेक्ट शोकेस, उपयोगकर्ता प्रोफ़ाइल, या ब्लॉग पोस्ट के लिए हो, कार्ड हर जगह हैं।
अतीत में, रिस्पॉन्सिव लेआउट बनाना एक चुनौती थी। आधुनिक सीएसएस तकनीकों, विशेष रूप से सीएसएस फ्लेक्सबॉक्स के आगमन के कारण इन डिज़ाइनों का निर्माण काफी सरल और अधिक सहज हो गया है।
फ्लेक्सबॉक्स प्रतिक्रियाशील लेआउट बनाने की प्रक्रिया को सरल बनाता है। हम जटिल मीडिया प्रश्नों का उपयोग किए बिना कंटेनर में वस्तुओं को आसानी से व्यवस्थित, संरेखित और स्थान दे सकते हैं। इसका मतलब है कि हम ऐसे लेआउट बना सकते हैं जो सटीक ब्रेकप्वाइंट निर्दिष्ट किए बिना विभिन्न स्क्रीन आकारों और ओरिएंटेशन के लिए खूबसूरती से अनुकूलित होते हैं।
उद्देश्य सीएसएस फ्लेक्सबॉक्स का उपयोग करके ब्रेकप्वाइंट पर भरोसा किए बिना समान ऊंचाई के उत्तरदायी कार्ड बनाना है। हम यह सुनिश्चित करेंगे कि प्रत्येक कार्ड सामग्री की लंबाई की परवाह किए बिना समान ऊंचाई बनाए रखे, विभिन्न स्क्रीन आकारों के लिए सहजता से अनुकूलित हो।
लेआउट के लिए प्रमुख सीएसएस गुण:
आइए अब कार्ड बनाकर सीएसएस फ्लेक्सबॉक्स के जादू का पता लगाएं!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
शीर्ष पर जाना
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3
