10 (अधिक) सीएसएस ट्रिक्स आप शायद अनदेखी
बहुत सीएसएस स्निपेट्स हैं जिनका उपयोग वेब डेवलपर कुछ निश्चित परिणाम प्राप्त करने के लिए कर सकते हैं, और फिर सीएसएस ट्रिक्स हैं जिनका उपयोग आप सामग्री को लंबवत रूप से संरेखित करने के लिए कर सकते हैं। सीएसएस एक हमेशा विकसित इकाई होने के साथ, समय और समय फिर से हम शांत सीएसएस ट्रिक्स पर ठोकर खाते हैं जो जानने में मजेदार हैं.
आज की इस पोस्ट में, में आपका परिचय करवा रहा हूँ 10 और CSS विशेषताएँ और ट्रिक्स जो आप नहीं जानते होंगे.
1. लंबवत लिखें
वहाँ एक सीएसएस विशेषता कहा जाता है लेखन-मोड जो इन तीन मूल्यों में से एक को स्वीकार करता है; क्षैतिज टीबी, वर्टिकल-rl तथा खड़ी-LR.
क्षैतिज टीबी डिफ़ॉल्ट है और यह एक तत्व में ठेठ बाएं से दाएं क्षैतिज पाठ प्रवाह का कारण बनता है.
vertical- * मान हालांकि वर्टिकल ब्लॉक फ्लो के लिए हैं, जिसके कारण ब्राउज़रों द्वारा टेक्स्ट को ऊपर से नीचे लिखा जाता है। में वर्टिकल-rl, नई लाइनों को पिछले वाले के बाईं ओर जोड़ा जाता है और इसके विपरीत खड़ी-LR.
इसके लिए उपयोगी है चीनी और जापानी जैसी भाषाओं को प्रदर्शित करना यह आम तौर पर ऊपर से नीचे तक लिखा जाता है और तब भी जब आप क्षैतिज स्थान बचाने के लिए टेबिल प्रदर्शित करना चाहते हैं, जैसे टेबल हेडर.
ध्यान दें: यदि आप अलग-अलग अक्षरों के निर्देशों को नियंत्रित करना चाहते हैं, तो आप टेक्स्ट-ओरिएंटेशन का उपयोग करके उन्हें सीधा या बग़ल में मोड़ सकते हैं, जैसा कि वांछित है.
-वेबकिट-राइटिंग-मोड: वर्टिकल-आरएल; -ms-लेखन-मोड: tb-rl; लेखन-विधा: ऊर्ध्वाधर-आरएल;
2. पुन: उपयोग रंग मूल्य
कीवर्ड currentColor का मूल्य वहन करती है रंग विशेषता और अन्य विशेषताओं में उपयोग किया जा सकता है जो रंग मूल्यों को स्वीकार करते हैं पृष्ठभूमि.
div बैकग्राउंड: लीनियर-ग्रेडिएंट (90deg, currentColor 50%, ब्लैक 50%);… रंग: # FFD700; / * currentColor # FFD700 * / है
3. ब्लेंड बैकग्राउंड
एक तत्व में एक से अधिक पृष्ठभूमि (एक पृष्ठभूमि रंग और कई पृष्ठभूमि चित्र) हो सकते हैं। पृष्ठभूमि मिश्रण मोड दिए गए सम्मिश्रण के अनुसार इन सभी को एक साथ मिश्रित करता है। इस समय कुल 16 ब्लेंड मोड हैं.
पृष्ठभूमि-मिश्रण-मोड: अंतर;
4. ब्लेंड तत्व
मिश्रण-मिश्रण-मोड सामग्री और अतिव्यापी तत्वों की पृष्ठभूमि को मिश्रित करता है। फ़ायरफ़ॉक्स करता है भले ही क्रोम सभी तरीकों का समर्थन नहीं करता है.
मिश्रण-मिश्रण-मोड: रंग;
मैंने दो तत्व लिए, ए img एक गुलाब और एक की छवि दिखा रहा है अवधि एक ग्राफिक पृष्ठभूमि के साथ, उन्हें स्टैक्ड और कुछ मिश्रण-मिश्रण-मोड लागू किए.
5. पॉइंटर इवेंट्स को नजरअंदाज करें
आप किसी भी पॉइंटर ईवेंट का एक तत्व बना सकते हैं, जिसे एकल विशेषता कहा जाता है सूचक-घटनाओं. देकर सूचक-घटनाओं का मूल्य कोई नहीं एक तत्व में, यह सूचक घटनाओं के लिए लक्ष्य होने से रोकता है। IE11 + समर्थन शामिल है.
निम्नलिखित डेमो में, एक दूसरे के ऊपर खड़ी दो छवियों के नीचे एक चेकबॉक्स है। दोनों चित्र ले जाते हैं सूचक-घटनाएँ: कोई नहीं, हमें उनके नीचे दबे हुए चेकबॉक्स पर क्लिक करने की अनुमति देता है। चेकबॉक्स की जांच की गई स्थिति के आधार पर, वांछित छवि को दिखाया गया है जबकि अन्य छिपा हुआ है.
6. स्प्लिट बॉक्स को सजाएं
आमतौर पर जब एक बॉक्स विभाजित होता है (जैसे जब एक इनलाइन तत्व गवाह लाइन टूट जाता है), विभाजन भागों के किनारों को किसी भी बॉक्स शैली से रहित और कटा हुआ दिखता है। उससे बचने के लिए, आप उपयोग कर सकते हैं बॉक्स-सजावट-ब्रेक: क्लोन.
अब एक उदाहरण और प्रारंभिक "क्षितिज में क्रिसमस" अनुस्मारक के साथ पालन करने के लिए, यहां सांता के हिरन की एक सूची सभी को एक ही में टाइप किया गया है अवधि! हो! हो! हो!
ध्यान दें: भले ही आधुनिक IE समर्थन करता है बॉक्स-सजावट-तोड़, स्प्लिट पार्ट बॉर्डर के किनारे पर, रेंडरिंग स्मूथ नहीं है और बैकग्राउंड कटा हुआ दिखता है। लेकिन यह रेंडर करता है डब्बे की छाया अच्छी तरह से, यही वजह है कि मैंने बॉर्डर और बैकग्राउंड दोनों के लिए बॉक्स शैडो का इस्तेमाल किया। IE में किनारों में क्षैतिज पैडिंग की अनुपस्थिति भी है जिसे आप रिक्त स्थान के साथ भरना चाहते हैं.
7. तालिका तत्वों को संक्षिप्त करें
दृश्यता: पतन एक विशेषता है जो तालिका तत्वों के लिए बनाई जाती है, जैसे पंक्तियाँ और स्तंभ। अगर किसी और चीज पर प्रयोग किया जाता है तो वह ऐसा व्यवहार करेगा दृश्यता: छिपी हुई. क्रोम हालांकि इसे पसंद करता है छिपा हुआ यहां तक कि टेबल तत्वों के लिए भी.
जब आप असाइन करते हैं दृश्यता: पतन एक तालिका तत्व पर, यह छिपा हुआ है और इसका स्थान पास की सामग्री से भरा है - जैसे कि यह प्रयोग करने पर कैसा व्यवहार करेगा कुछ भी डिस्प्ले मत करो बजाय.
लेकिन इसके विपरीत कुछ भी डिस्प्ले मत करो जो अंतरिक्ष को हटाने के बाद तालिका लेआउट को संशोधित करता है, लेआउट उसी में रहता है दृश्यता: पतन. आप देख सकते हैं कि कैसे यह यहाँ पर अधिक विस्तार से काम करता है.
8. कॉलम बनाएं
आप अपनी सामग्री का उपयोग करके एक कॉलम लेआउट बना सकते हैं कॉलम विशेषता। यह आपको निर्दिष्ट करता है कि कितने कॉलम हैं (स्तंभ गिनती) और प्रत्येक कॉलम की चौड़ाई (स्तंभ की चौड़ाई) एक तत्व में प्रदान किया जाना है.
यदि सामग्री पाठ के अलावा अन्य है, उदाहरण के लिए एक छवि, तो आपको कॉलम की संबंधित चौड़ाई को ध्यान में रखना होगा। निम्नलिखित उदाहरण के लिए, मैंने केवल उपयोग किया स्तंभ गिनती यह निर्दिष्ट करने के लिए कि मुझे कितने कॉलम चाहिए.
-वेबकिट-कॉलम-गणना: 2; -मोज़-कॉलम-गिनती: 2; स्तंभ-गणना: 2;
9. तत्वों को रेसिजेबल बनाएं
CSS3 विशेषता के साथ एक तत्व को रेज़िजेबल (लंबवत, क्षैतिज या दोनों) बनाया जा सकता है आकार परिवर्तन . एक में लचीलापन पाठ क्षेत्र उसी का उपयोग करके अक्षम किया जा सकता है.
आकार: ऊर्ध्वाधर; आकार: क्षैतिज; आकार: दोनों; आकार: कोई नहीं;
10. पैटर्न बनाएं
एक ही तत्व के लिए कई CSS3 ग्रेडिएंट (रैखिक और रेडियल दोनों) हो सकते हैं और पैटर्न बनाने के लिए उन्हें एक दूसरे पर ढेर किया जा सकता है। यह हमें अनुमति देता है बाहरी छवियों का उपयोग किए बिना तत्वों के लिए अच्छी पृष्ठभूमि बनाएं. हालांकि इसे काम करने के लिए थोड़ा अभ्यास की आवश्यकता हो सकती है.
