ब्लेंड मोड

द सीएसएस पॉडकास्ट - 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

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;
}

अलग नहीं किए जा सकने वाले ब्लेंड मोड

ये ब्लेंड मोड, HSL 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 के साथ काम नहीं करता है क्योंकि बैकग्राउंड प्रॉपर्टी पहले से ही अलग है.

देखें कि आपको कितना समझ आया है

ब्लेंड-मोड के बारे में अपनी जानकारी परखें