सीएसएस पॉडकास्ट - 024: ब्लेंड मोड
Duotone फ़ोटोग्राफ़ी के लिए एक मशहूर कलर ट्रीटमेंट है. इससे इमेज को ऐसा लगता है कि इसमें सिर्फ़ दो कंट्रास्ट रंगों का इस्तेमाल हुआ है: एक हाइलाइट के लिए और दूसरा कम रोशनी के लिए. हालांकि, सीएसएस के साथ यह काम कैसे किया जा सकता है?
ब्लेंड मोड और ऐसी अन्य तकनीकों का इस्तेमाल करके जिनके बारे में आपको जानकारी है, जैसे कि फ़िल्टर और स्यूडो एलिमेंट. इनका इस्तेमाल करके, इस इफ़ेक्ट को किसी भी इमेज पर लागू किया जा सकता है.
ब्लेंड मोड क्या है?
ब्लेंड मोड का इस्तेमाल आम तौर पर 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 का इस्तेमाल करने से लाइट वैल्यू गुणा हो जाती हैं—यह 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;
}
अलग न किए जा सकने वाले ब्लेंड मोड
एचएसएल के रंग कॉम्पोनेंट जैसे ब्लेंड मोड के बारे में सोचा जा सकता है. हर एक चालू लेयर से एक खास कॉम्पोनेंट की वैल्यू लेता है और उसे दूसरे कॉम्पोनेंट की वैल्यू के साथ मिला देता है.
रंग
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 के साथ काम नहीं करता, क्योंकि
बैकग्राउंड प्रॉपर्टी पहले से ही अलग है.
आपने जो सीखा है उसकी जांच करें
ब्लेंड मोड के बारे में अपनी जानकारी परखें
सीएसएस ब्लेंड मोड इनमें से कौनसे हैं?
अगर आपको अलग-अलग रंगों को अलग-अलग ब्लेंड करना है, तो आपको किस स्टाइल के ब्लेंड मोड की ज़रूरत होगी?