सीएसएस पॉडकास्ट - 024: ब्लेंड मोड
ड्यूटोन, फ़ोटोग्राफ़ी के लिए रंग में बदलाव करने का एक लोकप्रिय तरीका है. इससे इमेज को ऐसा लगता है कि वह सिर्फ़ दो अलग-अलग रंगों से बनी है: एक हाइलाइट के लिए और दूसरा लोलाइट के लिए. हालांकि, सीएसएस की मदद से यह कैसे किया जा सकता है?
ब्लेंड मोड और फ़िल्टर और स्यूडो-एलिमेंट जैसी अन्य तकनीकों का इस्तेमाल करके, इस इफ़ेक्ट को किसी भी इमेज पर लागू किया जा सकता है.
ब्लेंड मोड क्या है?
ब्लेंड मोड का इस्तेमाल आम तौर पर डिज़ाइन टूल में किया जाता है. जैसे, दो या उससे ज़्यादा लेयर के रंगों को मिलाकर, कॉम्पोज़िशन इफ़ेक्ट बनाने के लिए, Photoshop जैसे टूल में. रंगों के मिक्स होने के तरीके में बदलाव करके, बहुत ही दिलचस्प विज़ुअल इफ़ेक्ट बनाए जा सकते हैं. ब्लेंड मोड का इस्तेमाल, किसी काम के लिए भी किया जा सकता है. जैसे, सफ़ेद बैकग्राउंड वाली इमेज को अलग करना, ताकि वह पारदर्शी बैकग्राउंड वाली लगे.
सीएसएस के साथ डिज़ाइन टूल में उपलब्ध ज़्यादातर ब्लेंड मोड का इस्तेमाल किया जा सकता है. इसके लिए, mix-blend-mode
या background-blend-mode
प्रॉपर्टी का इस्तेमाल करें.
mix-blend-mode
, पूरे एलिमेंट पर ब्लेंडिंग लागू करता है और background-blend-mode
, किसी एलिमेंट के बैकग्राउंड पर ब्लेंडिंग लागू करता है.
background-blend-mode
का इस्तेमाल तब किया जाता है, जब किसी एलिमेंट पर एक से ज़्यादा बैकग्राउंड हों और आपको उन सभी को एक-दूसरे में ब्लेंड करना हो.
mix-blend-mode
, पूरे एलिमेंट पर असर डालता है. इसमें इसके स्यूडो-एलिमेंट भी शामिल हैं.
इसका इस्तेमाल करने का एक उदाहरण, ड्यूटोन इमेज के शुरुआती उदाहरण में दिया गया है. इसमें, एलिमेंट पर रंग की लेयर, उसके स्यूडो-एलिमेंट के ज़रिए लागू की गई हैं.
ब्लेंड मोड दो कैटगरी में आते हैं: अलग किए जा सकने वाले और अलग नहीं किए जा सकने वाले. अलग-अलग हिस्सों में ब्लेंड करने वाले मोड में, आरजीबी जैसे हर कलर कॉम्पोनेंट को अलग-अलग माना जाता है. अलग नहीं किए जा सकने वाले ब्लेंड मोड में, सभी कलर कॉम्पोनेंट को एक जैसा माना जाता है.
ब्राउज़र के साथ काम करना
mix-blend-mode
background-blend-mode
अलग-अलग ब्लेंड मोड
सामान्य
यह ब्लेंड मोड डिफ़ॉल्ट रूप से लागू होता है. इससे, किसी ऐलिमेंट के दूसरे ऐलिमेंट के साथ ब्लेंड होने के तरीके में कोई बदलाव नहीं होता.
गुणा
multiply
ब्लेंड मोड, एक-दूसरे के ऊपर कई ट्रांसपेरेंसी स्टैक करने जैसा है.
सफ़ेद पिक्सल पारदर्शी दिखेंगे और काले पिक्सल काले दिखेंगे.
इनके बीच की कोई भी वैल्यू, चमक (लाइट) की वैल्यू को बढ़ा देगी.
इसका मतलब है कि हल्के रंग ज़्यादा हल्के और गहरे रंग ज़्यादा गहरे हो जाते हैं. ज़्यादातर मामलों में, गहरे रंग का नतीजा मिलता है.
.my-element {
mix-blend-mode: multiply;
}
स्क्रीन
screen
का इस्तेमाल करने से, light वैल्यू का गुणा हो जाता है. यह multiply
के उलट असर डालता है. साथ ही, इससे अक्सर ज़्यादा चमकदार नतीजा मिलता है.
.my-element {
mix-blend-mode: screen;
}
ओवरले
यह ब्लेंड मोड—overlay
—multiply
और screen
को जोड़ता है.
गहरे बेस रंग गहरे हो जाते हैं और हल्के बेस रंग हल्के हो जाते हैं.
हालांकि, 50% स्लेटी जैसे मिड-रेंज वाले रंगों पर इसका कोई असर नहीं पड़ता.
.my-element {
mix-blend-mode: overlay;
}
गहरा
darken
ब्लेंड मोड, सोर्स इमेज और बैकग्राउंड इमेज के गहरे रंग की चमक की तुलना करता है और दोनों में से सबसे गहरे रंग को चुनता है.
यह हर कलर चैनल के लिए, चमक (जैसे कि multiply
और screen
करेंगे) के बजाय आरजीबी वैल्यू की तुलना करके ऐसा करता है.
darken
और lighten
के साथ, तुलना करने की इस प्रोसेस से अक्सर नई कलर वैल्यू बनाई जाती हैं.
.my-element {
mix-blend-mode: darken;
}
हल्का
lighten
का इस्तेमाल करने पर, darken
के ठीक उलट काम होता है.
.my-element {
mix-blend-mode: lighten;
}
कलर डॉज
color-dodge
का इस्तेमाल करने पर, सोर्स कलर को दिखाने के लिए बैकग्राउंड का रंग हल्का हो जाता है.
इस मोड का, पूरी तरह से काले रंग पर कोई असर नहीं पड़ता.
.my-element {
mix-blend-mode: color-dodge;
}
कलर बर्न
color-burn
ब्लेंड मोड, multiply
ब्लेंड मोड से काफ़ी मिलता-जुलता है. हालांकि, यह कंट्रास्ट बढ़ाता है. इससे मिड-टोन ज़्यादा संतृप्त होते हैं और हाइलाइट कम हो जाते हैं.
.my-element {
mix-blend-mode: color-burn;
}
हार्ड लाइट
hard-light
का इस्तेमाल करने पर, ज़्यादा कंट्रास्ट दिखता है.
यह ब्लेंड मोड, चमक की वैल्यू को स्क्रीन करता है या उनका गुणा करता है.
अगर पिक्सल की वैल्यू 50% से हल्की स्लेटी है, तो इमेज को हल्का कर दिया जाता है, जैसे कि उसे स्क्रीन किया गया हो. अगर यह गहरे रंग का है, तो इसका मतलब है कि इसे कई बार इस्तेमाल किया गया है.
.my-element {
mix-blend-mode: hard-light;
}
सॉफ़्ट लाइट
soft-light
ब्लेंड मोड, overlay
का कम असरदार वर्शन है.
यह कम कंट्रास्ट के साथ, उसी तरह काम करता है.
.my-element {
mix-blend-mode: soft-light;
}
अंतर
difference
के काम करने का तरीका समझने के लिए, फ़ोटो नेगेटिव के काम करने का तरीका समझना ज़रूरी है.
difference
ब्लेंड मोड, हर पिक्सल के फ़र्क़ की वैल्यू लेता है और हल्के रंगों को उलट देता है.
अगर रंग की वैल्यू एक जैसी हैं, तो वे काली हो जाती हैं.
वैल्यू में अंतर उलट जाएगा.
.my-element {
mix-blend-mode: difference;
}
एक्सक्लूज़न
exclusion
का इस्तेमाल करना, difference
का इस्तेमाल करने जैसा ही है. हालांकि, एक जैसे पिक्सल के लिए काले रंग के बजाय, यह 50% स्लेटी रंग दिखाएगा. इससे कम कंट्रास्ट वाला सॉफ़्ट आउटपुट मिलेगा.
.my-element {
mix-blend-mode: exclusion;
}
अलग नहीं किए जा सकने वाले ब्लेंड मोड
इन ब्लेंड मोड को एचएसएल color कॉम्पोनेंट की तरह माना जा सकता है. हर फ़ंक्शन, ऐक्टिव लेयर से कोई खास कॉम्पोनेंट वैल्यू लेता है और उसे दूसरे कॉम्पोनेंट वैल्यू के साथ मिक्स करता है.
रंग
hue
ब्लेंड मोड, सोर्स कलर का रंग लेता है और उसे बैकग्राउंड कलर के संतृप्ति और चमक पर लागू करता है.
.my-element {
mix-blend-mode: hue;
}
गहरा या फीका रंग
यह hue
की तरह काम करता है, लेकिन saturation
को ब्लेंड मोड के तौर पर इस्तेमाल करने पर, सोर्स कलर की संतृप्तता, बैकड्रॉप कलर के ह्यू और चमक पर लागू होती है.
.my-element {
mix-blend-mode: saturation;
}
रंग
color
ब्लेंड मोड, सोर्स कलर के ह्यू और संतृप्ति के साथ-साथ बैकग्राउंड कलर की चमक से एक रंग बनाएगा.
.my-element {
mix-blend-mode: color;
}
चमक (ल्यूमिनोसिटी)
आखिर में, luminosity
, color
का उलटा होता है.
यह सोर्स कलर की चमक और बैकग्राउंड कलर के ह्यू और सैचुरेशन से एक रंग बनाता है.
.my-element {
mix-blend-mode: luminosity;
}
isolation
प्रॉपर्टी
अगर isolation
प्रॉपर्टी की वैल्यू को isolate
पर सेट किया जाता है, तो यह एक नया स्टैकिंग कॉन्टेक्स्ट बनाएगा. इससे, प्रॉपर्टी को बैकग्राउंड लेयर के साथ ब्लेंड होने से रोका जा सकेगा.
जैसा कि आपने z-index मॉड्यूल में सीखा है कि जब कोई नया स्टैकिंग कॉन्टेक्स्ट बनाया जाता है, तो वह लेयर बेस लेयर बन जाती है.
इसका मतलब है कि पैरंट-लेवल के ब्लेंड मोड अब लागू नहीं होंगे. हालांकि, isolation: isolate
सेट वाले एलिमेंट के अंदर मौजूद एलिमेंट अब भी ब्लेंड हो सकते हैं.
ध्यान दें कि यह background-blend-mode
के साथ काम नहीं करता, क्योंकि बैकग्राउंड प्रॉपर्टी पहले से ही अलग है.
देखें कि आपको क्या समझ आया
ब्लेंड-मोड के बारे में अपनी जानकारी को टेस्ट करें
इनमें से कौनसे सीएसएस ब्लेंड मोड हैं?
अगर आपको अलग-अलग रंगों को अलग-अलग तरीकों से ब्लेंड करना है, तो आपको ब्लेंड मोड के किस स्टाइल की ज़रूरत होगी?