वेब परत मोड

हेलो, हेब्र!

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

यह आधुनिक ब्राउज़रों में विनिर्देशन " सम्मिश्रण और सम्मिश्रण स्तर 1 " को लागू करने के बारे में होगा।

यह क्या है और किस लिए है?

यह मानक फ़ोटोशॉप में कैसे किया जाता है, इसी तरह एक दूसरे को ओवरलैप करने के नियमों का वर्णन करता है। उदाहरण के लिए, गुणा मोड में, पिक्सेल का अंतिम रंग दो परतों के रंगों के उत्पाद के बराबर होगा। इसके लिए धन्यवाद, आप विभिन्न प्रभाव प्राप्त कर सकते हैं, जैसे:



1) तस्वीर प्रभाव जैसे कि तस्वीर का मलिनकिरण, सीपिया, रंग ओवरले। उदाहरण के लिए, केवल एक रंग चित्र का उपयोग करने के लिए पर्याप्त होगा ताकि ब्लोकेड से हॉवर पर एक चिकनी एनीमेशन प्राप्त किया जा सके:

^{(क्लिक पर - लाइव jsfiddle उदाहरण)}





2) अक्सर, डिजाइनर तस्वीर से पृष्ठभूमि को काटने के लिए बहुत आलसी होते हैं और परत पर पारदर्शिता के बिना तस्वीर के ओवरले का उपयोग करते हैं, ताकि इस मोड में पृष्ठभूमि काला / सफेद रंग पारदर्शी ( स्क्रीन / गुणा मोड) में परिवर्तित हो जाए:



^{(नीचे दी गई तस्वीर में "जैसा है" ओवरले छवि का एक टुकड़ा दिखाया गया है)}



3) कभी-कभी आप इस तकनीक का उपयोग पाठ के साथ प्रभाव को लागू करने के लिए कर सकते हैं, उदाहरण के लिए, लोगो में:





4) विभिन्न सुंदर प्रभाव बनाने के लिए:

जस्टिन विंडल द्वारा डेमो, http://soulwire.co.uk

मोड सूची

उदाहरण के लिए, हम अलग-अलग मोड में इस तरह की तस्वीर पर एक बाघ ओवरले करेंगे:

साधारण
गुणा
स्क्रीन
ओवरले
गहरा करें
हल्का
रंग-चकमा
रंग जला
कठोर प्रकाश
मुलायम प्रकाश
अंतर
बहिष्कार
ह्यू *
संतृप्ति *
रंग *
चमकदार *

^{* यहां मैंने लाल रंगों में चित्रित एक तस्वीर ली, ताकि प्रभाव का प्रदर्शन किया जा सके}

एप्लीकेशन टेक्नोलॉजीज और ब्राउज़र सपोर्ट

विनिर्देश के अनुसार, आप चार मामलों में सम्मिश्रण मोड लागू कर सकते हैं:



1) सीएसएस पृष्ठभूमि छवि के लिए

background-blend-mode: <blend-mode>;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

समर्थित: क्रोम 35+, फ़ायरफ़ॉक्स 30+ बीटा (चाहे यह कार्यक्षमता रिलीज़ में शामिल हो, एक और सवाल, क्योंकि सबसे अधिक संभावना है कि उन्हें पहले से ही इस कार्यक्षमता का "लैंडिंग" का सामना करना पड़ा)।



2) HTML तत्वों के लिए

 mix-blend-mode: <blend-mode>;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

समर्थन: अभी तक नहीं, लेकिन कार्यान्वयन के लिए विकास चल रहा है।



3) एसवीजी के लिए

 <feBlend mode="<blend-mode>">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

समर्थन: क्रोम 35+, IE 10+ ( अंतर के साथ )



4) कैनवस के लिए

 .globalCompositeOperation = <blend-mode> | <composite-mode>*;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

^{* अतिरिक्त मोड उपलब्ध}

समर्थन: क्रोम 29+, फ़ायरफ़ॉक्स 24+, ओपेरा 17+, सफारी 6.1+



एडोब से तालिका में इस मानक के लिए ब्राउज़र समर्थन के बारे में अधिक जानें।