Work image mask magic with Houdini

Sep 11, 2025
कैसे करना है
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

यदि आप हुदिनी के बारे में अधिक जानने में रुचि रखते हैं, तो सुनिश्चित करें कि आप न्यूयॉर्क (24-25 अप्रैल) उत्पन्न करने में भाग लेते हैं। सम्मेलन में, आप Google पर एंटरप्राइज़ पार्टनर इंजीनियर सैम रिचर्ड को पकड़ सकते हैं, इस बात पर चर्चा कर सकते हैं कि कैसे हुदिनी डिजाइन पैटर्न की लचीलापन, शक्ति, प्रदर्शन और रखरखाव में काफी सुधार कर सकता है। वेब डिजाइनरों के लिए इस पुरस्कार विजेता सम्मेलन में अपना टिकट बुक करने के लिए, यात्रा करें Generateconf.com । [2 9]

डेवलपर्स के रूप में, हम कभी-कभी सीएसएस को मंजूरी देते हैं। कुछ गुणों को बदलकर, हम एक संपूर्ण वेबसाइट के रूप में बदल सकते हैं। ब्राउज़र विक्रेता उस बिंदु पर पहुंचने के लिए हमारी ओर से बहुत सारे काम कर रहे हैं। [2 9]

लेकिन चूंकि नई सीएसएस सुविधाएं आती हैं, इसलिए यह थोड़ी देर हो सकती है जब तक कि हम उन्हें उत्पादन स्थलों के लिए उपयोग न करें। पुराने ब्राउज़र वाले उपयोगकर्ता शैलियों के डाउनग्रेड, प्रगतिशील रूप से बढ़ी हुई सेट के साथ फंस जाएंगे जो आधुनिक ब्राउज़रों के रूप में अच्छे नहीं दिखते हैं। [2 9]

    [3 9] मनोरंजन के लिए 19 कूल सीएसएस एनीमेशन उदाहरण

हुदिनी वह सब बदलने के लिए तैयार है। यह मसौदे विनिर्देशों का एक संग्रह है जो डेवलपर्स को सीएसएस द्वारा प्रदान किए गए पीछे के दृश्यों में से कुछ तक पहुंच प्रदान करता है। एक बार सभी विनिर्देश पूरा हो जाने के बाद, डेवलपर्स यह निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग करने में सक्षम होंगे कि लेआउट और स्टाइल गणना जैसे पहलुओं का प्रदर्शन कैसे किया जाता है। [2 9]

हुदिनी क्या करने में सक्षम है?

हुदिनी जावास्क्रिप्ट और सीएसएस के बीच घर्षण को कम करने के लिए डिज़ाइन किए गए एपीआई और विनिर्देशों का संग्रह है। कुछ जादू को उजागर करके जो ब्राउज़र डेवलपर्स को निष्पादित करते हैं, हम उस पृष्ठ पर समायोजन करने में सक्षम हैं जो हमारे विशिष्ट उपयोग-मामले के लिए सबसे अच्छा काम करते हैं। [2 9]

इन प्रगति के बीच में फिक्स्ड एक वर्कलेट की अवधारणा है - एक हल्के, अत्यधिक विशिष्ट वर्ग जैसे कि एनिमेशन जैसे विशिष्ट कार्यों पर केंद्रित है। वे वेब श्रमिकों के समान हैं, जो मुख्य धागे से दूर निष्पादित होते हैं और पृष्ठ को उत्तरदायी रखते हैं। इन्हें भविष्य में विस्तारित किया जा सकता है क्योंकि डेवलपर्स की जरूरतों को विकसित किया जाता है। [2 9]

हालांकि इनमें से कुछ एपीआई अभी भी अपने शुरुआती चरणों में हैं, कई लोग अब क्रमशः वी 66 और वी 53 के रूप में क्रोम और ओपेरा दोनों में उतरे हैं। सीएसएस पेंट एपीआई डेवलपर्स को जावास्क्रिप्ट में इन्हें उपयोग के लिए जावास्क्रिप्ट में छवियां बनाने में सक्षम बनाता है जहां भी एक छवि आमतौर पर सीएसएस में उपयोग की जाती है, जबकि सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल केवल स्ट्रिंग्स की बजाय सीएसएस ऑब्जेक्ट्स को आपकी जावास्क्रिप्ट पर उजागर करता है। इन एपीआई के लिए सफारी में समर्थन वर्तमान में विकास में है, क्रोम और हुदिनी के विभिन्न एपीआई में कई और एपीआई इस तरह से हैं, वे डब्ल्यू 3 सी विनिर्देश प्रक्रिया के माध्यम से अपना रास्ता काम कर रहे हैं, पेंट एपीआई पहले से ही उम्मीदवार की सिफारिश तक पहुंच रहा है। [2 9]

ड्राफ्ट एपीआई लगातार बदल रहा है और फिलहाल मौजूद लोग इस तरह के समान नहीं हो सकते कि अंततः ब्राउज़रों में क्या भूमि है। नज़र रखना ishoudinireadyet.com नवीनतम सुधारों से आगे रहना। [2 9]

कुछ आसान चाहते हैं? आज़माएं वेबसाइट निर्माता । हालांकि, किसी भी तरह से वेब होस्टिंग सेवा आपके लिए काम करने की जरूरत है। [2 9]

छवि मास्क को फिर से खोलने के लिए हुदिनी का उपयोग करें

समय के लिए, यहां तक ​​कि सिर्फ हुदिनी का सीएसएस पेंट एपीआई एक बड़ा सौदा प्राप्त करने में सक्षम है। उदाहरण के लिए, हम मांग पर तत्वों को दोबारा बदलने के लिए इसे छवि मास्क के साथ जोड़ सकते हैं। [2 9]

यह दिखाने के लिए कि यह कैसे काम कर सकता है, नेविगेट करें फाइल्सिलो प्रासंगिक फ़ाइलों तक पहुंचने के लिए (यह भी सुनिश्चित करें कि आपकी फ़ाइलें सही में आसानी से सुलभ हों घन संग्रहण )। [2 9]

01. मास्किंग सीएसएस लागू करें

An image showing three images of seascapes, awaiting the application of a CSS mask. [2 9]

[9 1] एक सीएसएस मास्क से पहले छवियों को लागू किया जाता है [9 2]

वर्कलेट बनाने से पहले, एक स्थानीय सर्वर सेट करें। फिर हमें प्रत्येक छवि पर मुखौटा सेट करने की आवश्यकता है। जबकि सीएसएस संपत्ति की जरूरत है मुखौटा , यह अभी भी क्रोम में उपसर्ग है। इसका मतलब है कि हमें भी इसकी आवश्यकता है वेबकिट इसके साथ उपसर्ग। [2 9]

खुलना शैलियों / मास्क.सीएसएस और के लिए शैलियों को अद्यतन करें छिपा हुआ कक्षा। प्रभाव का हिस्सा छवि को पूरी तरह से प्रकट करना है जब उपयोगकर्ता उस पर चढ़ता है। एक जोड़ें पता चलता है उस उदाहरण में तत्व के लिए कस्टम संपत्ति। [2 9] [10 9] .masked { [...] -वेबिट-मास्क-छवि: पेंट (मास्क); मास्क-छवि: पेंट (मास्क); } .masked: होवर, .masked: फोकस { --मास्क-प्रकट: सच; }

02. मास्क आकार संपत्ति लागू करें

कस्टम गुणों को एपीआई द्वारा उठाए जाने वाले मूल तत्व पर होने की आवश्यकता नहीं है। उन्हें चित्रित तत्व पर लागू किया जा सकता है, जो कम विशिष्टता के साथ किसी भी चयनकर्ता को ओवरराइड करेगा। [2 9]

अब हम एक विशेष लागू करने जा रहे हैं मास्क-आकार तीन आकार वर्गों के लिए कस्टम संपत्ति। यह वर्कलेट को बताता है जो प्रस्तुत करने के लिए आकार देता है। [2 9]

[10 9] .masked.square { --मास्क-आकार: वर्ग; } .masked.circle { --मास्क-आकार: सर्कल; } .masked.triangle { --मास्क-आकार: त्रिकोण; }

03. परिभाषित करें कि किस आकार का उपयोग करना है

खुला हुआ स्क्रिप्ट्स / मास्क.जेएस । यह आकार बनाने के लिए कुछ तर्कों के साथ पहले ही भर चुका है। हमें अभी भी उन कक्षाओं के साथ एक साथ बांधने की जरूरत है जिन्हें हमने अभी लिखा है। [2 9]

मास्क-आकार कस्टम संपत्ति उस आकार को परिभाषित करती है जो उपयोग करने जा रही है। हमारे पास एक सर्कल, एक वर्ग या एक त्रिकोण से चुनने के लिए है। यदि कोई एक अलग आकार या कोई आकार नहीं चुनता है, तो एक सर्कल आकार के लिए डिफ़ॉल्ट। सीएसएस स्वरूपण द्वारा छोड़े गए किसी भी रिक्त स्थान को ट्रिम करें। [2 9] [10 9] आकार = 'सर्कल' चलो; यदि (गुण .get ('- मुखौटा-आकार') & amp; & amp; ['स्क्वायर', 'त्रिकोण', 'सर्कल'] । शामिल (गुण .get ( '--मास्क-आकार')। TOString ()। ट्रिम ()) { आकार = गुण। '--मास्क-आकार')। Tostring ()। ट्रिम (); }

04. तय करें कि प्रकट करना है या नहीं

डिफ़ॉल्ट रूप से, मास्क परिभाषित आकार की रूपरेखा प्रदान करते हैं। जब उपयोगकर्ता उन पर चढ़ता है, तो पता चलता है कस्टम संपत्ति सच हो जाती है, इसलिए इसे आकार भरना चाहिए। [2 9]

कस्टम संपत्ति प्रकार बाद के बिंदु पर आ रहे हैं, जिसका अर्थ है अब के लिए सच मूल्य एक स्ट्रिंग के रूप में पारित किया जाएगा। स्ट्रिंग के खिलाफ मैच और यदि यह सेट है तो एक नया चर सेट करें। [2 9] [10 9] प्रकट होने = गलत; यदि (गुण .get ('- मुखौटा-प्रकट') & amp; & amp; गुण। ('- मास्क-प्रकट') .tostring ()। trim () == 'सत्य') { प्रकट = सत्य; }

05. सबसे छोटी लंबाई का पता लगाएं

अंत में, हम चाहते हैं कि आकार समान लंबाई के पक्ष रखें। इसका मतलब है कि हमें छवि की चौड़ाई या ऊंचाई में से सबसे छोटा खोजने और आकारों की गणना करने के लिए उस लंबाई का उपयोग करने की आवश्यकता है। [2 9]

को परिभाषित करो अधिकतम लंबाई बाकी कोड को बताने के लिए चर आकार बनाने के लिए किस आकार को। चीजों को पैमाने पर रखने के लिए संदर्भ की रेखा चौड़ाई को इस आकार के अनुपात में सेट करें। [2 9] [10 9] Const Maxlength = Math.min (geom.width, geom.height); ctx.linewidth = MAXLENGTH / 25;

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित किया गया था वेब डिजाइनर । वेब डिजाइनर की सदस्यता लें । [2 9]

अधिक हुदिनी चाल चुनना चाहते हैं?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25. [2 9]

[9 1] जेनरेट, वेब डिजाइनरों के लिए पुरस्कार विजेता सम्मेलन, 24-25 अप्रैल को एनवाईसी लौट आया! टिकट बुक करने के लिए छवि पर क्लिक करें [9 2]

HOUDII कैसे आपके डिज़ाइनों में अधिक Oomph जोड़ सकते हैं, इस बारे में अधिक जानने में रुचि रखते हैं? सैम रिचर्ड, Google पर एंटरप्राइज़ पार्टनर इंजीनियर 25 अप्रैल को न्यूयॉर्क को जेनरेट करने के साथ हौडिनी के साथ अपनी टॉक डिज़ाइन सिस्टम मैजिक दे देंगे, जिसमें वह आपको सिखाएंगे कि यह सामान्य डिजाइन सिस्टम की समस्याओं को हल करने में आपकी मदद कैसे कर सकता है और लचीलापन, शक्ति, में काफी सुधार कर सकता है। इन पैटर्न की प्रदर्शन और रखरखाव। [2 9]

24-25 अप्रैल से न्यूयॉर्क रन बनाएँ - अब अपने टिकट प्राप्त करें ! [2 9]

संबंधित आलेख: [2 9]

    [3 9] 201 9 के लिए न्यूयॉर्क वापस जेनरेट करें

[3 9] 14 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई [3 9] अप्रैल 2019 के लिए 10 नए वेब डिजाइन उपकरण

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to use reference images: 13 essential tips for artists

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: जोनाथन हार्डीस्टी) [1 9] 2 का पृ..

Create textures with the Pattern Stamp tool

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: लिनो ड्रिघे) [1 9] यदि आप एक खाली क�..

एडोब इलस्ट्रेटर में परिप्रेक्ष्य बनाएं

कैसे करना है Sep 11, 2025

2 का पृष्ठ 1: इलस्ट्रेटर में परिप्रेक्ष्�..

Build a complex 3D sci-fi scene in Blender

कैसे करना है Sep 11, 2025

एक एपोकैलिप्टिक विज्ञान-फाई शहर दृश्य बनाना 3 �..

How to create a dashboard app with React

कैसे करना है Sep 11, 2025

2 का पृष्ठ 1: प्रतिक्रिया में एक डैशबोर्ड..

Three steps to a sparkling night sky in watercolour

कैसे करना है Sep 11, 2025

वाटरकलर एक अविश्वसनीय माध्यम है, जो दाईं ओर कल�..

Discover underpainting and how to make best use of it

कैसे करना है Sep 11, 2025

अंडरपेंटिंग एक है पेंटिंग तकनीक पुनर्जागर�..

The pro guide to creating 3D textures

कैसे करना है Sep 11, 2025

पांच उत्कृष्ट कलाकार शहरी, विज्ञान-फाई, प्राकृति�..

श्रेणियाँ