css 3D Card, html css, html css tutorial for beginners, html css full course

@# Create a 3D Card with HTML and CSS #@

Creating a 3D Card using HTML and CSS is a great way. Here's a step-by-step guide on how to make a 3D Card.

HTML Code

<div class="parent"> <div class="card"> <div class="content-box"> <span class="card-title">3D Card</span> <p class="card-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <span class="see-more">See More</span> </div> <div class="date-box"> <span class="month">JUNE</span> <span class="date">29</span> </div> </div> </div>

यह HTML कोड एक 3D कार्ड संरचना बनाता है। आइए इसे विस्तार से समझें::

संरचना का वर्णन:

div class="parent":
यह सबसे बाहरी div टैग है जो कार्ड के लिए कंटेनर के रूप में कार्य करता है। इस div को एक parent क्लास दी गई है जो इसे CSS के माध्यम से स्टाइल करने में मदद करती है।

div class="card":
यह div वास्तव में कार्ड को परिभाषित करता है। इसमें सभी कंटेंट और स्टाइलिंग शामिल होती है। इसे card क्लास दी गई है जिससे इस पर CSS स्टाइल लागू किया जा सके।

div class="content-box":
यह div कार्ड की सामग्री को पकड़ने के लिए है। इसे content-box क्लास दी गई है जिससे इसकी स्टाइलिंग निर्धारित होती है।

span class="card-title":
यह span टैग कार्ड का शीर्षक प्रदर्शित करता है। इसे card-title क्लास दी गई है जिससे इसका आकार, रंग और 3D प्रभाव निर्धारित होता है।

p class="card-content":
यह p टैग कार्ड की मुख्य सामग्री या विवरण दिखाता है। इसे card-content क्लास दी गई है जिससे इसका आकार, रंग और 3D प्रभाव नियंत्रित होता है।

span class="see-more":
यह span टैग "See More" बटन प्रदर्शित करता है। इसे see-more क्लास दी गई है जिससे इसकी शैली और होवर प्रभाव नियंत्रित होते हैं।

div class="date-box":
यह div तारीख को प्रदर्शित करने के लिए है। इसे date-box क्लास दी गई है जिससे इसकी शैली, आकार और 3D प्रभाव निर्धारित होते हैं।

span class="month" और span class="date":
ये span टैग क्रमशः महीने और तारीख को प्रदर्शित करते हैं। इन्हें month और date क्लास दी गई हैं जिससे इनके आकार, रंग और शैली निर्धारित होते हैं।

यह कोड एक सुंदर 3D कार्ड बनाता है जिसमें शीर्षक, विवरण, एक "See More" बटन, और एक तारीख बॉक्स शामिल होता है। CSS के माध्यम से 3D प्रभाव और अन्य शैलीगत गुण जोड़े गए हैं।

CSS Code

.parent { width: 250px; padding: 20px; perspective: 1000px; } .card { padding-top: 50px; /* border-radius: 10px; */ border: 3px solid rgb(255, 255, 255); transform-style: preserve-3d; background: linear-gradient(135deg,#0000 18.75%,#f3f3f3 0 31.25%,#0000 0), repeating-linear-gradient(45deg,#f3f3f3 -6.25% 6.25%,#ffffff 0 18.75%); background-size: 60px 60px; background-position: 0 0, 0 0; background-color: #f0f0f0; width: 100%; box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px; transition: all 0.5s ease-in-out; } .card:hover { background-position: -100px 100px, -100px 100px; transform: rotate3d(0.5, 1, 0, 30deg); } .content-box { background: rgba(4, 193, 250, 0.732); /* border-radius: 10px 100px 10px 10px; */ transition: all 0.5s ease-in-out; padding: 60px 25px 25px 25px; transform-style: preserve-3d; } .content-box .card-title { display: inline-block; color: white; font-size: 25px; font-weight: 900; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 50px); } .content-box .card-title:hover { transform: translate3d(0px, 0px, 60px); } .content-box .card-content { margin-top: 10px; font-size: 12px; font-weight: 700; color: #f2f2f2; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 30px); } .content-box .card-content:hover { transform: translate3d(0px, 0px, 60px); } .content-box .see-more { cursor: pointer; margin-top: 1rem; display: inline-block; font-weight: 900; font-size: 9px; text-transform: uppercase; color: rgb(7, 185, 255); /* border-radius: 5px; */ background: white; padding: 0.5rem 0.7rem; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 20px); } .content-box .see-more:hover { transform: translate3d(0px, 0px, 60px); } .date-box { position: absolute; top: 30px; right: 30px; height: 60px; width: 60px; background: white; border: 1px solid rgb(7, 185, 255); /* border-radius: 10px; */ padding: 10px; transform: translate3d(0px, 0px, 80px); box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px; } .date-box span { display: block; text-align: center; } .date-box .month { color: rgb(4, 193, 250); font-size: 9px; font-weight: 700; } .date-box .date { font-size: 20px; font-weight: 900; color: rgb(4, 193, 250); }

यह CSS कोड एक 3D प्रभाव वाली कार्ड शैली बनाता है। आइए इसे विस्तार से समझें:

इस CSS कोड में .parent क्लास परिप्रेक्ष्य जोड़ती है, जो कार्ड को 3D इफेक्ट देने के लिए आवश्यक है।

.card क्लास कार्ड की संरचना और शैली को परिभाषित करती है, जिसमें बैकग्राउंड, बॉर्डर, बॉक्स शैडो और ट्रांज़िशन इफेक्ट शामिल हैं।

.content-box, .card-title, .card-content, .see-more, और .date-box कार्ड के अंदरूनी हिस्सों की शैली और ट्रांज़िशन इफेक्ट को नियंत्रित करते हैं।

JS Code

Output

Youtube whatsapp Facebook