15 उपयोगी सीएसएस ट्रिक्स जिसे आपने अनदेखा कर दिया होगा

यदि आप कुछ समय के लिए एक फ्रंटएंड वेब डेवलपर रहे हैं, तो एक उच्च संभावना है कि आपके पास एक ऐसा क्षण है जब आप यह पता लगाने की कोशिश कर रहे थे कि किसी चीज़ को कैसे कोड किया जाए और थोड़े से googling के बाद एहसास हुआ, कि “उसके लिए CSS है”. यदि आप नहीं थे, तो आप के बारे में अच्छी तरह से कर रहे हैं.

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

1. नंबरिंग हेडिंग और सबहेडिंग

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

2. स्पाइस अप प्लेन अंडरलाइन्स

   कभी-कभी हम एक ठोस के बजाय एक अच्छी बिंदीदार या धराशायी रेखा के साथ रेखांकित करना चाहते हैं। चूंकि उसके लिए कोई विकल्प नहीं है, इसलिए हम समझौता करते हैं सीमा-नीचे. परंतु सीमा-नीचे एक अच्छा समाधान नहीं है यदि आप जिस पाठ को रेखांकित कर रहे हैं.

   CSS3 ने पाठ सजावट के लिए एक नहीं बल्कि तीन नए गुणों को निर्दिष्ट किया text-decoration रंग, text-decoration ऑनलाइन, तथा text-decoration शैली जिसे अच्छे पुराने में संक्षिप्त किया जा सकता है text-decoration.

   आप उन लोगों को स्टाइल करने के लिए अंडरलाइन, ओवरलाइन, यहां तक ​​कि टेक्स्ट ब्लिंक, और बहुत कुछ कर सकते हैं। अप्रैल 2015 तक केवल फ़ायरफ़ॉक्स इस संपत्ति का समर्थन करता है, लेकिन आप सक्षम कर सकते हैं “प्रायोगिक वेब प्लेटफ़ॉर्म सुविधाएँ” क्रोम पर इसका उपयोग करने के लिए.

3. एक उद्धरण उद्धृत करना

   सबसे पहले, छोटे उद्धरणों के लिए सही घुंघराले उद्धरण टाइप करने से परेशान होने की आवश्यकता नहीं है क्योंकि इसके लिए HTML है: a टैग जो इनलाइन कोटेशन को इंगित करता है.

   टैग एकल उद्धरण के साथ आंतरिक उद्धरणों को उद्धृत करने का भी ध्यान रखता है। तो, कहाँ है “उसके लिए 'सीएसएस' है” इसमें पल?

   मान लें कि आप डिफ़ॉल्ट दोहरे उद्धरण नहीं चाहते हैं या आपके पास एक से अधिक स्तर के नेस्टेड उद्धरण हैं, तो आप CSS2 का उपयोग करके CSS के साथ उद्धरण तत्व के लिए अपनी उद्धरण प्राथमिकताएं निर्धारित कर सकते हैं उल्लेख। उद्धरण संपत्ति.

4. अनियंत्रित टेबल का प्रबंधन

   आप प्रति सेल भिन्न सामग्री आकार के साथ एक बड़ी तालिका में आ सकते हैं जो आपके द्वारा निर्दिष्ट चौड़ाई के भीतर रहने से इनकार करता है, चाहे आप कोई भी प्रयास करें। उस तालिका के साथ आया टेबल लेआउट संपत्ति (समान कॉलम ऊंचाई के लिए, इस लिंक का अनुसरण करें).

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

5. इसे चिपचिपा बनाओ

   चिपचिपे तत्व एक पृष्ठ पर ऐसे तत्व होते हैं जिन्हें देखने से बाहर स्क्रॉल नहीं किया जाएगा। दूसरे शब्दों में यह एक दृश्य क्षेत्र (व्यूपोर्ट या स्क्रॉलिंग बॉक्स) से चिपक जाता है। आप इसे CSS का उपयोग करके बना सकते हैं स्थिति: चिपचिपा;.

   वे किसी भी स्क्रॉलिंग से पहले अपेक्षाकृत पोस्ट किए गए तत्वों की तरह काम करते हैं और बाद में एक स्क्रॉल सीमा तक पहुंचने के बाद निश्चित तत्वों की तरह। अभी के लिए, केवल फ़ायरफ़ॉक्स इसका समर्थन करता है.

6. अपने पाठ को आकार में प्राप्त करें

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

7. अनिवार्य क्षेत्र

   यदि आपको एक फॉर्म मिला है तो उच्च संभावना है कि इसमें कुछ फ़ील्ड आवश्यक हैं जबकि अन्य नहीं हैं। आपको उपयोगकर्ताओं को यह बताने की आवश्यकता होगी कि कौन सा है। इसके लिए CSS है : आवश्यक : वैकल्पिक छद्म वर्ग। सभी आधुनिक ब्राउज़र उनका समर्थन करते हैं.

8. रंग के साथ picky

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

9. क्या मैंने इसकी जाँच की?

   ऐसी स्थिति में जहां एक चेकबॉक्स को चेक किया गया है, यह अच्छा होगा कि एक और संकेत के अलावा डिफ़ॉल्ट चेकबॉक्स के अंदर छोटे चेकमार्क को बनाने के लिए यह चिह्नित करें कि आइटम चेक किया गया है।.

   इसके लिए सीएसएस है जो तत्काल भाई-बहनों के बीच के बंधन का फायदा उठाता है। CSS में समीपवर्ती सिबलिंग सिलेक्टर है जिसे प्लस द्वारा निरूपित किया गया है + साइन इन करें, और हम चेकबॉक्स के बगल में लेबल को लक्षित करने के लिए इसका उपयोग कर सकते हैं। लेकिन पहले चेक किए गए चेकबॉक्स को लक्षित करने के बारे में क्या? वहाँ है : जाँच उसके लिए छद्म वर्ग.

10. ए स्टोरीबुक की तरह

    तो, यह अच्छा नहीं होगा अगर पहले “हे” में “एक ज़माने में” सुंदर लग रहा है? हम इसे सुंदर बना सकते हैं, आखिरकार इसके लिए सीएसएस है। यहाँ कहाँ है ::प्रथम अक्षर छद्म तत्व बचाव के लिए आता है। यह लक्षित तत्व की पहली पंक्ति के पहले अक्षर को लक्षित करता है। इस बारे में यहां और पढ़ें.

11. क्या आप अधिक जानना चाहते हैं?

    एक तत्व में एक विशेषता के लिए कक्षा X या डेटा Y या कुछ अन्य मूल्य हो सकते हैं। यदि हमें कभी भी किसी तत्व के पास इस तरह के विशेषता मूल्य को प्रदर्शित करने की आवश्यकता होती है, तो हम इसका उपयोग कर सकते हैं सामग्री: attr (एक्स). यह तत्व की विशेषता X का मान निकालता है, फिर हम इसे तत्व के बगल में दिखा सकते हैं.

12. वामपंथियों को थोड़ा बहुत

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

13. लिंक की फ़ाइल प्रारूप का खुलासा करें

    कभी किसी लिंक के पास एक छोटी सी छवि दिखाई देती है जो यह बताती है कि वह लिंक क्या है? एक पीडीएफ? या एक DOC? हाँ, यह हासिल करने के लिए सीएसएस है। सामग्री: यूआरएल () वह है जो हम लिंक के पीछे की छवि प्रदर्शित करने के लिए उपयोग करेंगे.

14. ट्रिगर लंबन प्रभाव

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

15. सीएसएस एनिमेशन की शक्ति

    शायद बहुत बड़ा नहीं है “उसके लिए CSS है” पल, क्योंकि आप सभी अब तक शायद सीएसएस एनिमेशन से अवगत हैं। लेकिन थोड़ा याद दिलाने से कोई नुकसान नहीं है। सीएसएस एनिमेशन के लिए कई उपयोग हैं, लेकिन यहां एक साधारण रंग अभ्यास के लिए एक है.

अब पढ़ें: 50 उपयोगी सीएसएस स्निपेट्स हर डिजाइनर के पास होना चाहिए