विषय
- 01. छवियों को साइट रंग योजनाओं से मिलाएं
- 02. ग्रिड की अंतिम पंक्ति में समान रूप से स्थान साझा करें
- 03. बॉक्स-छाया के साथ कण एनिमेशन बनाएं
- 04. ट्रांसफ़ॉर्म के साथ पॉलीहेड्रा को चेतन करें
- 05. पोजिशनिंग के लिए मास्टर 'कैल्क ()'
- 06. 'बॉक्स-साइज़िंग' के साथ बॉक्स मॉडल को समझदार बनाएं
- 07. सीएसएस के साथ लंबवत केंद्र
- 08. संबंधित वस्तुओं के एक बैंक को लक्षित करें
- 09. नियंत्रण हाइफ़नेशन
- 10. मोड लिखने का लाभ उठाएं
- 11. असामान्य तरीकों से ग्रेडियेंट का प्रयोग करें
- 12. लिंक्स पर स्ट्रिंग-मैचिंग का प्रयोग करें
- 13. अपने लिए FOUT काम करें
- 14. पृष्ठभूमि के लिए एसवीजी का अन्वेषण करें
- 15. 3D ट्रांज़िशन वाले उपयोगकर्ताओं पर फ़ोकस करें
- 16. सीएसएस और गणित के साथ गोलाकार मेनू बनाएं
- 17. होवर पर एनिमेट लिंक
- 18. सरल कीफ़्रेम एनिमेशन बनाएं
- 19. शैडो के साथ फ्लोटिंग 3डी इफेक्ट बनाएं
- 20. 'लक्ष्य' का उपयोग करके पृष्ठ तत्वों को अपडेट करें
- 21. सूक्ष्म एनिमेशन के साथ प्रतिक्रिया दें
- 22. 'इच्छा-चेतन' के लिए तैयार करें
- 23. इनपुट फ़ील्ड का मानवीकरण करें
- 24. CSS एनिमेशन को रोकें और चलाएं
- 25. CSS वेरिएबल का उपयोग न करें
किसी भी तकनीक के साथ किसी बिंदु पर, ऐसा लगता है कि जो कुछ भी किया जा सकता है वह किया जा चुका है। जब कोई चीज बिल्कुल नई और चमकदार नहीं रह जाती है, तो रुचि कम हो जाती है और ध्यान अगली बड़ी चीज की ओर आकर्षित होता है। वेब उद्योग में अक्सर ऐसा होता रहा है, जो तकनीक के एक निश्चित पहलू से पहले, जल्दी या बाद में, इसे सांसारिक रूप से आरोपित करने के लिए बहुत उत्साहित होने की संभावना है।
जब सीएसएस पहली बार दिखाई दिया, तो यह क्रांतिकारी था, और समय के साथ यह डिजाइनरों को लचीला, कसकर तैयार किए गए और सुंदर वेब पेज लेआउट बनाने में सक्षम बनाने के लिए विकसित हुआ है। हालांकि, हाल ही में, विभिन्न हलकों से सुझाव दिया गया है कि सीएसएस थक गया है और शायद धूप में इसका समय चला गया है।
मैं यह दिखाना चाहता हूं कि सीएसएस की दुनिया में अभी भी बहुत उत्साह और जीवन है, चाहे वह अत्याधुनिक गुणों में हो, जिसे आपने अभी तक नहीं खोजा हो, या सीएसएस के एक पहलू का उपयोग करके जिस तरह से आपने पहले विचार नहीं किया था।
यहाँ उद्योग के कुछ शीर्ष CSS विशेषज्ञों के कुछ सुझाव दिए गए हैं।
(नोट: इस सुविधा की कुछ तकनीकें अत्याधुनिक हैं और सभी ब्राउज़रों में पूरी तरह से समर्थित नहीं हो सकती हैं। किसी भी काम को लाइव करने से पहले पूरी तरह से परीक्षण करें और सुनिश्चित करें कि कमियां हैं।)
01. छवियों को साइट रंग योजनाओं से मिलाएं
क्रिस्टोफर श्मिट, सम्मेलन आयोजक
सम्मेलनों की अपनी रंग योजनाएं होती हैं और कई वक्ताओं के साथ, पोर्ट्रेट के प्रबंधन के लिए कार्यप्रवाह जटिल हो सकता है। मैन्युअल रूप से फ़िल्टर लागू करना स्केल नहीं करता है और आप पर निर्भर करता है कि आपके पास एक विशिष्ट फ़ोटोशॉप एक्शन तक पहुंच है। अब मैं हाई रेस ग्रेस्केल पीएनजी का उपयोग करता हूं और सीएसएस फिल्टर का उपयोग करके टोन जोड़ता हूं। यह मुझे किसी भी चित्र को किसी घटना की योजना से मिलाने और कई विषयों में छवियों का पुन: उपयोग करने में सक्षम बनाता है। मुझे बस प्रत्येक के लिए एक नया सीएसएस नियम चाहिए। एक डेमो देखें।
02. ग्रिड की अंतिम पंक्ति में समान रूप से स्थान साझा करें
स्टीफन हे, डिजाइनर और लेखक
यदि आपके पास ग्रिड में प्रदर्शित होने के लिए अज्ञात संख्या में आइटम हैं, तो आप अंतिम पंक्ति को समान रूप से विभाजित करने के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं। इसलिए यदि केवल एक ही आइटम है, तो वह पूरी पंक्ति पर कब्जा कर लेगा; यदि दो आइटम हैं, तो पंक्ति आधे में विभाजित हो जाएगी, और इसी तरह। एक डेमो देखें।
03. बॉक्स-छाया के साथ कण एनिमेशन बनाएं
एना ट्यूडर, कोडर और गणित कट्टरपंथी
मिलाकर डब्बे की छाया कुछ गणित और Sass के साथ, आप 2D वक्रों को ग्राफ़ कर सकते हैं, 3D गति का अनुकरण कर सकते हैं और पागल कण एनिमेशन बना सकते हैं जो हर कोई कैनवास वाले के लिए गलती करने वाला है! एक डेमो देखें, और दूसरा।
04. ट्रांसफ़ॉर्म के साथ पॉलीहेड्रा को चेतन करें
एना ट्यूडर, कोडर और गणित कट्टरपंथी
आपने शायद बॉर्डर के साथ बनाए गए शुद्ध सीएसएस पॉलीगॉन देखे होंगे, लेकिन हमारे पास इससे कहीं अधिक शक्तिशाली टूल है परिवर्तन संपत्ति। नेस्टेड तत्वों पर ट्रांसफ़ॉर्म को चेन और लागू करना हमें छवि पृष्ठभूमि या सीमाओं और पारदर्शी अंदरूनी हिस्सों के साथ जटिल बहुभुज बनाने की अनुमति देता है। 3D ट्रांसफ़ॉर्म का उपयोग करके, हम इन 2D आकृतियों को पॉलीहेड्रा में संयोजित कर सकते हैं और ठोस को इस तरह से मर्ज, प्रकट, विस्फोट या पुनर्संयोजित कर सकते हैं कि आसानी से WebGL के लिए गलत हो जाए। एक डेमो देखें।
05. पोजिशनिंग के लिए मास्टर 'कैल्क ()'
एना ट्यूडर, कोडर और गणित कट्टरपंथी
मैं प्यार करता था कैल्क () जिस क्षण से मैंने इसे खोजा। यह मार्जिन, पैडिंग या आयामों को वश में करने के लिए उपयोगी है, और जब स्थिति या पृष्ठभूमि को आकार देने के लिए उपयोग किया जाता है, तो ग्रेडिएंट या ट्रांसफ़ॉर्म के अंदर, और न केवल उन्हीं पुरानी इकाइयों के साथ, बल्कि नए और शांत व्यूपोर्ट वाले के साथ भी उपयोग किया जाता है।
06. 'बॉक्स-साइज़िंग' के साथ बॉक्स मॉडल को समझदार बनाएं
सॉयर होलेनशेड, ओक स्टूडियोज देव और डिजाइनर
प्रयोग करें बॉक्स आकार अपने विवेक को बचाने के लिए। इसके बिना, 250px की परिभाषित चौड़ाई और 25px की पैडिंग वाला एक तत्व 300px की चौड़ाई में संयोजित हो जाता है, जिससे पिक्सेल और प्रतिशत को मिलाना कठिन हो जाता है। साथ में बॉक्स-आकार:बॉर्डर-बॉक्स इसके बजाय सीमाओं और पैडिंग को परिभाषित चौड़ाई के भीतर रखा गया है।
07. सीएसएस के साथ लंबवत केंद्र
ट्रेंट वाल्टन, परवेल संस्थापक
ऐतिहासिक रूप से, सीएसएस के साथ किसी चीज़ को लंबवत रूप से केन्द्रित करना कठिन रहा है, जैसे कि यदि आपके पास आसन्न पाठ वाली एक छवि है जिसे आप लंबवत रूप से संरेखित करना चाहते हैं। स्टम्पिंग और कोसने के बजाय, संरेखण समस्याओं से निपटने के लिए फ्लेक्सबॉक्स का उपयोग करें। एक डेमो देखें।
08. संबंधित वस्तुओं के एक बैंक को लक्षित करें
जोनाथन स्माइली, ज़र्ब पार्टनर और डिज़ाइन लीड
प्रत्येक वर्ग के लिए सामान्य विशेषताओं को संलग्न करने के बजाय, संबंधित वस्तुओं के एक बड़े बैंक को लक्षित करने के लिए, वर्ग नामों पर अनुमानित विशेषता चयनकर्ताओं का उपयोग करके सीएसएस लाइन वजन को शेव करें। उदाहरण के लिए ... [class*="-block-grid-"] { } ... निम्न को लक्षित करेगा: .small-block-grid-3 .large-block-grid-5
09. नियंत्रण हाइफ़नेशन
सविद स्टोरी, ओपन वेब एडवोकेट
हाइफ़नेशन को प्रिंट में मान लिया जाता है, और कुछ डेवलपर इसका उपयोग करते हैं हाइफ़न संपत्ति ऑनलाइन है, लेकिन कुछ अन्य संपत्तियों के बारे में जानते हैं जो बेहतर नियंत्रण प्रदान करती हैं। यदि आप सावधान नहीं हैं, तो आपको हाइफ़नेशन सीढ़ी मिलती है जहां कई पंक्तियों में हाइफ़न का उपयोग किया जाता है। अंगूठे का एक सामान्य नियम एक पंक्ति में दो से अधिक नहीं है, जिसे आप उपयोग करके नियंत्रित कर सकते हैं hyphenate-limit-lines. साथ ही, hyphenate-limit-chars आपको हाइफ़न ब्रेक से पहले और बाद में वर्णों की न्यूनतम संख्या के साथ, हाइफ़न किए जाने वाले शब्द की न्यूनतम लंबाई निर्दिष्ट करने में सक्षम बनाता है।
10. मोड लिखने का लाभ उठाएं
डेविड स्टोरी, ओपन वेब एडवोकेट
लेखन मोड आपको उस दिशा को परिभाषित करने में सक्षम बनाता है जिसमें पाठ प्रवाहित होता है। कुछ पूर्वी एशियाई पाठ लंबवत रूप से लिखे गए हैं, दाईं से बाईं ओर बढ़ने वाली रेखाएं, निर्दिष्ट हैं लेखन-मोड: लंबवत-आरएल (टीबी-आरएलई आईई में)। यूरोपीय लेखन प्रणालियों में लंबवत पाठ का वास्तव में उपयोग नहीं किया जाता है, लेकिन जब आपके पास क्षैतिज स्थान सीमित होता है तो तालिका शीर्षकों के लिए आसान हो सकता है।
11. असामान्य तरीकों से ग्रेडियेंट का प्रयोग करें
रूथ जॉन, डिजाइनर
बॉर्डर और बुलेट के साथ उपयोग किए जाने पर बैकग्राउंड ग्रेडिएंट बहुत अच्छे लग सकते हैं। मैं अपने ब्लॉग पर दोनों का उपयोग करता हूं और प्रीप्रोसेसर के साथ पुन: उपयोग किए गए कोड के साथ एक मिक्सिन को कॉल कर सकता हूं, ताकि इसे मैन्युअल रूप से दोहराया न जाए। अति पागल मत बनो क्योंकि ग्रेडिएंट प्रोसेसर-भारी हो सकते हैं। सूची बुलेट के लिए एससीएसएस मिश्रण:
@मिक्सिन ग्रेडेड बुलेट ($ रंग) {पृष्ठभूमि-छवि: रैखिक-ढाल (बाएं, हल्का ($ रंग, 15%) 10 पीएक्स, $ रंग 11 पीएक्स, $ रंग 20 पीएक्स, गहरा ($ रंग, 15%) 21 पीएक्स, गहरा ($ रंग) , 15%) 30px, पारदर्शी 31px); }
12. लिंक्स पर स्ट्रिंग-मैचिंग का प्रयोग करें
रूथ जॉन, डिजाइनर
अपने ब्लॉग पर, मैंने सामाजिक चिह्नों को स्टाइल करने के लिए स्ट्रिंग-मिलान के साथ CSS विशेषता चयनकर्ताओं का उपयोग किया है। ये मेरे पूरे ब्लॉग में दिखाई देते हैं, कभी टेक्स्ट के साथ और कभी बिना, लेकिन हमेशा एक आइकन के साथ। सही सामाजिक चिह्न के साथ सही लिंक को स्टाइल करने के लिए, मैं पर एक स्ट्रिंग मिलान का उपयोग करता हूं href लंगर तत्व की विशेषता। मैं उपयोग करता हूं *= इतना href एंकर तत्व पर केवल मेरे द्वारा निर्दिष्ट स्ट्रिंग को समाहित करना है।
/* सभी सामाजिक लिंक के लिए */ .सामाजिक a: पहले {प्रदर्शन: इनलाइन-ब्लॉक; पैडिंग-राइट: 30px; फ़ॉन्ट-परिवार: 'FontAwesome';} /*प्रत्येक विशिष्ट लिंक*/ .सामाजिक a[href*="twitter"]: {सामग्री:"f099" से पहले; रंग:#52ae9f;} .सामाजिक a[href*="github"]: {सामग्री:"f09b" से पहले; रंग:#5f2e44;} .सामाजिक a[href*="फ़ीड"]: {सामग्री:"f09e" से पहले; रंग:#बी४७७४२;}
13. अपने लिए FOUT काम करें
जेसन पैमेंटल, एच + डब्ल्यू डिजाइन में प्रिंसिपल
वेब इस आधार पर बनाया गया है कि उसे सामग्री वितरित करनी चाहिए, भले ही ब्राउज़र ब्लिंग प्रस्तुत न कर सके। धीमी गति से लोड होने वाले वेब फोंट निराशाजनक हो सकते हैं, FOUT (फ्लैश ऑफ अनस्टाइल टेक्स्ट) नेविगेशन के रूप में झकझोरता है और फोंट डाउनलोड करते समय टेक्स्ट रीफ्लो होता है। Google और टाइपकिट एक उत्तर प्रदान करते हैं: वेब-फ़ॉन्ट लोडर। फोंट की लोडिंग स्थिति के आधार पर एक पृष्ठ में कक्षाओं को इंजेक्ट करके, आप उन वर्गों के साथ कम से कम रिफ्लो रखने के लिए फॉलबैक स्टाइल कर सकते हैं, साथ ही वेबकिट के 'अदृश्य सामग्री' सिंड्रोम को भी मिटा सकते हैं। एक डेमो देखें।
14. पृष्ठभूमि के लिए एसवीजी का अन्वेषण करें
एमिल ब्योर्कलंड, मेंवेब डेवलपर का उपयोग करें
एसवीजी समर्थन के बिना अब एकमात्र ब्राउज़र आईई 8 और नीचे और एंड्रॉइड 2 वेबकिट हैं, और इसलिए सीएसएस में पृष्ठभूमि के लिए एसवीजी का उपयोग करना संभव है, खासकर पीएनजी फ़ॉलबैक समाधान के साथ, जैसे ग्रंटिकॉन। एसवीजी को सीएसएस द्वारा स्टाइल किया जा सकता है, और एसवीजी से सीएसएस गुणों (फिल्टर!) का दिलचस्प ब्लीड-थ्रू है जिसे हम एचटीएमएल पर लागू कर सकते हैं।
15. 3D ट्रांज़िशन वाले उपयोगकर्ताओं पर फ़ोकस करें
एमिल ब्योर्कलंड, मेंवेब डेवलपर का उपयोग करें
3D रूपांतरणों का उपयोग करना और उनका उपयोग करना z के आयाम उपयोगकर्ता इंटरफेस में वास्तव में उपयोगी हो सकता है, विशेष रूप से सामग्री को छिपाने/दिखाने या ढहने/विस्तारित करने के लिए। उन स्थितियों में, 2D ट्रांज़िशन में वापस आना, या बिल्कुल भी ट्रांज़िशन नहीं होना काफी आसान है। यह एक ऐसा क्षेत्र है जहां थोड़ा प्रगतिशील सुधार बहुत आगे बढ़ सकता है।
16. सीएसएस और गणित के साथ गोलाकार मेनू बनाएं
सारा सूइदान, फ्रंटएंड डेवलपर
मोबाइल ऐप में सर्कुलर मेनू लोकप्रिय हैं, और आप एक साधारण सर्कुलर मेनू बनाने के लिए CSS ट्रांसफ़ॉर्म और ट्रांज़िशन का उपयोग कर सकते हैं। इस मेनू को ऊपर की ओर या नीचे की ओर खुलने वाला मेनू बनाने के लिए भी संशोधित और अनुकूलित किया जा सकता है। सीएसएस में किसी आइटम का तिरछे अनुवाद करने का कोई सीधा तरीका नहीं है, लेकिन आप उस सर्कल के त्रिज्या के मान का उपयोग कर सकते हैं जिस पर आप आइटम रखना चाहते हैं, और एक सरल गणितीय नियम लागू कर सकते हैं ताकि क्षैतिज और लंबवत अनुवाद मानों की गणना की जा सके। अनुवादएक्स () तथा अनुवादवाई () कार्य। इस तरह, आप a . के साथ समाप्त होते हैं विकर्ण मेनू आइटम को सर्कल पर सही स्थिति में ले जाने के लिए अनुवाद। मेन्यू को बंद/खोलने वाले क्लिक इवेंट को जावास्क्रिप्ट का उपयोग करके नियंत्रित किया जा सकता है, या आप इसे एक कदम आगे ले जा सकते हैं और सीएसएस चेकबॉक्स हैक का उपयोग करके केवल सीएसएस मेनू प्राप्त कर सकते हैं। मेरे डेमो में, मैं जावास्क्रिप्ट और एचटीएमएल 5 क्लासलिस्ट एपीआई का उपयोग करता हूं, जो सभी ब्राउज़रों में समर्थित नहीं है, इसलिए आपको इसे काम करने के लिए एक आधुनिक ब्राउज़र में डेमो देखना होगा, या क्लासलिस्ट एपीआई का उपयोग करने के बजाय jQuery कोड को अनकम्मेंट करना होगा। कोड।
एक डेमो और पूरा ट्यूटोरियल देखें। सीएसएस चेकबॉक्स हैक उदाहरण।
17. होवर पर एनिमेट लिंक
पॉल लॉयड, द गार्जियन इंटरेक्शन डिज़ाइनर
किसी कार्य को करने या महत्वपूर्ण जानकारी प्रदान करने के लिए होवर राज्यों पर भरोसा नहीं किया जाना चाहिए, लेकिन आप अभी भी माउस-आधारित उपयोगकर्ताओं के लिए इंटरफ़ेस बढ़ा सकते हैं। 24ways.org पर, जब आप पिछले/अगले नेविगेशन में लिंक पर होवर करते हैं, तो हम लेख शीर्षक प्रकट करते हैं। यह a . बनाकर हासिल किया गया था ::के पश्चात छद्म-तत्व जिसमें उत्पन्न सामग्री होती है जो a . के मान से प्राप्त होती है डेटा- विशेषता, एक सीएसएस संक्रमण के साथ इसे होवर पर देखने के लिए लागू किया गया है। एक डेमो देखें।
18. सरल कीफ़्रेम एनिमेशन बनाएं
पॉल लॉयड, द गार्जियन इंटरेक्शन डिज़ाइनर
24ways.org पर, हमने सारांश में एनिमेटेड कॉर्नर फ्लैप जोड़े, जो होवर पर खुलते थे। यह के संयोजन द्वारा किया गया था @कीफ्रेम एनीमेशन संपत्ति के साथ नियम, स्प्राइट-आधारित एनीमेशन प्राप्त करने के लिए पृष्ठभूमि छवि की स्थिति को बदलना। चाल यह है कि आपके एनीमेशन स्प्राइट में आपके पास कितने फ्रेम हैं, इसकी घोषणा करें कदम() मूल्य। एक डेमो देखें।
19. शैडो के साथ फ्लोटिंग 3डी इफेक्ट बनाएं
कैथरीन फ़ार्मन, हैप्पी कॉग डेवलपर
एक हालिया प्रोजेक्ट के लिए नीचे एक गोल छाया के साथ एक फ्लोटिंग उत्पाद फोटो की आवश्यकता होती है, जिससे स्क्रीन को बंद करने का 3D प्रभाव पैदा होता है। छाया कई CSS3 सुविधाओं का उपयोग करती है: बॉर्डर-त्रिज्या अल्फा पारदर्शिता और डब्बे की छाया. यह उत्पाद ग्रिड के लिए अच्छी तरह से काम करता है, होमपेज नायक में शोकेस इमेजरी, या स्क्यूओमॉर्फिक बेंट के साथ किसी भी सनकी डिजाइन के लिए। एक डेमो देखें।
20. 'लक्ष्य' का उपयोग करके पृष्ठ तत्वों को अपडेट करें
साइमन मैडिन, यहां वरिष्ठ वेब डेवलपर
CSS सामान्य अर्थों में एक प्रोग्रामिंग भाषा नहीं है, लेकिन आप अभी भी जावास्क्रिप्ट पर वापस आए बिना चतुर चीजें कर सकते हैं। उदाहरण के लिए, :लक्ष्य छद्म वर्ग उन तत्वों पर लागू होता है जो एक क्लिक किए गए लिंक का लक्ष्य होते हैं।
आप इसका उपयोग किसी पृष्ठ की स्थिति को परिभाषित करने के लिए कर सकते हैं, बहुत से तत्वों वाले माता-पिता को लक्षित कर सकते हैं, और आपके लिंक एक क्लिक के साथ सभी बच्चों के रूप और लेआउट को नियंत्रित करने का साधन बन जाते हैं। एक डेमो देखें।
21. सूक्ष्म एनिमेशन के साथ प्रतिक्रिया दें
नील रेनिकर, डिजाइनर और डेवलपर
सीएसएस छद्म तत्व ::इससे पहले तथा ::के पश्चात CSS ट्रांज़िशन के साथ, रमणीय एनीमेशन सक्षम कर सकता है जो माउस उपयोगकर्ताओं को सूक्ष्म प्रतिक्रिया प्रदान करता है। उदाहरण के लिए, एक छद्म तत्व के भीतर एक सीएसएस तीर बनाएं, छद्म तत्व में संक्रमण लागू करें (ट्रांज़िशन: सभी ईज़-इन-आउट .15s;), और फिर इसमें एक साधारण लेआउट परिवर्तन जोड़ें :होवर छद्म वर्ग (जैसे संशोधन am मार्जिन टॉप) एक डेमो देखें।
22. 'इच्छा-चेतन' के लिए तैयार करें
पॉल लुईस, कोडर और क्रोम डेवलपर संबंध टीम के सदस्य
यदि आपने उपयोग किया है -वेबकिट-ट्रांसफॉर्म: ट्रांसलेटजेड (0) आपके पृष्ठों को जादुई रूप से तेज़ बनाने के लिए, हैक, जो कई ब्राउज़रों में बस एक नई कंपोज़िटर परत बनाता है, द्वारा प्रतिस्थापित किया जा रहा है इच्छा-चेतन. जल्द ही, आप ब्राउज़र को यह बताने में सक्षम होंगे कि आप किसी तत्व (उसकी स्थिति, आकार, सामग्री या स्क्रॉल स्थिति) के बारे में क्या बदलने की योजना बना रहे हैं और ब्राउज़र हुड के तहत सही अनुकूलन लागू करेगा। अधिक जानकारी।
23. इनपुट फ़ील्ड का मानवीकरण करें
यारोन स्कोएन, मेड फॉर ह्यूमन्स के संस्थापक
उपयोगकर्ताओं के साथ इंटरैक्ट करने वाले तत्वों में त्वरित एनिमेशन जोड़ने से इंटरफ़ेस कम कम्प्यूटरी महसूस होता है। इनपुट फ़ील्ड के साथ, एक डालने का प्रयास करें संक्रमण कॉल भीतर, इसलिए जब भी आप इसे फोकस या अनफोकस करते हैं, तो एक सहज संक्रमण होता है।
इनपुट, टेक्स्टरेरा {-मोज़-ट्रांज़िशन: सभी 0.2s आसानी से बाहर; -ओ-संक्रमण: सभी 0.2s आसानी से बाहर; -वेबकिट-संक्रमण: सभी 0.2s आसानी से बाहर; -एमएस-संक्रमण: सभी 0.2s आसानी से बाहर; संक्रमण: सभी 0.2s आसानी से बाहर;
24. CSS एनिमेशन को रोकें और चलाएं
वैल हेड, डिजाइनर और सलाहकार
आप CSS एनिमेशन को बदलकर 'रोकें' और 'चलाएं' कर सकते हैं एनिमेशन-प्ले-स्टेट संपत्ति। इसे 'रोके गए' पर सेट करने से आपका एनिमेशन तब तक रुका रहता है, जब तक आप उसमें बदलाव नहीं करते एनिमेशन-प्ले-स्टेट सेवा मेरे दौड़ना, उदाहरण के लिए होवर पर।
.animating_thing {एनिमेशन: स्पिन 10s रैखिक अनंत; एनिमेशन-प्ले-स्टेट: रुका हुआ; }. एनिमेटिंग_थिंग: होवर {एनीमेशन-प्ले-स्टेट: रनिंग; }
25. CSS वेरिएबल का उपयोग न करें
डेव शीया, डिजाइनर और लेखक
हम अंत में CSS चर प्राप्त कर रहे हैं, उदाहरण के लिए एक रंग का हेक्स मान एक बार लिखना और इसे स्टाइलशीट के माध्यम से संदर्भित करना। लेकिन आधिकारिक युक्ति वर्बोज़ है, वाक्यात्मक जटिलता जोड़ती है, अत्यधिक कार्यक्षमता प्रदान करती है, और अधिकांश ब्राउज़रों द्वारा काफी हद तक असमर्थित है। एक ऐसे युग में जहां Sass व्यापक रूप से लोकप्रिय है और कस्टम फ़ंक्शंस जैसे शक्तिशाली प्रोग्रामिंग तर्क के साथ चर से परे चला जाता है और यदि/अन्य कथन, आधिकारिक कल्पना बहुत कम आती है।
उम्मीद है कि इन शीर्ष युक्तियों ने सीएसएस के बारे में आपके दृष्टिकोण और वेब विकास और डिजाइन में इसका प्रतिनिधित्व करने वाली संभावनाओं को नवीनीकृत कर दिया है। किसी भी कार्य को लाइव करने से पहले ब्राउज़र समर्थन की जांच करने के लिए इनमें से किसी भी तकनीक का अच्छी तरह से परीक्षण करना न भूलें।
शब्दों: क्रेग ग्रैनेल चित्रण: माइक चिपरफ़ील्ड
यह आलेख मूल रूप से नेट पत्रिका अंक २५३ में छपा था।
