HTML संरचना
<div class="card">
<div class="bg"></div>
<div class="blob"></div>
</div>
यह HTML एक कार्ड तत्व बनाता है जिसमें दो उप-तत्व हैं: .bg (बैकग्राउंड) और .blob (एक एनिमेटेड धुंधला गोला)।
CSS कोड की व्याख्या
1. .card क्लास
.card {
position: relative;
width: 200px;
height: 250px;
border-radius: 14px;
z-index: 1111;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
विश्लेषण:
- position: relative;: कार्ड को एक रिलेटिव पोजिशन देता है, जिससे इसके अंदर के तत्व (जैसे
.bgऔर.blob) इसकी स्थिति के सापेक्ष रखे जा सकें। - width: 200px; height: 250px;: कार्ड की चौड़ाई 200 पिक्सल और ऊंचाई 250 पिक्सल निर्धारित करता है।
- border-radius: 14px;: कार्ड के कोनों को गोल करता है, जिससे यह 14 पिक्सल की त्रिज्या के साथ गोलाकार दिखता है।
- z-index: 1111;: कार्ड को अन्य तत्वों के ऊपर रखता है (उच्च z-index मान के कारण)।
- overflow: hidden;: कार्ड के बाहर निकलने वाले किसी भी कंटेंट को छिपा देता है।
- display: flex; flex-direction: column; align-items: center; justify-content: center;: कार्ड को एक फ्लेक्स कंटेनर बनाता है, जिसमें इसके अंदर के तत्व कॉलम में केंद्रित होते हैं।
- box-shadow: कार्ड के चारों ओर एक 3D प्रभाव वाला छाया जोड़ता है:
20px 20px 60px #bebebe: दाईं ओर और नीचे की ओर गहरी छाया।-20px -20px 60px #ffffff: बाईं ओर और ऊपर की ओर हल्की छाया, जो न्यूमॉर्फिक डिज़ाइन प्रभाव देता है।
प्रभाव: यह कार्ड को एक आयताकार, गोल-कोनेवाला, न्यूमॉर्फिक स्टाइल वाला कंटेनर बनाता है, जो केंद्र में सामग्री को व्यवस्थित करता है।
2. .bg क्लास
.bg {
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 240px;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
border-radius: 10px;
overflow: hidden;
outline: 2px solid white;
}
विश्लेषण:
- position: absolute;: इस तत्व को कार्ड के सापेक्ष पूर्ण स्थिति में रखता है।
- top: 5px; left: 5px;: इसे कार्ड के ऊपरी-बाएँ कोने से 5 पिक्सल नीचे और दाईं ओर रखता है।
- width: 190px; height: 240px;: इसकी चौड़ाई और ऊंचाई कार्ड से थोड़ी कम है, जिससे कार्ड के किनारों पर 5 पिक्सल का गैप बनता है।
- z-index: 2;: इसे
.blob(z-index: 1) के ऊपर लेकिन.card(z-index: 1111) के नीचे रखता है। - background: rgba(255, 255, 255, .95);: हल्का पारदर्शी सफेद बैकग्राउंड देता है (95% अपारदर्शिता)।
- backdrop-filter: blur(24px);: बैकग्राउंड को धुंधला (ब्लर) करता है, जिससे एक ग्लासमॉर्फिक प्रभाव मिलता है।
- border-radius: 10px;: कोनों को 10 पिक्सल की त्रिज्या के साथ गोल करता है।
- overflow: hidden;: इस तत्व के बाहर निकलने वाले कंटेंट को छिपाता है।
- outline: 2px solid white;: तत्व के चारों ओर 2 पिक्सल मोटी सफेद बॉर्डर लाइन जोड़ता है।
प्रभाव: यह कार्ड के अंदर एक पारदर्शी, धुंधला बैकग्राउंड बनाता है, जो ग्लासमॉर्फिक डिज़ाइन की तरह दिखता है और .blob को इसके पीछे रखता है।
3. .blob क्लास
.blob {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #ff0000;
opacity: 1;
filter: blur(12px);
animation: blob-bounce 5s infinite ease;
}
विश्लेषण:
- position: absolute;: ब्लॉब को कार्ड के सापेक्ष पूर्ण स्थिति में रखता है।
- top: 50%; left: 50%;: ब्लॉब को कार्ड के केंद्र में रखता है।
- width: 150px; height: 150px;: ब्लॉब की चौड़ाई और ऊंचाई 150 पिक्सल है।
- border-radius: 50%;: ब्लॉब को गोलाकार बनाता है (पूर्ण वृत्त)।
- background-color: #ff0000;: ब्लॉब का रंग लाल करता है।
- opacity: 1;: ब्लॉब को पूरी तरह अपारदर्शी बनाता है।
- filter: blur(12px);: ब्लॉब को 12 पिक्सल का धुंधला प्रभाव देता है, जिससे यह नरम और चमकदार दिखता है।
- animation: blob-bounce 5s infinite ease;: ब्लॉब को
blob-bounceनामक एनिमेशन देता है, जो 5 सेकंड में पूरा होता है, अनंत बार दोहराया जाता है, औरeaseटाइमिंग फ़ंक्शन के साथ चलता है।
प्रभाव: यह एक लाल, धुंधला, गोलाकार तत्व बनाता है जो कार्ड के केंद्र में एनिमेटेड तरीके से हिलता है।
4. @keyframes blob-bounce
@keyframes blob-bounce {
0% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
25% {
transform: translate(-100%, -100%) translate3d(100%, 0, 0);
}
50% {
transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
}
75% {
transform: translate(-100%, -100%) translate3d(0, 100%, 0);
}
100% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
}
विश्लेषण:
- यह
@keyframesनियम ब्लॉब के लिए एनिमेशन को परिभाषित करता है, जो इसे कार्ड के अंदर एक चतुष्कोणीय पथ में घुमाता है। - 0%: ब्लॉब अपनी प्रारंभिक स्थिति में है (
translate(-100%, -100%)इसे अपने मूल स्थान से ऊपरी-बाएँ कोने में ले जाता है, औरtranslate3d(0, 0, 0)कोई अतिरिक्त शिफ्ट नहीं देता)। - 25%: ब्लॉब दाईं ओर 100% शिफ्ट करता है (
translate3d(100%, 0, 0)), यानी कार्ड की चौड़ाई के बराबर दूरी। - 50%: ब्लॉब दाईं ओर और नीचे की ओर 100% शिफ्ट करता है (
translate3d(100%, 100%, 0)), यानी कार्ड के निचले-दाएँ कोने में। - 75%: ब्लॉब नीचे की ओर 100% शिफ्ट करता है (
translate3d(0, 100%, 0)), यानी कार्ड के निचले-बाएँ कोने में। - 100%: ब्लॉब अपनी प्रारंभिक स्थिति में वापस आता है, जिससे एनिमेशन चक्र पूरा होता है।
प्रभाव: ब्लॉब कार्ड के अंदर एक चतुष्कोणीय पथ में घूमता है, जिससे एक गतिशील और आकर्षक दृश्य प्रभाव पैदा होता है।
समग्र प्रभाव
.card: एक न्यूमॉर्फिक स्टाइल वाला आयताकार कंटेनर बनाता है, जिसमें गोल कोने और छाया प्रभाव हैं।.bg: कार्ड के अंदर एक ग्लासमॉर्फिक, धुंधला बैकग्राउंड बनाता है, जो.blobको पीछे से चमकने देता है।.blob: एक लाल, धुंधला, गोलाकार तत्व है जो कार्ड के अंदर एनिमेटेड तरीके से चतुष्कोणीय पथ में घूमता है।- z-index: यह सुनिश्चित करता है कि
.cardसबसे ऊपर,.bgबीच में, और.blobसबसे पीछे हो।
दृश्य परिणाम: यह CSS कोड एक स्टाइलिश कार्ड बनाता है जिसमें एक धुंधला बैकग्राउंड और एक एनिमेटेड, लाल ब्लॉब है, जो ग्लासमॉर्फिक और न्यूमॉर्फिक डिज़ाइन तत्वों को मिलाता है। यह डिज़ाइन आधुनिक और आकर्षक दिखता है, जो यूजर इंटरफेस में उपयोग के लिए उपयुक्त है।