परिचय

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

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

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

तकनीक

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

सीएसएस कोड का उपयोग किया गया

यहां वह सीएसएस कोड है जिसका उपयोग हमने फोटोरिअलिस्टिक छायाएं बनाने के लिए किया था:

फ़िल्टर: ड्रॉप-शैडो(17पीएक्स 17पीएक्स 13पीएक्स आरजीबीए(0, 0, 0, 0.3)) ड्रॉप-शैडो(7पीएक्स 7पीएक्स 4.5पीएक्स आरजीबीए(0, 0, 0, 0.3));

कोड स्पष्टीकरण

पहली ड्रॉप-छाया: 17पीएक्स 17पीएक्स 13पीएक्स आरजीबीए(0, 0, 0, 0.3): यह छाया सबसे बड़ी और सबसे अधिक फैली हुई है। पैरामीटर X और Y दोनों अक्षों पर 17px विस्थापित छाया दर्शाते हैं, जिसमें 13px का धुंधलापन और 30% की अस्पष्टता होती है।

दूसरा ड्रॉप-शैडो: 7px 7px 4.5px rgba(0, 0, 0, 0.3): यह छाया पहले की तुलना में छोटी और कम फैली हुई है। पैरामीटर 4.5px के धुंधलेपन और 30% की अस्पष्टता के साथ, X और Y दोनों अक्षों पर 7px विस्थापित छाया दर्शाते हैं।

इन दो छायाओं का संयोजन गहराई और यथार्थवाद की भावना पैदा करता है जिसे एक ही छाया से हासिल करना मुश्किल है।

दृश्य उदाहरण यहां एक दृश्य उदाहरण दिया गया है कि हमारी फोटोरिअलिस्टिक छाया तकनीक का उपयोग करके अंतिम परिणाम कैसा दिखता है:

दो बिंदुओं पर प्रकाश डालना महत्वपूर्ण है:

- छाया शुद्ध सफेद के बजाय नरम ग्रे टोन पर सबसे अच्छा काम करती है।

— इस मामले में, छायाएं शीर्ष-दृश्य परिप्रेक्ष्य के लिए डिज़ाइन की गई हैं। अन्य फोटोग्राफिक कोणों में, यह अच्छी तरह से काम नहीं करेगा।

व्यावहारिक अनुप्रयोगों

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

सीएसएस में ऑनलाइन फोटोरियलिस्टिक शैडो जेनरेटर

आप मंदारिनावेब्स वेबसाइट में ऑनलाइन जनरेटर पा सकते हैं

निष्कर्ष

हम इस तकनीक को डेवलपर और डिजाइनर समुदाय के साथ साझा करने के लिए बहुत उत्साहित हैं। हमारा मानना ​​है कि यह किसी भी पेशेवर के लिए अपने वेब प्रोजेक्ट के सौंदर्यशास्त्र को बढ़ाने के लिए एक मूल्यवान उपकरण हो सकता है। हमें आपकी प्रतिक्रिया सुनना और यह देखना अच्छा लगेगा कि आप इस तकनीक को अपने काम में कैसे लागू करते हैं।