सीएसएस (कैस्केडिंग स्टाइल शीट) वेब डिज़ाइन में सबसे लोकप्रिय तकनीकों में से एक है, जो डेवलपर्स को दृश्य और प्रतिक्रियाशील डिज़ाइन बनाने की अनुमति देती है। एक वेब डेवलपर के रूप में, आपके डिज़ाइन दृष्टिकोण को जीवन में लाने और सभी उपकरणों पर एक अच्छा उपयोगकर्ता अनुभव सुनिश्चित करने के लिए सीएसएस में महारत हासिल करना महत्वपूर्ण है। यहां कुछ युक्तियां दी गई हैं जो आप सीएसएस में नहीं जानते होंगे:

1. न्यूमोर्फसिमे:

न्युमोर्फसिमे को सॉफ्ट यूआई डिज़ाइन के रूप में संदर्भित किया जाता है, यह स्क्यूओमोर्फिज़्म और फ्लैट डिज़ाइन का संयोजन करने वाला एक लोकप्रिय डिज़ाइन ट्रेंड है। यह शैली एक सहज लुक बनाने के लिए छाया और हाइलाइट्स का उपयोग करती है। यहाँ दिया गया है कि यह कैसे काम करता है:

सबसे पहले, हम एक सूक्ष्म पृष्ठभूमि बनाते हैं: न्यूमोट्फ़्साइम से शुरू करने के लिए, हल्के भूरे रंग जैसा नरम पृष्ठभूमि रंग चुनें,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

फिर हम इन शैलियों के साथ एक तत्व बनाते हैं

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

आखिरकार, हम मँडराते समय तत्व में एक बॉक्स-छाया जोड़ते हैं

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

तो हमें यह अच्छा लुक मिलता है

और आप इसे भी बना सकते हैं

बस इस तरह बॉक्स छाया में एक इनसेट जोड़ें

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. न्यूनतम() और अधिकतम() और क्लैंप():

ये उपकरण वेबसाइटों और ऐप्स को अधिक गतिशील और प्रतिक्रियाशील बना रहे हैं। आप तत्व के आकार और आकार को नियंत्रित करने के लिए इन फ़ंक्शन का उपयोग कर सकते हैं। और यहां लचीली टाइपोग्राफी कैसे बनाएं:

min() फ़ंक्शन आपको यहां एक सूची से सबसे छोटा मान सेट करने देता है कि कैसे

पहले

.container {
  width:800px;
  max-width:90%;
}

बाद में

.container{
  width: min(800px,90%);
}

अधिकतम() फ़ंक्शन न्यूनतम() फ़ंक्शन के समान ही काम करता है लेकिन यहां दी गई सूची से बड़ा मान लेता है:

.container{
  width: max(800px,90%);
}

कभी-कभी आप एक कंटेनर में चौड़ाई और न्यूनतम और अधिकतम-चौड़ाई सेट करते हैं, वहां क्लैंप() नामक एक और फ़ंक्शन होता है, यहां बताया गया है कि यह कैसे काम करता है

पहले

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

बाद में

.container {
  width: clamp(400px,50vw,800px);
}

3. :Has() और :Not() चयनकर्ता:

:not() चयनकर्ता उन तत्वों का प्रतिनिधित्व करता है जो चयनकर्ताओं की सूची से मेल नहीं खाते हैं

.container:not(:first-child) {
  background-color: blue;
}

:has() चयनकर्ता एक तत्व का प्रतिनिधित्व करता है यदि कोई भी संबंधित चयनकर्ता जिसे तर्क के रूप में पारित किया जाता है वह मेल खाता है

.container:has(svg) {
  padding: 20px;
}

4. पाठ ढाल:

इस ट्रिक के लिए, हम इस तरह सीधे टेक्स्ट रंग में ग्रेडिएंट नहीं जोड़ सकते हैं

.text{
  color: linear-gradient(to right, red,blue);
}

इसके बजाय हम क्या करते हैं

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

और वोइला हमें यह अद्भुत प्रभाव मिलता है

निष्कर्ष:

इन सीएसएस तकनीकों में से एक में महारत हासिल करके, आप अपने वेब डिज़ाइन कौशल को नई ऊंचाइयों तक ले जाएंगे। उन तकनीकों के साथ केवल छोटे समायोजन के साथ, आप आश्चर्यजनक परिणाम प्राप्त कर सकते हैं, और अपने डिज़ाइन को अधिक सुंदर और उपयोगकर्ता-अनुकूल बना सकते हैं।

आप यहां अधिक जांच कर सकते हैं: https://designobit.com/