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

दिए गए उदाहरणों में, हम विभिन्न स्थितियों में टेक्स्ट शैडो का उपयोग करते हैं, जो आपको आवश्यक आधार देगा ताकि आप स्वयं इस मुद्दे का आगे अध्ययन कर सकें।

1. बुनियादी सेटअप

एक नया बनाएँ HTML फ़ाइलऔर इसमें निम्नलिखित कोड जोड़ें एचटीएमएलऔर सीएसएस:

HTML अनुभाग में, एक टैग जोड़ें

पाठ वर्ग के साथ:

वेब कोड गीक्स

इस तत्व के लिए हम एक सीएसएस टेक्स्ट छाया जोड़ेंगे। मैंने इस तत्व के लिए प्रारंभिक गुण निर्धारित किए हैं ताकि यह स्क्रीन पर अच्छा दिखे:

अब टेक्स्ट में text-shadow विशेषता सेट करते हैं। लेकिन पहले, आइए जानें कि यह विशेषता क्या मान लेती है:

टेक्स्ट-छाया: 4px 4px 4px #ccc;

1. 4px - एक्स ऑफसेट ( क्षैतिज);
2. 3px - Y अक्ष ऑफसेट ( खड़ा);
3. 2px - धुंधला मान;
4. #सीसीसी - रंग.

इसे इस प्रकार सेट किया गया है:

पाठ-छाया: क्षैतिज-ऑफ़सेट ऊर्ध्वाधर-ऑफ़सेट धुंधला रंग;

रंग को हेक्साडेसिमल कोड #ccc या RGBA (0,0,0,0.3) द्वारा दर्शाया जा सकता है; . सीएसएस में, हम अपने टेक्स्ट पर सीएसएस आंतरिक छाया इस तरह लागू कर सकते हैं:

।मूलपाठ(
फ़ॉन्ट-आकार: 5em; /* टेक्स्ट को बड़ा बनाएं */
टेक्स्ट-छाया: 4px 3px 2px #ccc;
}

इस छायांकित पाठ का ब्राउज़र प्रतिनिधित्व इस तरह दिखेगा:

उदाहरण वेबसाइट

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

2. छाप प्रभाव

टेक्स्ट का रंग पृष्ठभूमि की तुलना में थोड़ा गहरे शेड पर सेट करें। फिर कम अपारदर्शिता के साथ एक छोटी सफेद टेक्स्ट छाया लागू करें:

शरीर (
पृष्ठभूमि: #222;
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग: आरजीबीए(0,0,0,0.6); /* पाठ का रंग */
टेक्स्ट-छाया: 2px 2px 3px rgba(255,255,255,0.1); /*छाया जोड़ना*/
}

आरजीबीए कोड का उपयोग करके आप रंग की अस्पष्टता निर्धारित कर सकते हैं। ध्यान दें कि टेक्स्ट के रंग की अपारदर्शिता 60% (0.6) है और div CSS शैडो की अपारदर्शिता 10% (0.1) है।

उदाहरण वेबसाइट

3. रेट्रो छाया प्रभाव

रेट्रो छायाओं को हमेशा धुंधला करने की आवश्यकता नहीं होती है। उदाहरण के लिए इस रेट्रो छाया को लें:

शरीर (
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग सफेद; /* टेक्स्ट का रंग सफेद में बदलें */
टेक्स्ट-छाया: 6px 6px 0px rgba(0,0,0,0.2); /* रेट्रो छाया जोड़ना */
}

उदाहरण वेबसाइट

4. दोहरा छाया प्रभाव

दिलचस्प बात यह है कि आप एक से अधिक सीएसएस फ़ॉन्ट छाया जोड़ सकते हैं। इसे इस प्रकार किया जा सकता है: पाठ-छाया: छाया1, छाया2, छाया3; आइए दो छायाएँ जोड़ें, एक पृष्ठभूमि रंग वाली और दूसरी थोड़ी गहरे रंग वाली:

मूलपाठ(
फ़ॉन्ट-आकार: 5em;
टेक्स्ट-छाया: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /*दो छाया देता है*/
}

हमारी पृष्ठभूमि सफेद है, इसलिए हमें इसके लिए किसी अन्य रंग की आवश्यकता नहीं है। ब्राउज़र में प्रभाव इस तरह दिखेगा:

उदाहरण वेबसाइट

5. दूरस्थ छाया प्रभाव

यह प्रभाव कई खूबसूरत सीएसएस छायाओं को परिभाषित करने के कार्य पर आधारित है। नीचे आप तीव्रता की अलग-अलग डिग्री पर नीचे की ओर डाली गई चार छायाओं के साथ प्रभाव देख सकते हैं:

शरीर (
पृष्ठभूमि: #fff3cd; /* पृष्ठभूमि का रंग बदलें */
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग सफेद;
टेक्स्ट-छाया: 0px 3px 0px #b2a98f,
0px 14px 10px आरजीबीए(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}

उदाहरण वेबसाइट

6. मार्क डोट्टो द्वारा 3डी प्रभाव

शरीर (
पृष्ठभूमि: #3495c0; /* पृष्ठभूमि का रंग बदलें */
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग सफेद;
पाठ-छाया: 0 1पीएक्स 0 #सीसीसी,
0 2px 0 #c9c9c9,
0 3पीएक्स 0 #बीबीबी,
0 4पीएक्स 0 #बी9बी9बी9,
0 5px 0 #aaa,
0 6px 1px आरजीबीए(0,0,0,.1),
0 0 5px आरजीबीए(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px आरजीबीए(0,0,0,.2),
0 5px 10px आरजीबीए(0,0,0,.25),
0 10px 10px आरजीबीए(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

अब देखें कि ये CSS आंतरिक टेक्स्ट छायाएँ ब्राउज़र में कैसी दिखती हैं:

उदाहरण वेबसाइट

7. यथार्थवादी गॉर्डन हॉल कट टेक्स्ट प्रभाव

गॉर्डन न केवल बाहरी छाया, बल्कि यथार्थवादी आंतरिक छाया देने के लिए कुछ उन्नत सीएसएस जादू का उपयोग करता है:

शरीर (
पृष्ठभूमि: #cbcbcb; /* पृष्ठभूमि का रंग बदलें */
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग: पारदर्शी;
पृष्ठभूमि-रंग: #666666;
-वेबकिट-बैकग्राउंड-क्लिप: टेक्स्ट;
-मोज़-बैकग्राउंड-क्लिप: टेक्स्ट;
पृष्ठभूमि-क्लिप: पाठ;
टेक्स्ट-छाया: आरजीबीए(255,255,255,0.5) 0पीएक्स 3पीएक्स 3पीएक्स;
}

और इससे कट टेक्स्ट का प्रभाव पैदा होता है।

उदाहरण वेबसाइट

8. पाठ चमक प्रभाव

शरीर (
पृष्ठभूमि: #992डी23; /* पृष्ठभूमि का रंग बदलें */
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग सफेद;
टेक्स्ट-छाया: 0px 0px 6px rgba(255,255,255,0.7);
}

यह छाया पाठ के लिए एक चमकदार प्रभाव पैदा करती है:

उदाहरण वेबसाइट

9. बढ़ा हुआ पाठ प्रभाव

शरीर (
पृष्ठभूमि: #629552; /* पृष्ठभूमि का रंग बदलें */
}
।मूलपाठ(
फ़ॉन्ट-आकार: 5em;
रंग: आरजीबीए(0,0,0,0.6);
टेक्स्ट-छाया: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}

उदाहरण वेबसाइट

10. लंबी छाया प्रभाव

इसका उपयोग करके यह प्रभाव किया जा सकता है

पृष्ठभूमि-रंग: आरजीबी(147, 201, 67);
टेक्स्ट-छाया: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px आरजीबी(131, 179, 60), 6पीएक्स 6पीएक्स आरजीबी(131, 179, 60), 7पीएक्स 7पीएक्स आरजीबी(131, 179, 60), 8पीएक्स 8पीएक्स आरजीबी(131, 179, 60), 9पीएक्स 9पीएक्स आरजीबी(131, 179, 60), 10पीएक्स 10पीएक्स आरजीबी(131, 179, 60), 11पीएक्स 11पीएक्स आरजीबी(131, 179, 60), 12पीएक्स 12पीएक्स आरजीबी(131, 179, 60), 13पीएक्स 13पीएक्स आरजीबी(131, 179, 60), 14पीएक्स 14पीएक्स आर जी.बी (131, 179, 60), 15पीएक्स 15पीएक्स आरजीबी(131, 179, 60), 16पीएक्स 16पीएक्स आरजीबी(131, 179, 60), 17पीएक्स 17पीएक्स आरजीबी(131, 179, 60), 18पीएक्स 18पीएक्स आरजीबी(131, 179, 60) ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px आरजीबी ( 131, 179, 60), 24पीएक्स 24पीएक्स आरजीबी(131, 179, 60), 25पीएक्स 25पीएक्स आरजीबी(131, 179, 60), 26पीएक्स 26पीएक्स आरजीबी(131, 179, 60), 27पीएक्स 27पीएक्स आरजीबी(131, 179, 60) ;
रंग: #eaeaea;

उदाहरण वेबसाइट

निष्कर्ष

जैसा कि आप देख सकते हैं, टेक्स्ट-छाया संपत्ति का उपयोग करना बहुत आसान है और आप इसका उपयोग अपनी रचनात्मक सीएसएस छाया बनाने के लिए कर सकते हैं।

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

मूल पाठ-छाया वाक्यविन्यास

यह संपत्ति CSS3-moz और -webkit जैसे विक्रेता उपसर्गों के बिना, सभी नवीनतम ब्राउज़रों में काम करता है। यहां तक ​​कि IE को भी इस संपत्ति को समझने के लिए सिखाया जा सकता है, आपको मॉडर्निज़र या एनालॉग्स का उपयोग करने की आवश्यकता है।

पाठ-छाया: एक्स-ऑफ़सेट वाई-ऑफ़सेट धुंधला रंग;

यह सब मूल वाक्यविन्यास है। पहला मान क्षैतिज ऑफसेट है, दूसरा ऊर्ध्वाधर ऑफसेट, छाया धुंधलापन और छाया रंग है। आइए एक उदाहरण देखें:

टेक्स्ट-छाया: 2px 4px 3px rgba(0,0,0,0.3);

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

उदास पत्र

बॉडी (पृष्ठभूमि: #222; ) #पाठ एच1 (रंग: आरजीबीए(0,0,0,0.6); पाठ-छाया: 2पीएक्स 2पीएक्स 3पीएक्स आरजीबीए(255,255,255,0.1); )

यहां ऑपरेशन का सिद्धांत यह है: पृष्ठभूमि अक्षरों की तुलना में थोड़ी हल्की है, थोड़ी पारदर्शिता के साथ हल्की छाया है। नतीजा तस्वीर में है, इसे आज़माएं।

कठोर छाया

टेक्स्ट-छाया: 6px 6px 0px rgba(0,0,0,0.2);

आजकल रेट्रो स्टाइल फैशन में है और वहां बिना धुंधले शैडो का इस्तेमाल किया जाता है। खैर, हम इसके लिए तैयार हैं

दोहरी छाया

टेक्स्ट-छाया: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

और यहां संपत्ति की एक और पेचीदा विशेषता का उपयोग किया जाता है पाठ की छाया, चयनकर्ताओं को अल्पविराम से अलग करके सूचीबद्ध किया जा सकता है, इस प्रकार आवश्यकतानुसार कई छायाएँ बनाई जा सकती हैं। पहली छाया को पृष्ठभूमि के समान रंग दिया जा सकता है, फिर प्रभाव चित्र जैसा होगा।

नीचे और दूर

टेक्स्ट-छाया: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );

पाठ बड़ा है और पृष्ठभूमि के ऊपर लटका हुआ प्रतीत होता है, है ना? यहां हम धुंधलेपन और स्थान के विभिन्न स्तरों के साथ 4 छायाओं का उपयोग करते हैं। सामान्य तौर पर, जितनी अधिक छायाओं का उपयोग किया जाएगा, प्रभाव उतना ही अधिक यथार्थवादी होगा; इसे अपनी परियोजनाओं में ध्यान में रखें।

छोटा 3D पाठ

टेक्स्ट-छाया: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

पिछले उदाहरण के समान, तीन छायाएँ, लेकिन करीब स्थित, इसलिए पाठ की त्रि-आयामीता और वजन का प्रभाव।

मार्क डोट्टो द्वारा 3डी पाठ

टेक्स्ट-छाया: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

मुझे इस डिज़ाइनर का काम ऑनलाइन मिला और मैं इसे नज़रअंदाज़ नहीं कर सका। प्रभावशाली यथार्थवाद.

गॉर्डन हॉल द्वारा इंडेंटेड पाठ

पृष्ठभूमि-रंग: #666666; -वेबकिट-बैकग्राउंड-क्लिप: टेक्स्ट; -मोज़-बैकग्राउंड-क्लिप: टेक्स्ट; पृष्ठभूमि-क्लिप: पाठ; रंग: पारदर्शी; टेक्स्ट-छाया: आरजीबीए(255,255,255,0.5) 0पीएक्स 3पीएक्स 3पीएक्स;

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

चमकदार पाठ

टेक्स्ट-छाया: 0px 0px 6px rgba(255,255,255,0.7);

यहां भी, सब कुछ सरल है - हम छाया को स्थानांतरित नहीं करते हैं, हम इसे और अधिक मजबूती से धुंधला करते हैं और इसे सफेद बनाते हैं। बस इतनी ही चमक है.

पूर्वव्यापी शैली

टेक्स्ट-छाया: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

मैंने ऊपर रेट्रो शैली के बारे में बात की, यह उसी ओपेरा से है। यह अब बहुत फैशनेबल है, कई स्पष्ट छायाएँ। अपने विवेक से प्रयोग करें

एकाधिक प्रकाश स्रोत

टेक्स्ट-छाया: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

यहां कई प्रकाश स्रोतों का प्रभाव है जो सभी दिशाओं में छाया देते हैं।

उठाया हुआ पाठ

रंग: आरजीबीए(0,0,0,0.6); टेक्स्ट-छाया: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

दबा हुआ पाठ पहले से ही मौजूद था, लेकिन अब इसे ऊपर उठा दिया गया है। एक काफी सरल प्रभाव, लेकिन उदाहरण के लिए, यह सुर्खियों में बहुत अच्छा दिखता है। इसका प्रयोग करें, इसे आज़माएं

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

विवरण

पाठ में एक छाया जोड़ता है, और इसके पैरामीटर भी सेट करता है: छाया का रंग, शिलालेख के सापेक्ष ऑफसेट और धुंधला त्रिज्या। टेक्स्ट-छाया संपत्ति :प्रथम-अक्षर और :प्रथम-पंक्ति छद्म-तत्वों के साथ मिलकर काम कर सकती है।

वाक्य - विन्यास

पाठ-छाया: कोई नहीं | छाया [,छाया]*
छाया कहाँ है:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

मान

कोई भी छाया जोड़ना रद्द नहीं करता। रंग किसी भी उपलब्ध सीएसएस प्रारूप में छाया का रंग। डिफ़ॉल्ट रूप से, छाया का रंग पाठ के रंग से मेल खाता है। वैकल्पिक पैरामीटर. x-shift पाठ के सापेक्ष छाया का क्षैतिज ऑफसेट। इस पैरामीटर का एक सकारात्मक मान छाया को दाईं ओर स्थानांतरित कर देता है, एक नकारात्मक मान इसे बाईं ओर स्थानांतरित कर देता है। आवश्यक पैरामीटर. y ऑफसेट पाठ के सापेक्ष छाया का ऊर्ध्वाधर ऑफसेट। नकारात्मक मान का उपयोग करना भी स्वीकार्य है, जो छाया को पाठ से ऊपर उठाता है। आवश्यक पैरामीटर. त्रिज्या छाया धुंधलेपन की त्रिज्या निर्धारित करती है। यह मान जितना अधिक होगा, छाया उतनी ही अधिक चिकनी, चौड़ी और हल्की होती जाएगी। यदि यह विकल्प निर्दिष्ट नहीं है, तो डिफ़ॉल्ट 0 पर सेट है। कृपया ध्यान दें कि एंटीएलियासिंग एल्गोरिदम आमतौर पर ब्राउज़रों के बीच भिन्न होता है, इसलिए आपके द्वारा निर्दिष्ट एंटीएलियासिंग सेटिंग्स के आधार पर छाया की उपस्थिति थोड़ी भिन्न हो सकती है।

आप कई छाया पैरामीटर निर्दिष्ट कर सकते हैं, उन्हें अल्पविराम से अलग कर सकते हैं। CSS3 निम्नलिखित क्रम को ध्यान में रखता है: सूची में पहली छाया को सबसे ऊपर रखा गया है, सूची में अंतिम को सबसे नीचे रखा गया है। CSS2 में, क्रम उलटा है: पहली छाया सबसे नीचे रखी गई है, और आखिरी सबसे ऊपर।

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

क्या साइट्रस दक्षिण की झाड़ियों में रहेंगे? हाँ, लेकिन एक नकली प्रति!

उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

चावल। 1. सफ़ारी ब्राउज़र में छाया दृश्य

ब्राउज़र्स

ओपेरा अधिकतम 6-9 छाया विकल्पों का समर्थन करता है। इस मान को बढ़ाने के साथ-साथ धुंधला त्रिज्या को 100px से ऊपर बढ़ाने से ब्राउज़र के प्रदर्शन पर असर पड़ता है। ओपेरा संस्करण 9.5-10 CSS2 के समान मल्टी-शैडो डिस्प्ले का उपयोग करता है।

संस्करण 4.0 से पहले सफारी केवल एक छाया विकल्प का समर्थन करती है, बाकी को नजरअंदाज कर दिया जाता है। संस्करण 4.0 के बाद से, कई छायाएँ पहले से ही काम कर रही हैं।

संस्करण 10.0 के बाद से इंटरनेट एक्सप्लोरर केवल टेक्स्ट-शैडो प्रॉपर्टी को समझता है। इसके बजाय, फ़िल्टर संपत्ति का उपयोग किया जाता है: छाया (पैरामीटर)। उदाहरण के लिए, निम्नलिखित निर्माण छाया का रंग (#666666), उसकी दिशा (ऊर्ध्वाधर से 45°) और ऑफसेट राशि (4 पिक्सेल) निर्दिष्ट करता है।

फ़िल्टर: छाया(रंग=#666666, दिशा=45, शक्ति=4);

मॉड्यूल में टेक्स्ट स्टाइलिंग से संबंधित सीएसएस विशेषताएं शामिल हैं, जैसे अंडरलाइनिंग, टेक्स्ट शैडो और पूर्वी एशियाई टेक्स्ट एक्सेंट।

पाठ शैली गुण

1. लाइन डिज़ाइन: अंडरलाइन, स्ट्रोक और स्ट्राइकथ्रू

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

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

चावल। 1.अंडरलाइन को तोड़ना

1.1. सजावट लाइन प्रकार: टेक्स्ट-सजावट-लाइन संपत्ति

ब्राउज़र समर्थन

अर्थात: —
किनारा: —
फ़ायरफ़ॉक्स: 36, 35 -मोज़-
क्रोम: 57
सफारी: 12.1, 7.1 -वेबकिट-
ओपेरा: 44
आईओएस सफारी: 8 -वेबकिट-
एंड्रॉइड के लिए यूसी ब्राउज़र: 11.8
एंड्रॉइड के लिए क्रोम: 73
सैमसंग इंटरनेट: 7.2

टेक्स्ट-डेकोरेशन-लाइन प्रॉपर्टी यह निर्धारित करती है कि तत्व में किस प्रकार की लाइन, यदि कोई हो, जोड़ी गई है।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

पाठ-सजावट-पंक्ति: कोई नहीं; पाठ-सजावट-पंक्ति: रेखांकित करें; टेक्स्ट-सजावट-लाइन: ओवरलाइन; पाठ-सजावट-पंक्ति: लाइन-थ्रू; पाठ-सजावट-पंक्ति: झपकी; टेक्स्ट-डेकोरेशन-लाइन: अंडरलाइन ओवरलाइन; टेक्स्ट-डेकोरेशन-लाइन: ओवरलाइन अंडरलाइन लाइन-थ्रू; पाठ-सजावट-पंक्ति: विरासत; पाठ-सजावट-पंक्ति: प्रारंभिक;

1.2. सजावट पंक्ति शैली: पाठ-सजावट-शैली संपत्ति

ब्राउज़र समर्थन

अर्थात: —
किनारा: —
फ़ायरफ़ॉक्स: 36, 35 -मोज़-
क्रोम: 57
सफारी: 12.1, 7.1 -वेबकिट-
ओपेरा: 44
आईओएस सफारी: 8 -वेबकिट-
एंड्रॉइड के लिए यूसी ब्राउज़र: 11.8
एंड्रॉइड के लिए क्रोम: 73
सैमसंग इंटरनेट: 7.2

टेक्स्ट-सजावट-शैली संपत्ति तत्व में निर्दिष्ट पाठ को सजाने के लिए खींची गई रेखाओं की शैली निर्दिष्ट करती है। मानों का वही अर्थ है जो बॉर्डर-शैली संपत्ति के लिए है।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

पाठ-सजावट-शैली: ठोस; पाठ-सजावट-शैली: दोहरा; पाठ-सजावट-शैली: बिंदीदार; पाठ-सजावट-शैली: धराशायी; पाठ-सजावट-शैली: लहरदार; पाठ-सजावट-शैली: विरासत; पाठ-सजावट-शैली: प्रारंभिक;

1.3. सजावट रेखा का रंग: पाठ-सजावट-रंग गुण

ब्राउज़र समर्थन

अर्थात: —
किनारा: —
फ़ायरफ़ॉक्स: 36, 35 -मोज़-
क्रोम: 57
सफारी: 12.1, 7.1 -वेबकिट-
ओपेरा: 44
आईओएस सफारी: 8 -वेबकिट-
एंड्रॉइड के लिए यूसी ब्राउज़र: 11.8
एंड्रॉइड के लिए क्रोम: 73
सैमसंग इंटरनेट: 7.2

टेक्स्ट-डेकोरेशन-कलर प्रॉपर्टी टेक्स्ट-डेकोरेशन-लाइन वाले तत्व के लिए टेक्स्ट डेकोरेशन लाइन कलर सेट को निर्दिष्ट करती है।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

पाठ-सजावट-रंग: वर्तमानरंग; पाठ-सजावट-रंग: सामन; पाठ-सजावट-रंग: #00ff00; पाठ-सजावट-रंग: आरजीबीए(255, 128, 128, 0.5); पाठ-सजावट-रंग: पारदर्शी; पाठ-सजावट-रंग: विरासत; पाठ-सजावट-रंग: प्रारंभिक;

1.4. सजावट लाइन गुणों का एक त्वरित सारांश: पाठ-सजावट संपत्ति

ब्राउज़र समर्थन

अर्थात: —
किनारा: —
फ़ायरफ़ॉक्स: 36, 35 -मोज़-
क्रोम: 57
सफारी: 12.1, 7.1 -वेबकिट-
ओपेरा: 44
आईओएस सफारी: 8 -वेबकिट-
एंड्रॉइड के लिए यूसी ब्राउज़र: 11.8
एंड्रॉइड के लिए क्रोम: 73
सैमसंग इंटरनेट: 7.2

टेक्स्ट-डेकोरेशन प्रॉपर्टी टेक्स्ट-डेकोरेशन-लाइन टेक्स्ट-डेकोरेशन-स्टाइल टेक्स्ट-डेकोरेशन-कलर प्रॉपर्टीज को एक डिक्लेरेशन में लिखने का संक्षिप्त रूप है। लुप्त मानों को उनके प्रारंभिक मानों पर सेट किया जाता है। डिफ़ॉल्ट मान पाठ-सजावट: कोई ठोस वर्तमान रंग नहीं; . संपत्ति विरासत में नहीं मिली है. हालाँकि, सभी पाठ पंक्तियों की शैली एक तत्व के लिए समान होनी चाहिए।

1.5. डिज़ाइन लाइन की स्थिति: टेक्स्ट-रेखांकित-स्थिति संपत्ति

ब्राउज़र समर्थन

अर्थात: —
किनारा: 12
फ़ायरफ़ॉक्स: —
क्रोम: 71
सफारी: —
ओपेरा: —
आईओएस सफारी: —
एंड्रॉइड के लिए यूसी ब्राउज़र: ?
एंड्रॉइड के लिए क्रोम: 71
सैमसंग इंटरनेट: —

टेक्स्ट-अंडरलाइन-पोजीशन प्रॉपर्टी तत्व में निर्दिष्ट अंडरलाइन की स्थिति निर्धारित करती है।

संपत्ति विरासत में मिली है.

मान:
ऑटो	ब्राउज़र अंडरलाइन की स्थिति निर्धारित करने के लिए किसी भी एल्गोरिदम का उपयोग कर सकता है, हालांकि, लाइन को टेक्स्ट की बेसलाइन पर या नीचे रखा जाना चाहिए। डिफ़ॉल्ट मान।
अंतर्गत	अंडरलाइन तत्व की पाठ्य सामग्री के नीचे स्थित है। इस मामले में, रेखांकन आमतौर पर अवरोही को नहीं काटता है। यदि ऊर्ध्वाधर टाइपोग्राफ़िक मोड में किसी विशेष पक्ष को प्राथमिकता दी जाती है तो इस मान को बाएँ या दाएँ के साथ जोड़ा जा सकता है।
बाएं	ऊर्ध्वाधर टाइपोग्राफ़िक मोड में, रेखांकन पाठ के बाएँ किनारे पर संरेखित होता है। हालाँकि, इस मान की व्याख्या इस प्रकार की गई है।
सही	ऊर्ध्वाधर टाइपोग्राफी मोड में, रेखांकन पाठ के दाहिने किनारे पर संरेखित होता है। हालाँकि, इस मान की व्याख्या इस प्रकार की गई है।
इनहेरिट
प्रारंभिक

वाक्य - विन्यास

पाठ-अंडरलाइन-स्थिति: ऑटो; पाठ-अंडरलाइन-स्थिति: अंतर्गत; पाठ-रेखांकित-स्थिति: बाएँ; पाठ-रेखांकित-स्थिति: दाएँ; पाठ-अंडरलाइन-स्थिति: बाईं ओर के नीचे; पाठ-रेखांकित-स्थिति: दाईं ओर; पाठ-रेखांकित-स्थिति: विरासत; पाठ-रेखांकित-स्थिति: प्रारंभिक; चावल। 2. बाएँ और दाएँ मानों का उपयोग करके ऊर्ध्वाधर टाइपोग्राफी मोड में दोनों तरफ पाठ को रेखांकित करें

2. पाठ छाया: पाठ-छाया गुण

ब्राउज़र समर्थन

अर्थात: 10
किनारा: 12
फ़ायरफ़ॉक्स: 3.5
क्रोम: 4
सफारी: 4
ओपेरा: 10
आईओएस सफारी: 3.2
एंड्रॉइड के लिए यूसी ब्राउज़र: 11.8
एंड्रॉइड के लिए क्रोम: 73
सैमसंग इंटरनेट: 4

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

प्रत्येक छाया को पाठ और उसके डिज़ाइन तत्वों (पाठ-सजावट संपत्ति) दोनों पर लागू किया जाता है। आप एक ही समय में कई छायाएं निर्दिष्ट कर सकते हैं, उन्हें अल्पविराम से अलग करके निर्दिष्ट कर सकते हैं। छायाएँ एक-दूसरे को ओवरलैप करती हैं, लेकिन पाठ को ओवरलैप नहीं करती हैं। पहली छाया हमेशा दूसरी छाया के ऊपर स्थित होती है। संपत्ति विरासत में मिली है.

प्रत्येक छाया को दो या तीन लंबाई मानों और एक वैकल्पिक रंग द्वारा परिभाषित किया जाता है। अनुमत लंबाई 0 हैं।

संपत्ति विरासत में नहीं मिली है.

चावल। 3. टेक्स्ट-शैडो प्रॉपर्टी सिंटैक्स

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

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

वाक्य - विन्यास

पाठ-छाया: 2px 2px 4px गुलाबी; टेक्स्ट-छाया: #fc0 1px 0 10px; पाठ-छाया: 5px 5px #4D4644; टेक्स्ट-छाया: नीला 2px 5px; टेक्स्ट-छाया: 5px 10px; पाठ-छाया: विरासत; पाठ-छाया: प्रारंभिक;

2.1. पाठ छाया उदाहरण

पोस्टर छाया

पाठ की छाया

पाठ-छाया-1 (पृष्ठभूमि: #77एफ7डीई; रंग: सफेद; पाठ-छाया: -2पीएक्स -2पीएक्स 0 #4डी4644, 2पीएक्स -2पीएक्स 0 #4डी4644, -2पीएक्स 2पीएक्स 0 #4डी4644, 2पीएक्स 2पीएक्स 0 #4डी4644, 4पीएक्स 4पीएक्स 0 सफ़ेद, 5px 5px 0 सफ़ेद, 6px 6px 0 सफ़ेद अक्षर-अंक: 0.1em )

3डी छाया

पाठ की छाया

पाठ-छाया-2 (पृष्ठभूमि: रैखिक-ढाल(-45डिग्री, #FEE864, #F5965E); रंग: #f4f4f4; पाठ-छाया: -1px -1px सफेद, 1px 1px ग्रे, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 1 1px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )

छाया-पाठ

पाठ की छाया

टेक्स्ट-छाया-3 (पृष्ठभूमि: #FFE6DB; रंग: #FFE6DB; अक्षर-अंतरिक्ष: .1em; पाठ-छाया: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9पीएक्स 0 आरजीबीए(250, 111, 142, .3), 12पीएक्स 0 आरजीबीए(250, 111, 142, .2), 15पीएक्स 0 आरजीबीए(250, 111, 142, .1);

रेट्रो छाया

पाठ की छाया

पाठ-छाया-4 (रंग: #FB631E; अक्षर-अंतरिक्ष: .1em; पाठ-छाया: 4px 4px सफ़ेद, 6px 6px #D7CC88;)

स्तरित छाया

पाठ की छाया

टेक्स्ट-छाया-5 (पृष्ठभूमि: #f1f1f1; रंग: #fcc105; अक्षर-अंतरिक्ष: .1em; पाठ-छाया: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )

यह ट्यूटोरियल तत्वों की रूपरेखा के लिए विभिन्न प्रभाव बनाने के लिए कई सीएसएस तकनीकों का परिचय देता है।

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

छाया (पैडिंग: 20px; बॉर्डर: 1px सॉलिड #f0f0f0; बॉर्डर-बॉटम: 2px सॉलिड #ccc; -वेबकिट-बॉर्डर-रेडियस: 5px; -moz-बॉर्डर-रेडियस: 5px; बॉर्डर-रेडियस: 5px; )

डेंटेड ब्लॉक प्रभाव भी हासिल करना बहुत आसान है। CSS3 के गोल कोनों को जोड़ने से प्रभाव बढ़ता है:

दबाया हुआ (रंग: #fff; पैडिंग: 20px; बैकग्राउंड: #111; बॉर्डर: 1px सॉलिड #000; बॉर्डर-राइट: 1px सॉलिड #353535; बॉर्डर-बॉटम: 1px सॉलिड #353535; -वेबकिट-बॉर्डर-त्रिज्या: 5px; -मोज़-सीमा-त्रिज्या: 5पीएक्स; सीमा-त्रिज्या: 5पीएक्स )

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

Img.light (आउटलाइन: 1px सॉलिड #ddd; बॉर्डर-टॉप: 1px सॉलिड #fff; पैडिंग: 10px; बैकग्राउंड: #f0f0f0; ) img.dark (आउटलाइन: 1px सॉलिड #111; बॉर्डर-टॉप: 1px सॉलिड #555; पैडिंग: 10px; पृष्ठभूमि: #333;

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

# इंडेंटेड उल (मार्जिन: 20px 0; पैडिंग: 0; सूची-शैली: कोई नहीं; ) # इंडेंटेड उल ली (बॉर्डर-टॉप: 1px सॉलिड #333; बॉर्डर-बॉटम: 1px सॉलिड #111; ) # इंडेंटेड उल ली: फर्स्ट -चाइल्ड (बॉर्डर-टॉप: कोई नहीं;) # इंडेंटेड उल ली: लास्ट-चाइल्ड (बॉर्डर-बॉटम: कोई नहीं;) # इंडेंटेड उल ली ए (पैडिंग: 10px; डिस्प्ले: ब्लॉक; कलर: #fff; टेक्स्ट-डेकोरेशन: कोई नहीं) ; ) # इंडेंटेड उल ली ए: होवर (पृष्ठभूमि: #111;)