न्यूमोर्फिज्म (या सॉफ्ट यूआई) वेब डिज़ाइन में एक बड़ा चलन रहा है। यह एक सुंदर, बाहर निकला हुआ प्लास्टिक लुक तैयार करता है जो अत्यधिक प्रीमियम और आधुनिक लगता है।
हालाँकि, न्यूमॉर्फिक बटन को शुरुआत से कोड करना एक बड़ा सिरदर्द है।
परछाइयों के पीछे का गणित
एक आदर्श न्यूमॉर्फिक बटन के लिए दो पूर्णतः संतुलित बॉक्स-छायाओं की आवश्यकता होती है: 1. प्रकाश स्रोत का अनुकरण करने के लिए ऊपर बाईं ओर एक प्रकाश छाया। 2. गहराई का अनुकरण करने के लिए नीचे दाईं ओर एक गहरी छाया।
यदि कंट्रास्ट बहुत अधिक है, तो यह कठोर दिखता है। यदि यह बहुत कम है, तो बटन पृष्ठभूमि में गायब हो जाता है।
```सीएसएस / क्लासिक न्यूमोर्फिज्म फॉर्मूला / पृष्ठभूमि: #e0e5ec; बॉक्स-छाया: 9px 9px 16px rgb(163,177,198,0.6), -9पीएक्स -9पीएक्स 16पीएक्स आरजीबीए(255,255,255, 0.5); ```
तेज़ तरीका
DevTools में CSS मानों को घंटों तक बदलने के बजाय, आप हमारे [CSS बटन जेनरेटर](/en/css-button-generator) का उपयोग कर सकते हैं।
हमारा टूल आपको सटीक सीमा-त्रिज्या, रंग और छाया की तीव्रता को दृश्य रूप से डायल करने की अनुमति देता है जो आप चाहते हैं। एक बार जब यह स्क्रीन पर एकदम सही दिखने लगे, तो आप बस "कॉपी सीएसएस" पर क्लिक करें और इसे अपने रिएक्ट घटक या स्टाइलशीट में छोड़ दें।
कच्ची सीएसएस छाया लिखना बंद करें और उन्हें दृश्य रूप से उत्पन्न करना शुरू करें!