🥈 😜 👩🏽‍🎤 सीएसएस: पारभासी की भूमि में रोमांच 🧝🏻 ✊🏿 📻

हाल ही में मुझे एक लैंडिंग पृष्ठ को सही करने के लिए कहा गया था। मुझे उनके कोड में जो मिला वह एक छवि थी जिसके शीर्ष पर दो पारभासी तत्व अतिव्यापी थे। संपत्ति में दोनों एक ही आरजीबी रंग मूल्यों के साथ background-color। यह कुछ इस तरह देखा गया:

<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>

ऐसे दो तत्वों का उपयोग करने की आवश्यकता नहीं थी। यह तब तक आवश्यक हो सकता है जब तक कि इस तथ्य के कारण कि केवल एक ऐसे तत्व ने छवि को पर्याप्त रूप से रंग नहीं दिया। किसी कारण के लिए, पृष्ठ के लेखक ने फैसला किया कि छवि पर आरोपित एक और पारभासी तत्व जोड़ना opacityपहले पैरामीटर के मूल्य को बढ़ाने से बेहतर था । नतीजतन, मैंने परतों में से एक से छुटकारा पाने का फैसला किया और शेष एक के पैरामीटर को सेट किया ताकि बाहरी छवि पहले वाले के समान दिखे। यह सब अच्छा है, लेकिन सवाल उठता है: शेष तत्व के पैरामीटर को कैसे समायोजित किया जाए ताकि परिणाम दो पारभासी परतों को लागू करने के समान हो?

opacityopacity

यदि आप मुखौटे की रचना पर मेरा यह लेख पढ़ते हैं, तो आप पहले से ही अनुमान लगा सकते हैं कि उचित मूल्य कैसे चुनना है। आखिरकार, यहां उसी फॉर्मूले का उपयोग किया जाता है, जिसका उपयोग करके ट्रांसलूसेंट तत्वों की संरचना के लिए उपयोग किया गया था mask-composite: add। यदि पारदर्शिता मानों के साथ दो परतें हैं a0और a1, तो परिणामस्वरूप संकेतक के मूल्य की गणना निम्नानुसार की जाती है:

a0 + a1 - a0*a1

यहां आप एक इंटरेक्टिव डेमो पा सकते हैं, जिसे देखकर आप तुलना कर सकते हैं कि छवि कैसी दिखती है, दो परतों के साथ टोंड, जिनमें से गुणों opacity( a0और a1) को स्लाइडर्स की मदद से नियंत्रित किया जा सकता है, और उसी छवि को एक लेयर प्रॉपर्टी द्वारा टोंड किया जाता है opacityजिसकी गणना सूत्र के अनुसार की जाती है a0 + a1 — a0*a1।

एक छवि को टेप करने के लिए विकल्प, जिनमें से दो प्रतियां एक दूसरे के बगल में प्रदर्शित होती हैं।

यह दिलचस्प है कि जिन क्षेत्रों में दो पारभासी तत्व स्थित हैं, और एक ऐसा तत्व, एक ही देखो अगर उनके नीचे की छवि प्रदर्शित नहीं होती है (आप चेकबॉक्स का उपयोग करके छवि आउटपुट को अक्षम कर सकते हैं स्क्रीन के नीचे स्थित है)। लेकिन अगर कोई छवि इन परतों के नीचे प्रदर्शित होती है, तो इसके दो विकल्प थोड़े अलग हैं। शायद यह अंतर केवल ऑप्टिकल भ्रम का परिणाम है, हो सकता है कि छवियों के कुछ हिस्से मेरे लिए हल्के या गहरे लग रहे हों, जैसे वे वास्तव में हैं।

वे निश्चित रूप से अलग करता है, तो आप उन्हें एक दूसरे के बगल प्रदर्शित नहीं करते नहीं लगते, लेकिन बस दो परतों जिसका संपत्ति मूल्यों के बीच स्विचopacityकरने के लिए बराबर हैंa0औरa1, और एक परत, जिसका मूल्य opacityसूत्र द्वारा पाया जाता है a0 + a1 — a0*a1। यहाँ एक प्रासंगिक उदाहरण है।

एक और दो पारभासी परतों के बीच स्विच करने की क्षमता के साथ छवि टिनिंग के वेरिएंट।

इस उदाहरण को अधिक परतों तक बढ़ाया जा सकता है। इस मामले में, पहले दो निचली परतों की पारदर्शिता के बराबर, नई परत की पारदर्शिता की गणना करें। फिर परत की पारदर्शिता का पता लगाएं, नई परत की पारदर्शिता के बराबर है, और इसके ठीक ऊपर की परत है। यह ऑपरेशन तब तक दोहराया जाता है जब तक सभी परतों को संसाधित नहीं किया जाता है।

एक ही परत के लिए कई पारभासी परतों को कम करना।

इसी तरह के प्रयोगों से मुझे लगा कि कैसे एक अपारदर्शी पृष्ठभूमि छवि के मापदंडों की गणना की जाए, जो एक अपारदर्शी परत (c0) केबराबर हैऔर उस पर पारभासी परतदार परत (c1जिसकी पारदर्शिता निर्धारित हैa)। इस मामले में, अंतिम छवि, जो एक एकल परत है, चैनल द्वारा मूल छवि चैनल को संसाधित करके पाया जा सकता है, जबकि परिणामी चैनलों के रंग मूल्यों की गणना निम्न सूत्र द्वारा की जाती है:

ch0 + (ch1 - ch0)*a

यहाँ ch0अपारदर्शी निचली परत का चैनल है ( या red, लाल, हरे और नीले रंगों के लिए), ऊपरी पारभासी परत का संगत चैनल है, और संकेतक एक संकेतक है जो समान पारभासी परत की पारदर्शिता निर्धारित करता है। यदि आप SCSS- कोड के रूप में इन तर्कों को व्यक्त करते हैं, तो आपको निम्नलिखित मिलते हैं:greenbluech1a

/*       */
@function res-ch($ch0, $ch1, $a) {
  @return $ch0 + ($ch1 - $ch0)*$a
}

@function res-col($c0, $c1, $a) {
  $ch: 'red' 'green' 'blue'; /*   */
  $nc: length($ch); /*   */
  $ch-list: ();

  @for $i from 0 to $nc {
    $fn: nth($ch, $i + 1);
    $ch-list: $ch-list, 
      res-ch(call($fn, $c0), call($fn, $c1), $a);
  }

  @return RGB($ch-list)
}

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

एक अपारदर्शी परत के लिए एक पारभासी परत को लागू करने के परिणाम

डिवाइस, ऑपरेटिंग सिस्टम और ब्राउज़र के आधार पर, आप देखेंगे कि इस उदाहरण में रंग पैनल समान दिखते हैं ... या नहीं। सूत्र सही है, लेकिन विभिन्न वातावरणों में दो स्रोत परतों को कैसे संसाधित किया जाता है, यह अलग-अलग हो सकता है।

छवि का बायां हिस्सा दो परतों को एक में कम करने का अपेक्षित परिणाम है। दाईं ओर पता चलता है कि कैसे, जब दो परतें संयुक्त होती हैं (छवि के ऊपरी दाएं भाग से), नीचे दाईं ओर दिखाई गई परत अपेक्षा से भिन्न दिख सकती है।

मैंने ट्विटर उपयोगकर्ताओं सेइस उदाहरण के सरलीकृत परीक्षण संस्करण का उपयोग करके स्क्रीनशॉट भेजने केलिए कहा। मुझे मिली प्रतिक्रिया को देखते हुए, ऐसा लगता है कि दो पैनल हमेशा मोबाइल ब्राउज़र (एंड्रॉइड और आईओएस दोनों) और साथ ही फ़ायरफ़ॉक्स ब्राउज़र में ऑपरेटिंग सिस्टम की परवाह किए बिना समान दिखते हैं। लगभग हमेशा, पैनल विंडोज पर समान दिखते हैं, हालांकि मुझे जवाब मिला कि क्रोम और क्रोमियम एज कभी-कभी पैनल को उम्मीद से अलग प्रस्तुत करते हैं।

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

यह ध्यान दिया जाना चाहिए कि वास्तविक परिदृश्यों में अंतर बहुत छोटा है, और इस तरह के पैनलों की एक जोड़ी एक दूसरे के बगल में होने की संभावना नहीं है। लेकिन यहां तक कि अगर कोई अंतर है, तो किसी को भी इसके बारे में तब तक पता नहीं चलेगा जब तक वह विभिन्न वातावरणों में पृष्ठ का परीक्षण नहीं करता है। किसी भी मामले में, केवल एक वेब डेवलपर ही ऐसा कर सकता है। इसके अलावा, एक भावना है कि विभिन्न उपकरणों, ऑपरेटिंग सिस्टम और ब्राउज़रों का उपयोग करते समय साधारण अपारदर्शी तत्वों के रंग भी अलग दिख सकते हैं। उदाहरण के लिए, रंग #ffa800, जो व्यापक रूप से css-tricks.com पर उपयोग किया जाता है, उबंटू और विंडोज के साथ मेरे लैपटॉप पर अलग दिखता है। लेकिन आखिरकार, विभिन्न लोगों की आंखें एक ही रंग को अलग-अलग तरीकों से देख सकती हैं।

प्रिय पाठकों! क्या आपने विभिन्न ब्राउज़रों, ऑपरेटिंग सिस्टम या वेब पेजों के विभिन्न रंगों को प्रदर्शित करने वाले उपकरणों के साथ समस्याओं का सामना किया है?

सीएसएस: पारभासी की भूमि में रोमांच

More articles: