Work image mask magic with Houdini

Jan 29, 2026
कैसे करना है
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 नए वेब डिजाइन उपकरण

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

Instagram Reels tutorial: A beginner's guide

कैसे करना है Jan 29, 2026

(छवि क्रेडिट: फेसबुक) [1 9] यह इंस्टाग्राम रील ट..

Draw on the power of contrast in art

कैसे करना है Jan 29, 2026

कला में कंट्रास्ट का उपयोग करने के लिए सीखना आपकी परियोजनाओं और जिस तरह स..

How to turn off web notifications for Windows, macOS and Android

कैसे करना है Jan 29, 2026

(छवि क्रेडिट: भविष्य) [1 9] यदि आप एक नियमित वेब �..

परिवर्तनीय फोंट का उपयोग करने के लिए 4 कदम

कैसे करना है Jan 29, 2026

(छवि क्रेडिट: भविष्य) [1 9] परिवर्तनीय फोंट फ़ॉ�..

Create your own Calligraphic brush in Illustrator

कैसे करना है Jan 29, 2026

इलस्ट्रेटर के बारे में सबसे अच्छी चीजों में से एक..

Get started with Assets in Affinity Designer

कैसे करना है Jan 29, 2026

ऐप डिज़ाइन या ब्रांडिंग संपार्श्विक जैसी परियोज..

इनडिज़ीन के साथ मिश्रित स्याही बनाएं

कैसे करना है Jan 29, 2026

2 का पृष्ठ 1: एक मिश्रित स्याही स्वैच बना�..

Make a typographical poster using Adobe InDesign

कैसे करना है Jan 29, 2026

एडोब इनडिज़ीन का उपयोग करने के लिए एक महान कार्यक..

श्रेणियाँ