पाठ के लिए छाया के साथ 7 शांत उदाहरण जिन्हें आप याद नहीं कर सकते हैं

पिछले दो लेखों में, हमने पेश किया कि CSS3 छायाएं कैसे काम करती हैं: बॉक्स-छाया और पाठ-छाया । आज, अंतिम विषय को जारी रखते हुए, हम दिलचस्प प्रभावों को प्राप्त करने के लिए पाठ के लिए छाया का उपयोग करने के कुछ और सुंदर उदाहरणों को देखेंगे।

ईमानदारी से, कुछ विचारों (दो या तीन) को फ़ोटोशॉप के साथ काम करने पर विभिन्न लेखों में देखा गया था - और मैं सोच रहा था कि क्या पाठ-छाया का उपयोग करके समान प्रभाव प्राप्त करना संभव है।

मुझे आपको तुरंत चेतावनी भी देनी चाहिए कि आपके पसंदीदा ब्राउज़र में कई उदाहरण (यदि ऐसा न हो कि बहुमत कहें) काम नहीं कर सकते, क्योंकि यह अभी भी प्रसार-दूरी के साथ पाठ-छाया के वर्तमान संस्करण का समर्थन नहीं करता है। लेकिन आप हमेशा नई सुविधाओं का परीक्षण करने के लिए इंटरनेट एक्सप्लोरर 10 के "प्लेटफ़ॉर्म पूर्वावलोकन" संस्करण को स्थापित कर सकते हैं।

यह भी ध्यान देने योग्य है कि लगभग सभी उदाहरण hsl फ़ंक्शन के माध्यम से रंग परिभाषा का उपयोग करते हैं - यह बहुत सुविधाजनक है, क्योंकि आप आसानी से चमक को बदलने और संतृप्ति को बदल सकते हैं, जो छाया के साथ काम करते समय बेहद उपयोगी है।

आर्केड प्यार

पहले उदाहरण में, हम एक विशेष सब्सट्रेट पर उत्तल पत्र बनाने की कोशिश करेंगे। और शुरू करने के लिए, हमारे पास बस उस रंग का शिलालेख है जिसकी हमें आवश्यकता है:

color: hsl(80, 70%, 55%); 

अगला, अनुक्रमिक कार्य अक्षरों के उत्तलता के गठन पर शुरू होता है, विकर्ण के साथ 1px की शिफ्ट के साथ छाया के सुसंगत अनुप्रयोग के कारण (ध्यान दें कि छाया रंग पाठ रंग के सापेक्ष कैसे सेट किया गया है!)।

 text-shadow: -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%); 

यहां आप तुरंत कुछ और स्ट्रोक जोड़ सकते हैं: पाठ के चारों ओर एक छोटा सा सफेद स्ट्रोक और छाया के नीचे कालापन (यह संक्रमण को नरम करता है):

 text-shadow: 0 0 2px #fff, -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), -2px -2px 2px hsl(80, 10%, 15%); 

अब, सब्सट्रेट बनाने के लिए, आपको छाया का विस्तार करने की आवश्यकता है (4 वीं पैरामीटर स्प्रे दूरी है):

 text-shadow: ... -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%); 

अंत में, शिलालेख के लिए, सब्सट्रेट के साथ, पृष्ठभूमि पर धीरे से उतरने के लिए, आपको नीचे थोड़ा छायांकन जोड़ने की आवश्यकता है:

 text-shadow: ... -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%); 

अंतिम परिणाम

 color: hsl(80, 70%, 55%); text-shadow: 0 0 2px #fff, /*   */ -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), /*    */ -2px -2px 2px hsl(80, 10%, 15%), /*  */ -2px -2px 0 7px hsl(60, 80%, 95%), -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%), /*   */ -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%); 

रंग खुशी

दूसरा उदाहरण पहले से कुछ हद तक निरस्त है: हम एक सुंदर पाठ पिरामिड के साथ समाप्त करने के लिए कई रंगीन सब्सट्रेट बनाने की कोशिश करेंगे। हम फिर से सामान्य पाठ शीर्षक के साथ शुरू करते हैं:

 color: hsl(330, 100%, 50%); 

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

 text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5); 

इसके बाद, एक स्थानांतरित किए गए ह्यू के साथ एक विस्तारित सब्सट्रेट जोड़ें और इसके लिए बिल्कुल समान छाया बनाएं (ध्यान दें कि ऊर्ध्वाधर बदलाव के अलावा, केवल दो पैरामीटर बदल जाते हैं - छाया का आकार और आकार):

 text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5); 

यह कई बार एक ही तकनीक को दोहराता रहता है, सब्सट्रेट के आकार को बढ़ाता है और अपनी छाया को सही दिशा में स्थानांतरित करता है:

 text-shadow: ... 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), ... 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5); 

अंतिम परिणाम

 color: hsl(330, 100%, 50%); text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 18px hsl(50, 100%, 50%) 0 11px 0 18px hsl(50, 100%, 25%), 0 12px 2px 18px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 30px hsl(70, 100%, 50%), 0 14px 0 30px hsl(70, 100%, 25%), 0 15px 2px 30px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5); 

चॉकलेट

तीसरा उदाहरण वैकल्पिक छाया के साथ प्रयोगों से दुर्घटना से लगभग प्राप्त किया गया था। पिछले मामलों की तरह, आइए शिलालेख का रंग निर्धारित करके शुरू करें:

 color: hsl(20, 100%, 20%); 

क्लासिक 3D शिलालेख के साथ मैंने पहली चीज़ शुरू की:

 text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 16%), -3px 3px 0 0 hsl(20, 100%, 16%), -4px 4px 0 0 hsl(20, 100%, 16%), -5px 5px 0 0 hsl(20, 100%, 16%), -6px 6px 0 0 hsl(20, 100%, 16%); 

अगला, मैंने धीरे-धीरे छाया को हटाने, चमक को हटाने, और इसे अलग करने का फैसला किया, विकर्ण पारी को बढ़ाते हुए (इस मामले में, बस सीढ़ी मैंने ऊपर लिखी है):

 text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 14%), -4px 4px 0 0 hsl(20, 100%, 12%), -6px 6px 0 0 hsl(20, 100%, 10%), -8px 8px 0 0 hsl(20, 100%, 8%), -10px 10px 0 0 hsl(20, 100%, 6%); 

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

 text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 -1px hsl(20, 100%, 14%), -4px 4px 0 -2px hsl(20, 100%, 12%), -6px 6px 0 -3px hsl(20, 100%, 10%), -8px 8px 0 -4px hsl(20, 100%, 8%), -10px 10px 0 -5px hsl(20, 100%, 6%); 

यह चीजों को थोड़ा चिकना करने के लिए रहता है (वैसे, धुंधला या रंग अलग करके, आप मध्यवर्ती स्ट्रिप्स सम्मिलित कर सकते हैं):

 text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 8%), -10px 10px 2px -5px hsl(20, 100%, 6%); 

छोटी बारीकियों पर थोड़ा अधिक खेलने के बाद, मुझे निम्नलिखित परिणाम मिला ...

अंतिम परिणाम

 color: hsl(20, 100%, 20%); text-shadow: 0 0 1px hsl(20, 100%, 18%), -1px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 9%), -10px 10px 3px -5px hsl(20, 100%, 8%), -12px 12px 2px -6px hsl(20, 100%, 7%), -14px 14px 2px -7px hsl(20, 100%, 6%), -15px 15px 2px -8px hsl(20, 100%, 5%), -15px 15px 0 -8px hsla(20, 50%, 10%, 0.25); 

क्रीम केक

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

 color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%); 

आइए शिलालेख के थोड़ा धुंधला से शुरू करें। ऐसा करने के लिए, मैंने दो छायाएं जोड़ीं: पहला (ऊपरी) शिलालेख के समान छाया में बनाया गया है, लेकिन कम संतृप्त रंग के साथ, दूसरा (निचला) बहुत धुंधला है, थोड़ा लाल, थोड़ा उज्जवल और पारभासी (यानी, यह ओवरलैप हो जाएगा) वह सब कुछ जो इसके तहत होगा):

 text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), 0 0 4px 4px hsla(30, 100%, 55%, 0.5); 

अगला, हम एक हल्के मलाईदार सब्सट्रेट जोड़ते हैं (छाया को पीले रंग में स्थानांतरित कर दिया जाता है, और रंग को हल्केपन के साथ बनाया जाता है):

 text-shadow: ... -1px 1px 2px 7px hsl(45, 60%, 95%); 

अब हमें सब्सट्रेट में थोड़ी मात्रा जोड़ने की आवश्यकता है, जिसके लिए हम एक ऑफसेट के साथ छाया सेट करते हैं, इसे पाठ के समान रंग बनाते हैं, लेकिन थोड़ा कम संतृप्त। कृपया ध्यान दें कि इस तथ्य के कारण कि लेबल की पृष्ठभूमि छाया से अधिक विस्तारित है (7px बनाम 4px), यह पता चला है कि अंतिम छाया पृष्ठभूमि से छोटी है:

 text-shadow: ... -3px 3px 1px 4px hsl(35, 70%, 30%); 

और अंतिम स्पर्श: इसी तरह पृष्ठभूमि के साथ नरम संयोजन के लिए सब्सट्रेट को धुंधला करें:

 text-shadow: ... -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

अंतिम परिणाम

 color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%); text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), /*    */ 0 0 4px 4px hsla(30, 100%, 55%, 0.5), /*  */ -1px 1px 2px 7px hsl(45, 60%, 95%), /*   */ -3px 3px 1px 4px hsl(35, 70%, 30%), /*    */ -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

प्लास्टिक

इसलिए ... फिर मैंने अंतिम उदाहरण के साथ खेलना शुरू कर दिया, यह सोचकर कि यह सब कहां हो सकता है। और, निश्चित रूप से, कई अन्य उदाहरणों के रूप में, दो घटक यहां महत्वपूर्ण थे: स्वयं फॉन्ट (इस उदाहरण में, केबिनस्कैच) और इसके लिए लागू छाया प्रभाव। सभी परिवर्तनों को ट्रैक करने के लिए सरल पाठ के साथ फिर से शुरू करते हैं:

 color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%); 

सबसे पहले, आइए शिलालेख के चारों ओर थोड़ा सा धुंधला जोड़ दें (ध्यान दें कि यहां छाया रंग मूल शिलालेख की तुलना में काफी हल्का है, इसलिए लागू छाया वाला अंतिम थोड़ा अधिक संतृप्त और हल्का दिखता है:

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%); 

अगला, आप थोड़ा धुंधला के साथ एक अतिरिक्त स्ट्रोक जोड़ सकते हैं (छाया और कम लपट के आकार में वृद्धि पर ध्यान दें):

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 9px hsl(65, 60%, 20%); 

यह थोड़ा गहरा निकला - हमें इसे हल्का करने के लिए दो छायाओं के बीच एक और छाया डालने की आवश्यकता है:

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%); 

अब मज़ा शुरू होता है - वास्तव में, मुझे पूरे स्ट्रोक की आवश्यकता नहीं है, लेकिन इसके कुछ हिस्सों को ही। अतिरिक्त छिपाने के लिए, इसके शीर्ष पर आप पृष्ठभूमि के रंग की कुछ छाया खींच सकते हैं (ध्यान दें कि ये छाया स्ट्रोक से आकार में छोटे हैं, लेकिन एक तरफ या किसी अन्य पर स्थानांतरित हो गए हैं):

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%); 

यदि आवश्यक हो, तो आप स्ट्रोक से छाया तक संक्रमण को सुचारू करने के लिए कुछ अतिरिक्त स्ट्रोक जोड़ सकते हैं।

अंतिम परिणाम

 color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%); text-shadow: 0 0 3px 2px hsl(65, 60%,75%), /*   */ 0 0 1px 5px hsl(65, 60%,95%), /*     */ 0 0 4px 4px hsla(65, 100%, 30%, 0.4), /*   */ 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), /*   */ 0 0 1px 9px hsl(65, 60%, 20%); 

चित्रकारी

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

 color: transparent; background: hsl(0, 75%,45%); 

अब रास्ता साफ हो गया है! मैं तुरंत कहूंगा कि आपको इस पर ध्यान देना चाहिए: हम सफेद रंग में आकर्षित करेंगे, इसलिए केवल एक चीज जो मायने रखती है वह है 100% पर निर्धारित चमक। पाठ के अंदर एक स्ट्रोक बनाने के लिए, बस छाया का आकार कम करें:

 text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75); 

पारदर्शिता, बदलाव और आकार बदलती हुए कुछ और स्ट्रोक जोड़ें:

 text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65); 

छाया को आकार देने और बढ़ाने के लिए, आप एक सामान्य धुंधला (और आंशिक रूप से पारदर्शी) छाया जोड़ सकते हैं:

 text-shadow: ... 0 0 1px 2px hsla(0, 60%, 100%, 0.65); 

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

अंतिम परिणाम

 color: transparent; background: hsl(0, 75%,45%); text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65), /*   */ 0 0 1px 2px hsla(0, 60%, 100%, 0.65), /*    */ -3px -3px 1px 2px hsla(0, 60%, 100%, 0.25), 3px 3px 1px 2px hsla(0, 60%, 100%, 0.25); 

ऊपर और नीचे

पाठ की पारदर्शिता का अंतिम प्रभाव जारी है :) यहां हम भी पूरी तरह से पारदर्शी पाठ के साथ शुरू करते हैं (मैंने इसे पृष्ठभूमि से अलग करने के लिए चुना है):

 color: transparent; 

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

 text-shadow: 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0); 

अब, इसे एक बड़ा आकार देने के लिए, मैं शीर्ष पर एक छाया जोड़ूंगा, मूल रूप से स्रोत पाठ का आकार दोहरा रहा हूं:

 text-shadow: 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), ... 

अंत में, नीचे के समान, चलो एक ऊपरी 3 डी छाया जोड़ते हैं, लेकिन हल्का और अधिक पारदर्शी (तीखेपन को बढ़ाने के लिए, सबसे ऊपरी छाया को बाकी की तुलना में थोड़ा कम पारदर्शी बनाया जाता है):

 text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), ... 

अंतिम परिणाम

 color: transparent; text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0); 

आप रंगों और संतृप्ति के साथ भी खेल सकते हैं, उदाहरण के लिए, नीचे का लाल और ऊपर का नीला, या कुछ और ...

इंटरनेट एक्सप्लोरर

यह सब अपने आप करने की कोशिश करने के लिए, Internet Explorer 10 के "प्लेटफ़ॉर्म पूर्वावलोकन" संस्करण को स्थापित करना न भूलें। छाया तुम्हारे साथ हो सकता है!