पहले और बाद में छद्म-तत्व को समझना

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

आपने इस शब्द के बारे में सुना है, खासकर जब आप हमारे कुछ ट्यूटोरियल का अनुसरण कर रहे हैं.

वास्तव में कुछ CSS परिवार के सदस्य हैं जिन्हें वर्गीकृत किया गया है छद्म तत्वों जैसे :पहली पंक्ति, :प्रथम अक्षर, :: चयन, : से पहले तथा :बाद. लेकिन, इस लेख के लिए, हम अपने कवरेज को केवल तक ही सीमित रखेंगे : से पहले तथा :बाद, “छद्म तत्वों” यहाँ विशेष रूप से उन दोनों को संदर्भित करेगा। हम मूल से इस विशेष विषय पर गौर करेंगे.

सिंटैक्स और ब्राउज़र समर्थन

छद्म तत्वों वास्तव में चारों ओर से किया गया है सीएसएस 1, लेकिन वो : से पहले तथा :बाद हम यहाँ चर्चा कर रहे हैं कि में जारी किया गया था CSS2.1. शुरुआत में, द छद्म तत्वों सिंटैक्स के लिए एकल-कोलन का उपयोग करें, फिर जैसा कि वेब विकसित हुआ, CSS3 में छद्म तत्वों डबल-कोलोन का उपयोग करने के लिए संशोधित किया गया :: पहले और ::बाद - इसके साथ भेद करना छद्म कक्षाएं (अर्थात. : मंडराना, : सक्रिय, और इसी तरह).

हालाँकि, चाहे आप एकल-कॉलन या दोहरे-कॉलोन प्रारूप का उपयोग करते हैं, फिर भी ब्राउज़र या तो पहचान लेंगे। और चूंकि Internet Explorer 8 केवल एकल-कोलोन प्रारूप का समर्थन करता है, इसलिए यदि आप व्यापक ब्राउज़र संगतता चाहते हैं, तो यह एकल-कॉलन का उपयोग करने के लिए सुरक्षित है.

यह क्या करता है?

संक्षेप में, छद्म तत्वों एक अतिरिक्त तत्व सम्मिलित करेगा से पहले या बाद सामग्री का तत्व, इसलिए जब हम उन दोनों को जोड़ते हैं, तो वे तकनीकी रूप से समान हैं, निम्न मार्कअप के साथ.

 
 : से पहले यह मुख्य सामग्री है. :बाद 
 

लेकिन वे तत्व वास्तव में दस्तावेज़ पर उत्पन्न नहीं होते हैं। वे अभी भी सतह पर दिखाई दे रहे हैं लेकिन आप उन्हें दस्तावेज़ स्रोत पर नहीं पाएंगे, इसलिए व्यावहारिक रूप से वे बोल रहे हैं उल्लू बनाना तत्वों.

छद्म तत्वों का उपयोग करना

का उपयोग करते हुए छद्म तत्वों अपेक्षाकृत आसान है; निम्नलिखित वाक्यविन्यास चयनकर्ता: से पहले एक तत्व जोड़ देगा से पहले इस सिंटैक्स के दौरान सामग्री का चयनकर्ता चयनकर्ता: के बाद इसके बाद जोड़ देगा, और उनके अंदर एक सामग्री जोड़ने के लिए हम इसका उपयोग कर सकते हैं सामग्री संपत्ति.

उदाहरण के लिए, नीचे दिए गए स्निपेट में पहले और बाद में एक उद्धरण चिह्न जोड़ा जाएगा ब्लॉककोट.

 blockquote: इससे पहले सामग्री: खुली बोली;  blockquote: after सामग्री: करीब-उद्धरण;  

स्टाइलिंग छद्म तत्व

नकली तत्व होने के बावजूद, छद्म तत्वों वास्तव में एक की तरह काम करते हैं “असली” तत्व; हम उन पर किसी भी शैली की घोषणा को जोड़ने में सक्षम हैं, जैसे कि रंग बदलना, पृष्ठभूमि जोड़ना, फ़ॉन्ट आकार समायोजित करना, इसके अंदर पाठ संरेखित करना और आगे.

 blockquote: इससे पहले सामग्री: खुली बोली; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; पृष्ठभूमि: #ddd; बाईंओर तैरना; स्थिति: रिश्तेदार; शीर्ष: 30 पीएक्स;  blockquote: after सामग्री: करीब-उद्धरण; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; पृष्ठभूमि: #ddd; सही नाव; स्थिति: रिश्तेदार; नीचे: 40 पीएक्स;  

आयाम निर्दिष्ट करना

उत्पन्न तत्व डिफ़ॉल्ट रूप से एक इनलाइन स्तर के तत्व होते हैं, इसलिए जब हम ऊंचाई और चौड़ाई को निर्दिष्ट करने वाले होते हैं, तो हमें पहले इसे ब्लॉक तत्व के रूप में परिभाषित करना होगा। प्रदर्शन क्षेत्र घोषणा.

 blockquote: इससे पहले सामग्री: खुली बोली; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; पृष्ठभूमि: #ddd; बाईंओर तैरना; स्थिति: रिश्तेदार; शीर्ष: 30 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; / ** इसे एक ब्लॉक एलिमेंट के रूप में परिभाषित किया जाता है ** / डिस्प्ले: ब्लॉक; ऊंचाई: 25 पीएक्स; चौड़ाई: 25 पीएक्स;  blockquote: after सामग्री: करीब-उद्धरण; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; पृष्ठभूमि: #ddd; सही नाव; स्थिति: रिश्तेदार; नीचे: 40 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; / ** इसे एक ब्लॉक एलिमेंट के रूप में परिभाषित किया जाता है ** / डिस्प्ले: ब्लॉक; ऊंचाई: 25 पीएक्स; चौड़ाई: 25 पीएक्स;  

पृष्ठभूमि छवि संलग्न करें

हम केवल सादे पाठ के बजाय एक छवि के साथ सामग्री को भी बदल सकते हैं। हालांकि सामग्री संपत्ति प्रदान करता है a यूआरएल () एक छवि डालने के लिए स्ट्रिंग, लेकिन ज्यादातर मामलों में मैं बहुत का उपयोग कर पसंद करते हैं पृष्ठभूमि संलग्न छवि पर अधिक नियंत्रण के लिए संपत्ति.

 blockquote: content: "" से पहले; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; बाईंओर तैरना; स्थिति: रिश्तेदार; शीर्ष: 30 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; पृष्ठभूमि: url (छवियाँ / quotationmark.png) -3px -3px #ddd; प्रदर्शन क्षेत्र; ऊंचाई: 25 पीएक्स; चौड़ाई: 25 पीएक्स;  अवरोधक: सामग्री: "" के बाद; फ़ॉन्ट-आकार: 24pt; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 42 पीएक्स; रंग: #fff; सही नाव; स्थिति: रिश्तेदार; नीचे: 40 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; पृष्ठभूमि: url (छवियां / उद्धरण चिह्न) -1px -32px #ddd; प्रदर्शन क्षेत्र; ऊंचाई: 25 पीएक्स; चौड़ाई: 25 पीएक्स;  

हालांकि, जैसा कि आप ऊपर स्निपेट से देख सकते हैं, हम अभी भी घोषित कर रहे हैं सामग्री संपत्ति और इस बार एक खाली स्ट्रिंग के साथ। सामग्री संपत्ति है एक जरूरत और हमेशा लागू किया जाना चाहिए; अन्यथा छद्म तत्व काम नहीं करेगा जो भी.

छद्म वर्गों के साथ संयोजन

हालांकि वे एक अलग तरह के हैं मिथ्या, हम उपयोग कर सकते हैं छद्म कक्षाएं साथ में छद्म तत्वों एक सीएसएस नियम में, उदाहरण के लिए, अगर हम टर्न को चालू करना चाहते हैं उद्धरण चिह्न पृष्ठभूमि जब हम पर मँडराते हैं तो थोड़ा गहरा होता है ब्लॉककोट.

 blockquote: hover: after, blockquote: hover: इससे पहले बैकग्राउंड-कलर: # 555;  

संक्रमण प्रभाव जोड़ना

और हम भी आवेदन कर सकते हैं संक्रमण एक सुंदर रंग संक्रमण प्रभाव बनाने के लिए उन पर संपत्ति.

 संक्रमण: सभी 350ms; -ओ-संक्रमण: सभी 350ms; -मोज़-संक्रमण: सभी 350ms; -वेबकैट-संक्रमण: सभी 350ms; 

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

• डेमो
• स्रोत डाउनलोड करें

अधिक प्रेरणा

आपको प्रेरित करने के लिए, हमने तीन शांत उदाहरणों का चयन किया है जो आपको अपने वेब डिज़ाइन के लिए विचार दे सकते हैं.

आकर्षक छाया

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

स्टैक्ड इमेज इफेक्ट

का उपयोग करते हुए छद्म तत्वों मार्कअप पर केवल एक छवि के साथ एक गड़बड़ स्टैक्ड छवि प्रभाव बनाने के लिए भी संभव है। छद्म तत्वों नकारात्मक का उपयोग करके वास्तविक छवि के पीछे खड़ी छवियों का भ्रम बनाने के लिए उपयोग किया जाता है z- सूचकांक.

निष्कर्ष

पीseudo-तत्वों सादा है “ठंडा” और अंत में प्रयोग करने योग्य, मूल रूप से हमारे पास है दो बोनस तत्व हर उस तत्व के लिए जिसे हम वास्तविक HTML संरचना में हस्तक्षेप किए बिना जोड़ते हैं, और फिर उन्हें लगभग हर चीज में बदल देते हैं जिसकी हम कभी कल्पना भी कर सकते हैं.

वास्तव में कुछ सुधार हैं छद्म तत्वों वर्तमान में इस तरह के रूप में काम किया जा रहा है छद्म तत्व div :: से पहले :: सामग्री: ";; तथा कई छद्म तत्व div :: से पहले (3) सामग्री: "; जो स्पष्ट रूप से भविष्य में वेब डिजाइन अभ्यास में बहुत अधिक संभावनाएं खोलेगा। जबकि वे वर्तमान ब्राउज़रों में कार्यान्वित किए जा रहे हैं, आइए अब धैर्यपूर्वक प्रतीक्षा करें.