नवीनतम वेब देव रुझानों के साथ बने रहें। अपने डिजाइनों को न्यूमॉर्फिज्म के साथ पॉप बनाएं।
न्यूमॉर्फिज्म एक नई डिजाइन प्रवृत्ति है जो फ्लैट डिजाइन और स्क्यूओमोर्फिज्म को जोड़ती है। यह एक सॉफ्ट, एक्सट्रूडेड प्लास्टिक, लगभग 3डी-स्टाइल लुक के साथ डिजाइन करने का एक न्यूनतम तरीका है। वर्तमान में, यह डिज़ाइन इंटरनेट पर ट्रेंड कर रहा है और इसका व्यापक रूप से डिजाइनरों और डेवलपर्स द्वारा उपयोग किया जाता है।
यदि आप अपने अगले प्रोजेक्ट के लिए न्यूमॉर्फिज्म को आजमाना चाहते हैं, तो शुरू करने के लिए यहां कुछ कोड स्निपेट दिए गए हैं।
1. न्यूमॉर्फिक कार्ड
उपरोक्त न्यूमॉर्फिक कार्ड बनाने के लिए निम्नलिखित HTML और CSS कोड स्निपेट का उपयोग करें।
HTML कोड
न्यूमॉर्फिक कार्ड
डिज़ाइन
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। Quisquam Laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod।
अधिक पढ़ें
कोड
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। Quisquam Laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod।
अधिक पढ़ें
प्रक्षेपण
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। Quisquam Laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod।
अधिक पढ़ें
सीएसएस कोड
@आयात यूआरएल (' https://fonts.googleapis.com/css? परिवार = पॉपपिन: 400,500,600,700,800,900 और प्रदर्शन = स्वैप');
*
{
मार्जिन: 0;
पैडिंग: 0;
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
फ़ॉन्ट-फ़ैमिली: 'पॉपिन्स', सेन्स-सेरिफ़;
}
तन
{
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
न्यूनतम ऊंचाई: 100vh;
पृष्ठभूमि: #ebf5fc;
}
.कंटेनर
{
स्थिति: रिश्तेदार;
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: अंतरिक्ष-चारों ओर;
संरेखित-आइटम: केंद्र;
फ्लेक्स-रैप: रैप;
चौड़ाई: 1100px;
}
.कंटेनर .कार्ड
{
चौड़ाई: 320px;
मार्जिन: 20px;
पैडिंग: 40px 30px;
पृष्ठभूमि: #ebf5fc;
सीमा-त्रिज्या: 40px;
बॉक्स-छाया: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.कंटेनर .कार्ड: होवर
{
बॉक्स-शैडो: इनसेट -6px -6px 20px rgba (255,255,255,0.5), इनसेट 6px 6px 20px rgba (0,0,0,0.05);
}
.कंटेनर .कार्ड .imgBx
{
स्थिति: रिश्तेदार;
पाठ-संरेखण: केंद्र;
}
.कंटेनर .कार्ड .imgBx img
{
अधिकतम-चौड़ाई: 120px;
}
.कंटेनर .कार्ड .सामग्रीबीएक्स
{
स्थिति: रिश्तेदार;
मार्जिन-टॉप: 20px;
पाठ-संरेखण: केंद्र;
}
.कंटेनर .कार्ड .सामग्रीबीएक्स एच२
{
रंग: #32a3b1;
फ़ॉन्ट-वजन: 700;
फ़ॉन्ट-आकार: 1.4em;
लेटर-स्पेसिंग: 2px;
}
.कंटेनर .कार्ड .सामग्रीबीएक्स पी
{
रंग: #32a3b1;
}
.कंटेनर .कार्ड .सामग्रीबीएक्स ए
{
प्रदर्शन: इनलाइन-ब्लॉक;
पैडिंग: 10px 20px;
मार्जिन-टॉप: 15px;
सीमा-त्रिज्या: 40px;
रंग: #32a3b1;
फ़ॉन्ट-आकार: 16px;
पाठ-सजावट: कोई नहीं;
बॉक्स-शैडो: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.कंटेनर .कार्ड .सामग्रीबीएक्स ए: होवर
{
बॉक्स-शैडो: इनसेट -4px -4px 10px rgba (255,255,255,0.5), इनसेट 4px 4px 10px rgba (0,0,0,0.1);
}
.कंटेनर .कार्ड ए: होवर स्पैन
{
प्रदर्शन क्षेत्र;
ट्रांसफॉर्म: स्केल (0.98);
}
.कंटेनर .कार्ड: होवर .imgBx,
.कंटेनर .कार्ड: होवर .contentBx
{
ट्रांसफॉर्म: स्केल (0.98);
}2. न्यूमॉर्फिक फॉर्म
उपरोक्त न्यूमॉर्फिक फॉर्म बनाने के लिए निम्नलिखित HTML और CSS कोड स्निपेट का उपयोग करें।
HTML कोड
न्यूमॉर्फिक फॉर्म
सीएसएस कोड
शरीर, एचटीएमएल {
पृष्ठभूमि-रंग: #EBECF0;
}
बॉडी, पी, इनपुट, सेलेक्ट, टेक्सटेरिया, बटन {
फ़ॉन्ट-परिवार: "मोंटसेराट", बिना सेरिफ़;
लेटर-स्पेसिंग: -0.2px;
फ़ॉन्ट-आकार: 16px;
}
डिव, पी {
रंग: #BABECC;
पाठ-छाया: 1px 1px 1px #FFF;
}
प्रपत्र {
पैडिंग: 16 पीएक्स;
चौड़ाई: 320px;
मार्जिन: 0 ऑटो;
}
खंड {
पैडिंग: 32px 0;
पाठ-संरेखण: केंद्र;
}
बटन, इनपुट {
सीमा: 0;
रूपरेखा: 0;
फ़ॉन्ट-आकार: 16px;
सीमा-त्रिज्या: 320px;
पैडिंग: 16 पीएक्स;
पृष्ठभूमि-रंग: #EBECF0;
पाठ-छाया: 1px 1px 0 #FFF;
}
लेबल {
प्रदर्शन क्षेत्र;
मार्जिन-बॉटम: 24px;
चौड़ाई: 100%;
}
इनपुट {
मार्जिन-दाएं: 8px;
बॉक्स-शैडो: इनसेट 2px 2px 5px #BABECC, इनसेट -5px -5px 10px #FFF;
चौड़ाई: 100%;
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
संक्रमण: सभी 0.2s आसानी से बाहर;
उपस्थिति: कोई नहीं;
-वेबकिट-उपस्थिति: कोई नहीं;
}
इनपुट: फोकस {
बॉक्स-छाया: इनसेट 1px 1px 2px #BABECC, इनसेट -1px -1px 2px #FFF;
}
बटन {
रंग: #61677C;
फोंट की मोटाई: बोल्ड;
बॉक्स-छाया: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
संक्रमण: सभी 0.2s आसानी से बाहर;
कर्सर: सूचक;
फ़ॉन्ट-वजन: 600;
}
बटन: होवर {
बॉक्स-छाया: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
बटन: सक्रिय {
बॉक्स-छाया: इनसेट 1px 1px 2px #BABECC, इनसेट -1px -1px 2px #FFF;
}
बटन। आइकन {
मार्जिन-दाएं: 8px;
}
बटन.इकाई {
सीमा-त्रिज्या: 8px;
रेखा-ऊंचाई: 0;
चौड़ाई: 48px;
ऊंचाई: 48 पीएक्स;
प्रदर्शन: इनलाइन-फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
मार्जिन: 0 8px;
फ़ॉन्ट-आकार: 19.2px;
}
बटन.यूनिट .आइकन {
मार्जिन-दाएं: 0;
}
बटन लाल {
प्रदर्शन क्षेत्र;
चौड़ाई: 100%;
रंग: #AE1100;
}
इनपुट-समूह {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: फ्लेक्स-स्टार्ट;
}
.इनपुट-समूह लेबल {
मार्जिन: 0;
फ्लेक्स: 1;
}3. न्यूमॉर्फिक नवबार
उपरोक्त न्यूमॉर्फिक नावबार बनाने के लिए निम्नलिखित HTML, CSS और जावास्क्रिप्ट कोड स्निपेट का उपयोग करें।
HTML कोड
सम्बंधित: गुणवत्ता HTML कोडिंग उदाहरणों के लिए सर्वश्रेष्ठ साइटें
न्यूमॉर्फिक नवबार
- न्यूमॉर्फिक नवबार
सीएसएस कोड
* {
मार्जिन: 0;
पैडिंग: 0;
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
}
तन {
पृष्ठभूमि-रंग: #efeeee;
}
.एनएवी {
चौड़ाई: 100 वीडब्ल्यू;
ऊंचाई: 100 पीएक्स;
पृष्ठभूमि-रंग: #efeeee;
बॉक्स-छाया: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
सीमा-त्रिज्या: 0 0 10px 10px;
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: फ्लेक्स-एंड;
संरेखित-आइटम: केंद्र;
पैडिंग: 0 3rem;
सूची-शैली-प्रकार: कोई नहीं;
}
.एनएवी ली.लोगो {
मार्जिन-दाएं: ऑटो;
फ़ॉन्ट-परिवार: "रोबोटो", बिना सेरिफ़;
फ़ॉन्ट-आकार: 1.5rem;
रंग: डिमग्रे;
फ़ॉन्ट-वजन: 900;
टेक्स्ट-शैडो: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px सफ़ेद;
}
.एनएवी ली: नहीं (. लोगो) {
मार्जिन: 0 1रेम;
पैडिंग: 0.5rem 1.5rem;
सीमा: 2px ठोस आरजीबीए (255, 255, 255, 0.3);
बॉक्स-छाया: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px सफ़ेद;
सीमा-त्रिज्या: 10px;
फ़ॉन्ट-परिवार: "रोबोटो", बिना सेरिफ़;
कर्सर: सूचक;
संक्रमण: रंग 0.2s आसानी से बाहर, 0.2s आसानी से बाहर बदलना;
रंग: डिमग्रे;
}
.एनएवी ली: नहीं (.लोगो): होवर {
ट्रांसफॉर्म: स्केल (1.05);
बॉक्स-छाया: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px सफ़ेद;
}
.एनएवी ली: नहीं (.लोगो): फोकस {
रूपरेखा: कोई नहीं;
ट्रांसफॉर्म: स्केल (0.95);
बॉक्स-छाया: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px सफ़ेद, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) इनसेट, -4px -4px 10px सफ़ेद इनसेट;
}
.nav li: not(.logo):hover, .nav li: not(.logo): फोकस {
रंग: नारंगी;
}जावास्क्रिप्ट कोड
पंख। बदलें ();4. न्यूमॉर्फिक टेक्स्ट और आकार
उपरोक्त न्यूमॉर्फिक टेक्स्ट और आकार बनाने के लिए निम्नलिखित HTML और CSS कोड स्निपेट का उपयोग करें।
HTML कोड
सम्बंधित: HTML एसेंशियल चीट शीट
न्यूमॉर्फिक टेक्स्ट और आकार
वृत्त
डोनट
वर्ग
चिकना वर्ग
गिलास
न्यूमॉर्फिक टेक्स्ट
एमओओ में आपका स्वागत है
सीएसएस कोड
सम्बंधित: सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं
*, *::पहले बादमे {
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
}
: जड़ {
--nरंग: #आआ;
--brShadow: -6px 6px 10px आरजीबीए (0,0,0,0.5);
--tlShadow: 6px -6px 10px आरजीबीए (255,255,255,0.5);
}
तन {
मार्जिन: 0;
फ़ॉन्ट-फ़ैमिली: सेन्स-सेरिफ़;
न्यूनतम ऊंचाई: 100vh;
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
फ्लेक्स-रैप: रैप;
पृष्ठभूमि: वर (--nColor);
}
.एन-शुरुआत,
.एन-इनसेट {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
}
.एन-सर्कल {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 50%;
चौड़ाई: 200px;
ऊंचाई: 200px;
मार्जिन: 10px;
}
.एन-डोनट {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 50%;
चौड़ाई: 200px;
ऊंचाई: 200px;
मार्जिन: 10px;
}
.एन-डोनट .एन-इनसेट {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: इनसेट var (--brShadow), इनसेट var (--tlShadow);
सीमा-त्रिज्या: 50%;
चौड़ाई: 50%;
ऊंचाई: 50%;
मार्जिन: 0;
}
.एन-टम्बलर {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 50%;
चौड़ाई: 200px;
ऊंचाई: 200px;
मार्जिन: 10px;
}
.एन-टम्बलर .एन-आउटसेट {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 50%;
चौड़ाई: 80%;
ऊंचाई: 80%;
मार्जिन: 0;
}
.एन-स्क्वायर {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 0;
चौड़ाई: 200px;
ऊंचाई: 200px;
मार्जिन: 10px;
}
.n-चिकनी-वर्ग {
पृष्ठभूमि-रंग: var (--nColor);
बॉक्स-छाया: var (--brShadow), var (--tlShadow);
सीमा-त्रिज्या: 10%;
चौड़ाई: 200px;
ऊंचाई: 200px;
मार्जिन: 10px;
}
.एन-पाठ {
रंग: var (--nColor);
पाठ-छाया: var(--brShadow), var(--tlShadow);
फ़ॉन्ट-आकार: 6em;
फोंट की मोटाई: बोल्ड;
}5. न्यूमॉर्फिक बटन
उपरोक्त न्यूमॉर्फिक बटन बनाने के लिए निम्नलिखित HTML, CSS और जावास्क्रिप्ट कोड स्निपेट का उपयोग करें।
HTML कोड
न्यूमॉर्फिक बटन
बटन दबाएं
सीएसएस कोड
@आयात यूआरएल (' https://fonts.googleapis.com/icon? परिवार = सामग्री + प्रतीक');
तन{
पृष्ठभूमि-रंग: #6ec7ff;
}
.बीटीएन-धारक{
प्रदर्शन क्षेत्र;
मार्जिन: 0 ऑटो;
मार्जिन-टॉप: 64px;
पाठ-संरेखण: केंद्र;
}
।परिचय पाठ{
मार्जिन-बॉटम: 48px;
फ़ॉन्ट-फ़ैमिली: 'क्विक्सैंड', सेन्स-सेरिफ़;
सफ़ेद रंग;
फ़ॉन्ट-आकार: 18px;
}
.बीटीएन{
चौड़ाई: 110px;
ऊंचाई: 110px;
फ़ॉन्ट-आकार: 30px;
सीमा-त्रिज्या: 30px;
सीमा: कोई नहीं;
सफ़ेद रंग;
लंबवत-संरेखण: शीर्ष;
-वेबकिट-संक्रमण: .6s आसानी से बाहर;
संक्रमण: .6s आसानी से बाहर;
}
.बीटीएन: होवर{
कर्सर: सूचक;
}
.बीटीएन: फोकस{
रूपरेखा: कोई नहीं;
}
.बीटीएन: फर्स्ट-ऑफ-टाइप{
मार्जिन-दाएं: 30 पीएक्स;
}
न्यूमॉर्फिक{
पृष्ठभूमि: रैखिक-ढाल (145deg, #76d5ff, #63b3e6);
बॉक्स-छाया: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
सीमा: 3px ठोस rgba (255, 255, 255, .4);
}
न्यूमॉर्फिक-प्रेस्ड{
पृष्ठभूमि: रैखिक-ढाल (145deg, #63b3e6, #76d5ff);
-वेबकिट-बॉक्स-छाया: इनसेट 15px 15px 20px -20px आरजीबीए (0,0,0,.5);
-मोज़-बॉक्स-छाया: इनसेट 15px 15px 20px -20px आरजीबीए (0,0,0,.5);
बॉक्स-छाया: इनसेट 15px 15px 20px -20px आरजीबीए (0,0,0,.5);
}
न्यूमॉर्फिक: फोकस, न्यूमॉर्फिक: होवर, न्यूमॉर्फिक: फोकस, न्यूमॉर्फिक: होवर, न्यूमॉर्फिक-प्रेस्ड: फोकस, न्यूमॉर्फिक-प्रेस्ड: होवर {
सीमा: 3px ठोस rgba (46, 74, 112, .75);
}
सामग्री-आइकन {
फ़ॉन्ट-परिवार: 'सामग्री चिह्न';
फ़ॉन्ट-वजन: सामान्य;
फ़ॉन्ट-शैली: सामान्य;
फ़ॉन्ट-आकार: 32px;
प्रदर्शन: इनलाइन-ब्लॉक;
लाइन-ऊंचाई: 1;
पाठ-रूपांतरण: कोई नहीं;
लेटर-स्पेसिंग: सामान्य;
वर्ड-रैप: सामान्य;
व्हाइट-स्पेस: अब्रैप;
दिशा: लीटर;
-वेबकिट-फ़ॉन्ट-चिकनाई: एंटीअलाइज़्ड;
पाठ-प्रतिपादन: अनुकूलनयोग्यता;
-मोज़-ओएसएक्स-फ़ॉन्ट-चिकनाई: ग्रेस्केल;
फ़ॉन्ट-सुविधा-सेटिंग्स: 'लिगा';
}
#रोकें {
रंग: #143664;
कुछ भी डिस्प्ले मत करो;
}जावास्क्रिप्ट कोड
फंक्शन चेंज स्टाइल (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("न्यूमॉर्फिक");
btn.classList.toggle ("न्यूमॉर्फिक-प्रेस्ड");
अगर (बीटीएन 'प्ले-पॉज' दबाया गया) {
प्ले();
} और अगर (बीटीएन 'शफल-बीटीएन' दबाया गया) {
फेरबदल ();
}
}
फंक्शन प्ले () {
वर playBtn = document.getElementById ('प्ले');
वर पॉज़बीटीएन = document.getElementById ('रोकें');
अगर (playBtn.style.display 'none') {
playBtn.style.display = 'ब्लॉक';
पॉज़बीटीएन.स्टाइल.डिस्प्ले = 'कोई नहीं';
} अन्य {
playBtn.style.display = 'कोई नहीं';
पॉज़बीटीएन.स्टाइल.डिस्प्ले = 'ब्लॉक';
}
}
फ़ंक्शन फेरबदल () {
वर shuffleBtn = document.getElementById ('फेरबदल-बीटीएन');
अगर (shuffleBtn.style.color == 'सफ़ेद' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} अन्य {
shuffleBtn.style.color = 'सफ़ेद';
}
}यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड को देखना चाहते हैं, तो यह है गिटहब भंडार.
ध्यान दें: इस लेख में प्रयुक्त कोड है एमआईटी लाइसेंस प्राप्त.
न्यूमॉर्फिज्म के साथ अपनी वेबसाइट को स्टाइल करें
आप अपनी वेबसाइट को स्टाइल करने के लिए न्यूमॉर्फिज्म की न्यूनतर डिजाइन अवधारणा का उपयोग कर सकते हैं। यह सौंदर्य की दृष्टि से मनभावन लुक प्रदान करता है। लेकिन फिर भी, न्यूमॉर्फिज्म की पहुंच सीमाएं हैं।
वेबसाइट को खूबसूरत लुक देने के लिए अलग-अलग तरीके हैं। अगर आप अपनी वेबसाइट पर ब्लैंड बॉक्स स्टाइल करना चाहते हैं, तो बॉक्स-शैडो CSS प्रॉपर्टी को आज़माएँ।
ब्लैंड बॉक्स उबाऊ लगते हैं। CSS बॉक्स-छाया प्रभाव के साथ उन्हें सजाना!
आगे पढ़िए
- वर्डप्रेस और वेब डेवलपमेंट
- प्रोग्रामिंग
- एचटीएमएल
- वेब डिजाइन
- सीएसएस
युवराज दिल्ली विश्वविद्यालय, भारत में कंप्यूटर विज्ञान के स्नातक छात्र हैं। उन्हें फुल स्टैक वेब डेवलपमेंट का शौक है। जब वह नहीं लिख रहा होता है, तो वह विभिन्न तकनीकों की गहराई की खोज कर रहा होता है।
हमारे न्यूज़लेटर की सदस्यता
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
एक और क़दम…!
कृपया अपने ईमेल पते की पुष्टि उस ईमेल में करें जो हमने अभी आपको भेजी है।
