8 अत्याधुनिक सीएसएस विशेषताएं (और उनका उपयोग कैसे करें)

सीएसएस लगातार विकसित हो रहा है और विनिर्देश को वेब डिज़ाइनर के टूलसेट में एक और अधिक शक्तिशाली हथियार बनाने के लिए कई रोमांचक नई सुविधाओं को जोड़ा गया है।

सीएसएस ग्रिड नए स्तरों पर लेआउट लेता है, पहले नहीं देखा गया, कस्टम गुण चर की अवधारणा को पेश करते हैं जबकि फ़ीचर क्वेरी ब्राउज़र समर्थन की जांच करते हैं। मीडिया क्वेरीज नई एक्सेसिबिलिटी गुणों के साथ एक स्तर पर चलता है, वैरिएबल फोंट न्यूनतम कोड ब्लोट के साथ अधिकतम रचनात्मकता प्रदान करते हैं जबकि स्क्रॉल स्नैपिंग जावास्क्रिप्ट की आवश्यकता को समाप्त करता है। हमारे शांत की जाँच करें सीएसएस एनीमेशन यह देखने के लिए उदाहरण आप क्या बना सकते हैं। या, कोड के बिना साइट बनाने के लिए इन्हें आज़माएं [2 9] वेबसाइट बिल्डर्स

।

रचनात्मक प्राप्त करने वाले लोगों के लिए अद्वितीय लेआउट के लिए सीएसएस आकार और फ़ोटोशॉप स्टाइल डिज़ाइन प्रभावों को पेश करने के लिए कई मिश्रण मोड और फ़िल्टर हैं। यह जानने के लिए पढ़ें कि आप अपने नवीनतम बिल्ड्स में इन आवश्यकताओं को कैसे उपयोग कर सकते हैं। लेकिन याद रखें, एक जटिल वेबसाइट का मतलब है कि आपको एक की आवश्यकता है [2 9] वेब होस्टिंग

सेवा जो आपकी आवश्यकताओं का समर्थन कर सकती है।

01. कस्टम गुण [3 9]

यदि आप एसएएसएस की तरह प्रीप्रोसेसर का उपयोग करते हैं, या वास्तव में जावास्क्रिप्ट जैसी प्रोग्रामिंग भाषा, आपको कोई संदेह नहीं होगा कि वेरिएबल्स की अवधारणा से परिचित होंगे - मूल्यों को आपके कोड में पुन: उपयोग के लिए परिभाषित किया गया है। कस्टम गुण हमें प्रीप्रोसेसर्स की आवश्यकता के बिना, हमारे सीएसएस में ऐसा करने में सक्षम बनाता है। चर पर सेट किया जा सकता है: रूट स्तर (वैश्विक चर बनाना) या चयनकर्ता के भीतर scoped। उन्हें सिंटैक्स का उपयोग करके बुलाया जा सकता है [2 9] var (-> - myvariabename)।

उदाहरण के लिए, हम एक चर नामक सेट कर सकते हैं [2 9] --प्राथमिक रंग इस तरह:

 / * रूट तत्व पर (एक वैश्विक)
चर) /
: रूट {
--- PrimaryColor: # F45942;
}
/ * एक चयनकर्ता के लिए scoped * /
.my-घटक {
--- PrimaryColor: # 4171F4;
} 

अब हम उस चर का उपयोग संपत्ति मूल्य के रूप में कर सकते हैं:

 एच 1 {
रंग: var (- - primarycolor);
} 

कस्टम गुण विरासत में प्राप्त होते हैं, जिनमें कुछ बहुत ही उपयोगी प्रभाव पड़ते हैं। उनमें से एक थीमिंग है। उपरोक्त उदाहरण लें: हम एक वैश्विक चर (# F45942 - एक उज्ज्वल नारंगी लाल) को परिभाषित कर सकते हैं [2 9] --प्राथमिक रंग

रूट स्तर पर, इसलिए हर उदाहरण जहां हम इस चर का उपयोग करते हैं, मूल्य लाल होगा। लेकिन हम एक अलग मूल्य (# 4171 एफ 4 - मध्यम नीले) के साथ एक चयनकर्ता के भीतर एक ही चर को फिर से परिभाषित कर रहे हैं। इसलिए हर उदाहरण के लिए जहां हम उपयोग करते हैं [2 9] --प्राथमिक रंग परिवर्तक उस चयनकर्ता के भीतर, गणना मूल्य नीला होगा।

डिफ़ॉल्ट सेट करना [3 9]

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

 एच 1 {
रंग: var (--- PrimaryColor, नीला);
} 

प्रीप्रोसेसर चर से कस्टम गुण कैसे भिन्न होते हैं? [3 9]

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

प्रीप्रोसेसर चर के विपरीत, कस्टम गुणों का उपयोग चयनकर्ता नाम, संपत्ति कुंजी या मीडिया क्वेरी घोषणाओं के भीतर नहीं किया जा सकता है - केवल सीएसएस संपत्ति मूल्य। सीएसएस प्रीप्रोसेसर में अभी भी बहुत सारे फायदे हैं, इसलिए हम उन्हें थोड़ी देर के लिए घूमने की संभावना रखते हैं, लेकिन वे कस्टम गुणों के संयोजन में अधिक बार उपयोग किए जाने की संभावना रखते हैं।

02. फीचर प्रश्न [3 9]

फ़ीचर क्वेरी परीक्षण करने का एक तरीका है कि कोई ब्राउज़र आपकी सीएसएस फ़ाइल के भीतर किसी विशेष CSS प्रॉपर्टी-वैल्यू संयोजन का समर्थन करता है या नहीं। वे वस्तुतः आधुनिक-पहचान पुस्तकालयों की आवश्यकता को आधुनिक उपहारों की आवश्यकता को हटा देते हैं। सिंटैक्स एक मीडिया क्वेरी के समान है: आप एट-नियम का उपयोग करते हैं [2 9] @supports

, आपकी संपत्ति-मूल्य जोड़ी के बाद, यदि ब्राउज़र निर्दिष्ट शर्तों को पूरा करता है तो कोड को निष्पादित करने के लिए कोड को लपेटना।

फ़ीचर क्वेरी आधुनिक ब्राउज़रों में अच्छी तरह से समर्थित हैं, लेकिन वे अपेक्षाकृत नए हैं, और एक "गॉचा" यह है कि कुछ ब्राउज़र जो आप समर्थन के लिए परीक्षण करना चाहते हैं वे फीचर क्वेरी का समर्थन नहीं कर सकते हैं। अक्सर इसे संभालने का सबसे अच्छा तरीका फॉलबैक शैलियों को पहले (सुविधा क्वेरी के बाहर) प्रदान करना है, फिर अंदर ब्राउज़रों का समर्थन करने के लिए अपने संवर्द्धन को लपेटें [2 9] @supports

शासन।

जागरूक रहें, फीचर क्वेरी की आवश्यकता केवल थोड़ी उपयोग की जानी चाहिए। सीएसएस की महान सुविधाओं में से एक यह है कि ब्राउज़र बस किसी भी गुण या मूल्यों को अनदेखा करेंगे जिन्हें वे समझ में नहीं आते हैं। ऐसा करने के लिए केवल फ़ीचर क्वेरीज़ को नियोजित करना सबसे अच्छा है, ऐसा कोई दृश्य बग का कारण बनता है, अन्यथा आप अपने आप को बहुत सारे अतिरिक्त काम के लिए सेट कर सकते हैं।

[8 9] [9 1]

(छवि क्रेडिट: Caniuse.com) [1 9]

सुविधा प्रश्नों का उपयोग कैसे करें [3 9]

एक ही संपत्ति मूल्य के समर्थन के लिए परीक्षण करने के लिए, हम पहले फॉलबैक प्रदान कर सकते हैं। इस उदाहरण में, हम उन ब्राउज़रों के लिए एक फ्लेक्सबॉक्स फ़ॉलबैक प्रदान कर रहे हैं जो ग्रिड लेआउट का समर्थन नहीं करते हैं।

 .my-घटक {
प्रदर्शन: ग्रिड;
}
@supports (प्रदर्शन: ग्रिड) {
.my-घटक {
प्रदर्शन: फ्लेक्स;
}
} 

03. मीडिया प्रश्न [3 9]

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

वेस्टिबुलर विकार वाले उपयोगकर्ता, और जो गति बीमारी से पीड़ित हैं, वे कई गति वाले वेब पृष्ठों की सराहना नहीं कर सकते हैं, जैसे एनिमेशन और लंबन स्क्रॉलिंग प्रभाव। प्रीफर-कम-गति मीडिया क्वेरी का उपयोग करके, हम उन उपयोगकर्ताओं को प्रदान कर सकते हैं जो कम गति वाले विकल्प के साथ बाहर निकलते हैं।

 .my- तत्व {
एनीमेशन: 500ms आसानी से हिलाएं 5;
}
@media (प्राथमिकता-कम गति: कम करें) {
.my- तत्व {
एनीमेशन: कोई नहीं;
}
} 

यह एक वैकल्पिक अंधेरे विषय प्रदान करने के लिए वेबसाइटों के लिए तेजी से लोकप्रिय हो रहा है। प्रीफर-कलर-स्कीम हमें पूछताछ करने की अनुमति देता है कि उपयोगकर्ता ने सिस्टम-व्यापी वरीयता निर्धारित की है (कीवर्ड डार्क, लाइट, या नो-वरीयता) का उपयोग करके, और उचित रंग योजना तदनुसार दिखाएं।

 / * मीडिया प्रश्न 02 * /
तन {
पृष्ठभूमि: रैखिक-ढाल (करने के लिए)
नीचे, # b5faff, # ffe2b4);
}
@media (prefers-color- योजना: डार्क) {
तन {
सफ़ेद रंग;
पृष्ठभूमि: रैखिक-ढाल (करने के लिए)
नीचे, # 0c1338, # 3e3599);
}
} 

04. परिवर्तनीय फ़ॉन्ट्स [3 9]

[12 9]

(छवि क्रेडिट: एक्सिसप्रैक्सिस) [1 9]

आम तौर पर, यदि हम अपने वेबपृष्ठ पर एक ही परिवार के कई अलग-अलग फोंट चेहरे को शामिल करना चाहते हैं, तो हमें उसी संख्या को फ़ॉन्ट फ़ाइलों को लोड करने की आवश्यकता होगी। आपके द्वारा लोड की जाने वाली अधिक फ़ॉन्ट फ़ाइलें, जितना अधिक वजन आप अपने पृष्ठ में जोड़ते हैं, प्रदर्शन पर असर पड़ता है - इसलिए आमतौर पर अधिकतम तीन या चार फ़ॉन्ट फ़ाइलों को लोड करना बुद्धिमानी होती है (आपके प्रदर्शन बजट के आधार पर)।

परिवर्तनीय फोंट वह सब बदलते हैं। वे हमें पूरे फ़ॉन्ट परिवार के लिए एक फ़ॉन्ट फ़ाइल लोड करने में सक्षम बनाता है। यद्यपि यह फ़ाइल आमतौर पर एक फ़ॉन्ट से बड़ी होगी, यदि आप विभिन्न वजन और शैलियों का लाभ लेना चाहते हैं, तो एक परिवर्तनीय फ़ॉन्ट अधिक प्रदर्शन समाधान है। यदि आपने एक पूरा फ़ॉन्ट परिवार खरीदा है, तो इसे सुरक्षित रूप से स्टैश करना याद रखें [2 9] घन संग्रहण

तो आप अपनी फाइलें नहीं खोते हैं!

भिन्नता धुरी [3 9]

इतना ही नहीं, लेकिन परिवर्तनीय फोंट के साथ, हम फ़ॉन्ट वजन के एक छोटे से सबसेट तक ही सीमित नहीं हैं। नियमित फोंट के साथ काम करते समय, उपलब्ध फ़ॉन्ट वजन 100 के गुणकों में दिए जाते हैं। आमतौर पर, 400 नियमित वजन, 300 हल्के वजन, और 700 बोल्ड वजन हो सकता है - विभिन्न परिवारों के साथ अधिक वजन या कम आपूर्ति। परिवर्तनीय फोंट में भिन्नता की धुरी होती है, जो हमें फ़ॉन्ट वजन जैसी गुणों के लिए मानों की एक श्रृंखला प्रदान करती है। एक फ़ॉन्ट में 1-900 की धुरी हो सकती है, जो हमें 900 विभिन्न वजन तक पहुंच प्रदान करेगी!

भिन्नता की धुरी केवल वजन तक ही सीमित नहीं है। परिवर्तनीय फोंट में एक्स-ऊंचाई, स्लंट, सेरिफ़ लम्बाई और कंट्रास्ट (केवल कुछ उदाहरण चुनने के लिए) के लिए अलग-अलग अक्ष हो सकते हैं - जिसका अर्थ है कि एक फ़ॉन्ट फ़ाइल हमें सैकड़ों, या यहां तक ​​कि हजारों भिन्नताओं तक पहुंच सकती है! हम इन गुणों को भी एनिमेट कर सकते हैं, जिससे हम कुछ वास्तव में अच्छे प्रभाव प्राप्त कर सकते हैं। मैंडी माइकल ( https://codepen.io/mandymichael ) रचनात्मक डेमो का एक संपूर्ण भार है जो वास्तव में सीमाओं का परीक्षण करता है।

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

सावधान रहें, अगर आप वैरिएबल फोंट का उपयोग करना चाहते हैं तो आपको यह सुनिश्चित करने की ज़रूरत है कि आप एक अद्यतित ऑपरेटिंग सिस्टम का उपयोग कर रहे हैं - वे पुराने ओएसएस पर काम नहीं करेंगे।

फ़ॉन्ट-विविधता-सेटिंग्स [3 9]

जबकि हम फ़ॉन्ट वजन को आसानी से आसानी से बदल सकते हैं [2 9] फ़ॉन्ट वजन

सीएसएस संपत्ति, [2 9] फ़ॉन्ट-विविधता-सेटिंग्स एक नई संपत्ति है जो हमें एक फ़ॉन्ट के विभिन्न अक्षों तक पूर्ण पहुंच प्रदान करती है। इनमें पंजीकृत अक्ष और कस्टम अक्ष दोनों शामिल हैं।

पंजीकृत अक्ष [3 9]

पांच अलग-अलग पंजीकृत अक्ष हैं, जो विभिन्न सीएसएस गुणों के अनुरूप हैं। इनमें से प्रत्येक को "एक्सिस टैग" के रूप में जाना जाता है। पंजीकृत अक्ष हैं: [2 9] WGHT

(फ़ॉन्ट वजन), [2 9] डब्ल्यूडीटीएच (फ़ॉन्ट-स्ट्रेच), [2 9] स्लेट (फ़ॉन्ट-शैली: तिरछा / कोण), [2 9] डिजिटल (फ़ॉन्ट-शैली: इटालिक), [2 9] ओप्सज़ (फ़ॉन्ट-ऑप्टिकल-आकार)। हम या तो सीएसएस संपत्ति, या के साथ इन अक्षों तक पहुंच सकते हैं [2 9] फ़ॉन्ट-विविधता-सेटिंग्स ।

इन अक्षों को प्रत्येक परिवर्तनीय फ़ॉन्ट में शामिल नहीं किया जाता है (कुछ में केवल एक या दो अक्ष हो सकते हैं), लेकिन वे सबसे आम होने की संभावना है।

कस्टम अक्ष [3 9]

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

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

05. ग्राफिकल प्रभाव [3 9]

(छवि क्रेडिट: CSSGram) [1 9]

यदि आप फ़ोटोशॉप और इलस्ट्रेटर जैसे डिज़ाइन टूल से परिचित हैं, तो आप मिश्रण मोड के बारे में जागरूक हो सकते हैं और छवियों पर विभिन्न प्रभावों का उत्पादन करने के लिए उनका उपयोग कैसे किया जा सकता है। जिस तरह से मिश्रण मोड काम करता है वह प्रत्येक पिक्सेल के परिणामस्वरूप मूल्य की गणना करने के लिए गणितीय सूत्रों का उपयोग करके दो या दो से अधिक परतों को मिश्रित करना है। परतें कुछ भी हो सकती हैं - छवियां, ग्रेडियेंट या फ्लैट रंग। कुछ मिश्रण मोड एक अंधेरे परिणाम उत्पन्न करते हैं (उदा। गुणा, जो परतों के पिक्सेल मूल्यों को गुणा करता है), कुछ हल्का एक (जैसे स्क्रीन और ओवरले)। हालांकि, उन्हें उपयोग करने के लिए गणित को समझने की आवश्यकता नहीं है। विभिन्न मिश्रण मोड के साथ खेलना हमें एक अच्छा अनुभव दे सकता है जिसके लिए विभिन्न परतों के साथ संयुक्त होने पर वांछित परिणाम उत्पन्न होते हैं।

सीएसएस गुणों के साथ [2 9] मिक्स-ब्लेंड-मोड

तथा [2 9] पृष्ठभूमि-मिश्रण-मोड , हम ब्राउज़र में फ़ोटोशॉप-जैसे छवि प्रभाव प्राप्त कर सकते हैं। दोनों गुण समान मान लेते हैं, लेकिन थोड़ा अलग तरीके से काम करते हैं।

पृष्ठभूमि-मिश्रण-मोड [3 9]

[2 9] पृष्ठभूमि-मिश्रण-मोड

हमारे द्वारा लक्षित तत्व की पृष्ठभूमि परतों को एक साथ मिलाएं। हमारे तत्व में पृष्ठभूमि छवियों, रंगों और ग्रेडियेंट हो सकते हैं, और वे सभी अग्रभूमि सामग्री को प्रभावित किए बिना एक-दूसरे के साथ मिश्रित होंगे। हम इसके लिए एकाधिक मान निर्दिष्ट कर सकते हैं [2 9] पृष्ठभूमि-मिश्रण-मोड , प्रत्येक पृष्ठभूमि परत के लिए एक।

 .my- तत्व {
पृष्ठभूमि: यूआरएल (#MYURL),
रैखिक-ढाल (45 डिग्री, आरजीबीए (65, 68,
244, 1), आरजीबीए (203, 66, 244, 0.5)),
आरजीबीए (244, 65, 106, 1);
पृष्ठभूमि आकार: कवर;
पृष्ठभूमि-मिश्रण-मोड: स्क्रीन,
गुणा करें;
} 

मिक्स-ब्लेंड-मोड [3 9]

[2 9] मिक्स-ब्लेंड-मोड

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

 .my- तत्व {
पृष्ठभूमि: आरजीबी (244, 65, 106);
मिक्स-ब्लेंड-मोड: गुणा करें;
} 

सीएसएस फ़िल्टर [3 9]

सीएसएस फ़िल्टर का उपयोग हड़ताली दृश्य प्रभाव बनाने के लिए भी किया जा सकता है [2 9] फिल्टर

संपत्ति और फ़िल्टर फ़ंक्शन मान। मिश्रण मोड के विपरीत, वे सीधे उस तत्व को ग्राफिकल प्रभाव लागू करते हैं जो वे लक्ष्यीकरण कर रहे हैं, और एक तत्व में कई फ़िल्टर लागू हो सकते हैं।

ग्रेस्केल में कनवर्ट करें [3 9]

हम मिश्रण मोड पर भरोसा करने से अधिक नियंत्रण के साथ एक तत्व के रंगों में हेरफेर कर सकते हैं। फ़िल्टर एक छवि को ग्रेस्केल में परिवर्तित कर सकते हैं, चमक, कंट्रास्ट और संतृप्ति समायोजित कर सकते हैं, एक तत्व को धुंधला कर सकते हैं या एक बूंद छाया जोड़ सकते हैं। वे भी एनिमेटेड हो सकते हैं, और होवर प्रभाव के साथ बहुत अच्छे लग सकते हैं।

एसवीजी फ़िल्टर [3 9]

सीएसएस फ़िल्टर वास्तव में एसवीजी फ़िल्टर के सरलीकृत संस्करण हैं। सीएसएस [2 9] फिल्टर

संपत्ति भी लेता है [2 9] URL () समारोह, हमें एक एसवीजी फ़िल्टर में एक यूआरएल में पास करने की इजाजत देता है। एसवीजी फ़िल्टर बेहद शक्तिशाली हैं और कुछ अविश्वसनीय छवि प्रभावों की अनुमति देते हैं - लेकिन वे सीएसएस फ़िल्टर कार्यों की तुलना में कहीं अधिक जटिल हैं! यदि आप अपने स्वयं के कस्टम एसवीजी फ़िल्टर को कोडिंग में डाइविंग में रूचि रखते हैं तो सारा सॉयदैन के कोड्रोप पर एक अद्भुत लेख श्रृंखला है। लेख देखें https://tympanus.net/codrops/2019/01/15/svg-filters-101/

क्लिपिंग और मास्किंग: आयताकार से परे [3 9]

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

क्लिप-पथ [3 9]

[2 9] क्लिप-पथ ()

संपत्ति हमें पथ को परिभाषित करके तत्व को "कट आउट" करने की अनुमति देती है। यह कई मूल आकार के कार्यों को लेता है, [2 9] इन्सेट (), सर्कल (), दीर्घवृत्त (), या बहुभुज () , जो हमें पथ को परिभाषित करने के लिए XY समन्वय के जोड़े का उपयोग करके अधिक जटिल कटआउट आकार तैयार करने की अनुमति देता है। वैकल्पिक रूप से, हम एक एसवीजी पथ में भी गुजर सकते हैं [2 9] पथ () समारोह, या उपयोग करना [2 9] URL () एक एसवीजी पथ आईडी प्रदान करने के लिए।

रास्ते के अंदर नहीं [3 9]

एक तत्व को क्लिप करना आपके द्वारा परिभाषित किए गए पथ के बाहर सबकुछ क्लिप करता है, लेकिन तत्व स्वयं अभी भी एक आयताकार है। यदि आपके पास सामग्री है जो क्लिप पथ की सीमा से बाहर निकलता है, तो वह भी क्लिप किया जाएगा - यह आकार के अंदर लपेट नहीं होगा।

मुखौटा [3 9]

[2 9] मुखौटा

एक छवि (एसवीजी या पारदर्शी पीएनजी) या एक मुखौटा के रूप में ढाल का उपयोग करके छवि के हिस्सों को दिखाने और छिपाने में सक्षम बनाता है। भिन्न [2 9] क्लिप-पथ , हम मास्किंग के साथ हमारी छवियों को बनावट जोड़ सकते हैं, क्योंकि मास्क स्रोत को पथ होने की आवश्यकता नहीं है - यह पारदर्शिता की डिग्री के लिए अनुमति देता है।

06. सीएसएस आकार [3 9]

सीएसएस आकार विनिर्देश हमें कुछ रोचक, पत्रिका जैसी लेआउट बनाने के लिए, फ़्लोटेड ज्यामितीय आकारों के आसपास पाठ को लपेटने की अनुमति देता है। इसका उपयोग करके संभव बनाया गया है [2 9] आकार-बाहर

संपत्ति। के समान [2 9] क्लिप-पथ , हम इस संपत्ति को एक मूल आकार का कार्य दे सकते हैं [2 9] सर्कल (), एलिप्स (), इन्सेट (), बहुभुज () , या एक एसवीजी पथ के लिए एक यूआरएल, और वास्तव में सद्भाव में दो काम बहुत अच्छी तरह से! [2 9] आकार-बाहर हमारे पाठ को प्रभावी ढंग से लपेटेंगे, लेकिन यह फ़्लोटेड तत्व को प्रभावित नहीं करेगा। अगर हम चाहते हैं कि यह टेक्स्ट को छवि या फ़्लोटेड ऑब्जेक्ट के चारों ओर लपेटना चाहिए, तो हम उसी मूल्य का उपयोग कर सकते हैं [2 9] क्लिप-पथ । प्रयोग करें [2 9] आकार मार्जिन आकार पथ और सामग्री को लपेटने के बीच व्हाइटस्पेस जोड़ने के लिए। पर एक नज़र डालें सामान & amp; बकवास साइट को एक केंद्रीय छवि के चारों ओर पाठ लपेटने के लिए कैसे सीएसएस आकार का उपयोग किया जाता है।

फ़ायरफ़ॉक्स में ए आकार-पथ संपादक देव उपकरण पैनल के भीतर, जो विशेष रूप से जटिल आकारों के साथ काम करने के लिए उपयोगी है। हालांकि, सावधानी के साथ उपयोग करें। पाठ के अनुच्छेद के अग्रणी किनारे को लपेटना कलात्मक प्रभाव के लिए बहुत अच्छा है, लेकिन उपयोगकर्ता अनुभव के लिए हमेशा अच्छा नहीं होता है। कॉम्प्लेक्स जंजीर आकार पाठ के ब्लॉक को पढ़ने के लिए कठिन बना सकते हैं। महत्वपूर्ण सामग्री के लिए, आप स्पष्ट करना चाहते हैं।

07. स्क्रॉल स्नैपिंग [3 9]

(छवि क्रेडिट: कोडपेन - मिशेल बार्कर) [1 9]

कई वेबसाइटें एक स्लिम, देशी ऐप जैसी स्क्रॉल अनुभव प्रदान करने के लिए जावास्क्रिप्ट पुस्तकालयों का लाभ उठाती हैं, जहां उपयोगकर्ता स्क्रॉल के रूप में इंगित करने के लिए "स्नैप" सामग्री "स्नैप"। अब, स्क्रॉल स्नैप विनिर्देश के साथ, हम अपनी सीएसएस फ़ाइल के भीतर यह सही कर सकते हैं - आपके पृष्ठ को ब्लोट करने के लिए भारी जेएस मॉड्यूल में आयात करने की आवश्यकता नहीं है!

स्क्रॉल-स्नैपिंग को लागू करने के लिए हमें हमारे स्क्रॉल कंटेनर के रूप में कार्य करने के लिए एक तत्व की आवश्यकता है। कंटेनर के प्रत्यक्ष बच्चे उन बिंदुओं को निर्देशित करते हैं जिन्हें स्नैप क्षेत्र के भीतर विभिन्न तरीकों से गठबंधन किया जा सकता है।

स्क्रॉल स्नैपिंग एक और नए सीएसएस संपत्ति मूल्य के साथ संयुक्त होने पर और भी प्रभावी हो सकता है - [2 9] स्थिति: चिपचिपा

। यह स्थिति अपने कंटेनर के भीतर स्क्रॉल करते समय एक निर्दिष्ट स्थिति में एक तत्व "चिपक जाती है" - एक और व्यवहार जो पहले जावास्क्रिप्ट के साथ संभव था। स्थिति के साथ इस स्क्रॉल स्नैप को देखें: चिपचिपा और चौराहेबसेवर उदाहरण ।

08. सीएसएस ग्रिड और लेआउट [3 9]

फ्रंट एंड डेवलपर्स ने उस समय उपयोग करने के लिए जो भी टूल उपलब्ध थे, उसके साथ लेआउट को हैक किया है - हाल ही में फ्लेक्सबॉक्स, जो आधुनिक ग्रिड सिस्टम का उपयोग करता है। लेकिन फ्लेक्सबॉक्स को सख्त ग्रिड बनाने के लिए कभी डिज़ाइन नहीं किया गया था - इसका उद्देश्य लचीलापन है!

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

सीएसएस ग्रिड का उपयोग कैसे करें [3 9]

ग्रिड को ग्रिड कंटेनर के रूप में कार्य करने के लिए, ग्रिड पर सेट डिस्प्ले प्रॉपर्टी वैल्यू सेट के साथ एक तत्व की आवश्यकता होती है। ग्रिड कंटेनर के प्रत्यक्ष बच्चे वे आइटम हैं जिन्हें ग्रिड पर रखा जा सकता है। हम गुणों का उपयोग करते हैं [2 9] ग्रिड-टेम्पलेट-पंक्तियां

तथा [2 9] ग्रिड-टेम्पलेट-कॉलम ग्रिड के ट्रैक (पंक्तियों और कॉलम) को परिभाषित करने के लिए, और [2 9] स्तंभ-गैप तथा [2 9] पंक्ति-अंतर गटर को परिभाषित करने के लिए (ट्रैक के बीच अंतराल)।

 .grid {
प्रदर्शन: ग्रिड;
ग्रिड-टेम्पलेट-कॉलम: दोहराएं (4, 1 एफआर);
ग्रिड-टेम्पलेट-पंक्तियां: दोहराएं (4, 200 पीएक्स);
गैप: 20 पीएक्स;
} 

हम उपयोग कर रहे हैं [2 9] दोहराएं ()

लंबे समय तक एक विकल्प के रूप में कोड को अधिक संक्षिप्त रखने के लिए कार्य करें (उदा। [2 9] ग्रिड-टेम्पलेट-कॉलम: 1fr 1fr 1fr 1fr )। यह उदाहरण भी शॉर्टेंड का उपयोग करता है [2 9] अन्तर के लिये [2 9] पंक्ति-अंतर तथा [2 9] स्तंभ-गैप ।

उपर्युक्त कोड हमें चार पंक्ति ट्रैक, प्रत्येक 100px उच्च, और चार कॉलम ट्रैक देता है जो प्रत्येक एफआर इकाई का उपयोग करके उपलब्ध स्थान के बराबर अनुपात को भर देता है।

यह ध्यान देने योग्य है कि ग्रिड ट्रैक बनाने का यह एकमात्र तरीका नहीं है। ग्रिड आइटम रखकर निहित ट्रैक भी बनाए जा सकते हैं। यदि आप ग्रिड का उपयोग कर रहे हैं, तो इसके बारे में थोड़ा सा पढ़ने के लिए उपयोगी है, क्योंकि यह विभिन्न स्थितियों के तहत ग्रिड कैसे व्यवहार करता है, इसकी गहरी समझ प्राप्त करने के लिए भुगतान करता है, और एक लेआउट को कोडिंग को आसान बना सकता है।

हम ग्रिड लाइन नंबरों को संदर्भित करके ग्रिड पर आइटम रख सकते हैं, जो प्रत्येक ट्रैक के बीच बैठे संख्यात्मक रेखाएं हैं। यहां, हम शॉर्टेंड का उपयोग कर रहे हैं [2 9] ग्रिड स्तंभ

तथा [2 9] ग्रिड पंक्ति के लिये [2 9] ग्रिड-कॉलम-स्टार्ट , [2 9] ग्रिड स्तंभ-अंत , [2 9] ग्रिड-पंक्ति-प्रारंभ तथा [2 9] ग्रिड-पंक्ति-अंत । ये उस ब्राउज़र को बताते हैं कि हमारे आइटम को प्रत्येक अक्ष पर शुरू और समाप्त होना चाहिए।

 .Tem {
ग्रिड कॉलम: 1/4;
ग्रिड-पंक्ति: 2;
} 

ग्रिड हमें वस्तुओं को रखने के कई अलग-अलग तरीकों से प्रदान करता है: हम इसके बजाय हमारी ग्रिड लाइनों का नाम दे सकते हैं:

 .grid {
प्रदर्शन: ग्रिड;
ग्रिड-टेम्पलेट-कॉलम: [छवि-प्रारंभ] 1fr
 1 एफआर 1 एफआर [छवि-प्रारंभ] 1f;
ग्रिड-टेम्पलेट-पंक्तियां: 200px [छवि-प्रारंभ]
 200px 200px [छवि-अंत] 200px;
गैप: 20 पीएक्स;
} 

वैकल्पिक रूप से, [2 9] ग्रिड टेम्पलेट क्षेत्र

संपत्ति हमें "ड्रॉ" को टेक्स्ट के साथ एक ग्रिड लेआउट देता है।

 .grid {
प्रदर्शन: ग्रिड;
ग्रिड-टेम्पलेट-कॉलम: दोहराएं (4, 1 एफआर);
ग्रिड-टेम्पलेट-पंक्तियां: दोहराएं (4, 200 पीएक्स);
गैप: 20 पीएक्स;
ग्रिड-टेम्पलेट-क्षेत्र:
'।' । । । '
'छवि छवि छवि।'
'छवि छवि छवि।'
'।' । । । '
} 

इन विधियों में से किसी एक का उपयोग करके, हम ग्रिड आइटम रखने पर संबंधित ग्रिड क्षेत्र को संदर्भित कर सकते हैं:

। इमेज {
ग्रिड-क्षेत्र: छवि;
} 

[40 9] यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित किया गया था

[40 9] वेब डिजाइनर [40 9] । [40 9] अब अंक 2 9 0 खरीदें।

• 2019 में 10 सर्वश्रेष्ठ सीएसएस ढांचे
• सीएसएस के साथ एसवीजी में एनीमेशन कैसे जोड़ें
• 2019 में स्मार्ट काम करने में आपकी सहायता के लिए 52 वेब डिज़ाइन टूल्स