Houdini کے ساتھ کام کی تصویر ماسک جادو

Sep 11, 2025
کيسے
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

اگر آپ Houdini کے بارے میں مزید سیکھنے میں دلچسپی رکھتے ہیں تو، اس بات کو یقینی بنائیں کہ آپ نیویارک پیدا کرتے ہیں (24 اپریل 24-25). کانفرنس میں، آپ SAM رچرڈ، انٹرپرائز پارٹنر انجنیئر کو Google میں پکڑ سکتے ہیں، اس بات پر تبادلہ خیال کرتے ہیں کہ کس طرح Houdini ڈیزائن پیٹرن کی لچک، طاقت، کارکردگی اور برقرار رکھنے میں بہتری میں بہتری میں اضافہ کر سکتے ہیں. ویب ڈیزائنرز کے لئے اس ایوارڈ یافتہ کانفرنس میں اپنے ٹکٹ کو کتاب دینے کے لئے، ملاحظہ کریں generateconf.com. .

ڈویلپرز کے طور پر، ہم کبھی کبھی سی ایس ایس فراہم کرتے ہیں. ایک جوڑے کو تبدیل کرنے سے، ہم پوری ویب سائٹ کی نظر کو تبدیل کر سکتے ہیں. براؤزر وینڈرز اس نقطہ نظر کو حاصل کرنے کے لئے ہماری طرف سے بہت سارے کام کر رہے ہیں.

لیکن جیسا کہ نئے سی ایس ایس کی خصوصیات باہر آتی ہے، جب تک کہ ہم پیداوار کے سائٹس کے لئے ان کا استعمال نہیں کرتے جب تک ہم تھوڑی دیر تک ہوسکتے ہیں. پرانے براؤزر کے صارفین کے ساتھ صارفین کو جدید ترین براؤزرز میں اچھا نہیں نظر آتا ہے کے طور پر اچھی طرح سے نظر آتے ہیں کے ساتھ ایک کم سے کم براؤزر کے ساتھ پھنس جائیں گے.

  • 19 ڈاؤن لوڈ، اتارنا سی ایس ایس حرکت پذیری مثالیں دوبارہ بنانے کے لئے

Houdini سب کو تبدیل کرنے کے لئے مقرر کیا گیا ہے. یہ ڈرافٹ کی وضاحتیں کا ایک مجموعہ ہے جو ڈویلپرز کو سی ایس ایس کی طرف سے فراہم کردہ پیچھے کے مناظر میں سے کچھ میں سے کچھ تک رسائی فراہم کرتا ہے. ایک بار جب تمام وضاحتیں مکمل ہوجائے گی تو، ڈویلپرز جاوا اسکرپٹ کو استعمال کرنے کے قابل ہو جائیں گے کہ اس بات کا تعین کرنے کے لۓ کہ کس طرح ترتیب اور سٹائل کے حسابات جیسے پہلوؤں کو انجام دیا جاتا ہے.

Houdini کی صلاحیت کیا ہے؟

Houdini جاوا اسکرپٹ اور سی ایس ایس کے درمیان رگڑ کو کم کرنے کے لئے ڈیزائن Apis اور وضاحتیں کا ایک مجموعہ ہے. کچھ جادو کو بے نقاب کرکے براؤزر ڈویلپرز کو انجام دیتے ہیں، ہم اس صفحے پر ایڈجسٹمنٹ بنانے کے قابل ہیں جو ہمارے مخصوص استعمال کے کیس کے لئے بہترین کام کرتے ہیں.

ان ترقیوں کے وسط میں فکسڈ ایک کارکن کا تصور ہے - ایک ہلکا پھلکا، انتہائی خاص طبقے جیسے متحرک تصاویر جیسے مخصوص کاموں پر توجہ مرکوز کرتا ہے. وہ ویب کارکنوں کی طرح ہیں، جو مرکزی دھاگے سے دور چلتے ہیں اور صفحہ قبول کرتے ہیں. یہ مستقبل میں توسیع کی جاسکتی ہے کیونکہ ڈویلپرز کی ضروریات کی ضرورت ہوتی ہے.

جبکہ ان میں سے کچھ اب بھی ان کے ابتدائی مراحل میں ہیں، اب بہت سے کروم اور اوپیرا دونوں، V66 اور V53 کے طور پر دونوں میں اترتے ہیں. سی ایس ایس پینٹ API ڈویلپرز جاوا اسکرپٹ میں تصاویر تخلیق کرنے کے قابل بناتا ہے جہاں کہیں بھی تصویر عام طور پر سی ایس ایس میں استعمال کیا جائے گا، جبکہ سی ایس ایس ٹائپ کردہ اعتراض ماڈل صرف تار کے بجائے، آپ کے جاوا اسکرپٹ میں سی ایس ایس اشیاء کو بے نقاب کرتی ہے. اس APIs کے لئے سفاری میں سپورٹ فی الحال ترقی میں ہے، کروم اور Houdini کے مختلف API کے راستے میں بہت زیادہ APIs W3C تفصیلات کے عمل کے ذریعے اپنا راستہ کام کر رہے ہیں، پینٹ API پہلے سے ہی امیدوار کی سفارش تک پہنچنے کے ساتھ.

مسودہ API مسلسل مسلسل تبدیل کر رہے ہیں اور اس وقت موجود ہیں جو آخر میں براؤزرز میں زمین پر ہیں. آنکھ رکھو ishoudiniradyyet.com. تازہ ترین اصلاحات سے آگے رہنا.

کچھ آسان کرنا چاہتے ہیں؟ کوشش کریں ویب سائٹ بلڈر . اگرچہ، آپ کے تعاون کا شکریہ ویب میزبانی سروس آپ کے لئے کام کرنے کی ضرورت ہے.

تصویر ماسک کو دوبارہ ترتیب دینے کے لئے Houdini کا استعمال کریں

وقت کے لئے، یہاں تک کہ Houdini کے سی ایس ایس پینٹ API بھی ایک عظیم سودا حاصل کرنے کے قابل ہے. مثال کے طور پر، ہم اس تصویر پر ماسک کے ساتھ مطالبہ پر عناصر کو دوبارہ کھولنے کے لئے اسے یکجا کر سکتے ہیں.

یہ ظاہر کرنے کے لئے کہ یہ کیسے کام کرسکتا ہے، پر جائیں فائلیلو متعلقہ فائلوں تک رسائی حاصل کرنے کے لئے (اس بات کو یقینی بنائیں کہ آپ کی فائلیں صحیح طریقے سے آسانی سے قابل رسائی ہیں کلاؤڈ اسٹوریج ).

01. ماسکنگ سی ایس ایس کو لاگو کریں

An image showing three images of seascapes, awaiting the application of a CSS mask.

سی ایس ایس ماسک سے پہلے تصاویر لاگو ہوتے ہیں

اس سے پہلے کہ ہم کارکن بنانے شروع کریں، ایک مقامی سرور قائم کریں. پھر ہمیں ہر تصویر پر ماسک قائم کرنے کی ضرورت ہے. جبکہ سی ایس ایس کی جائیداد کی ضرورت ہے ماسک تصویر ، یہ اب بھی کروم میں پیش آیا ہے. اس کا مطلب یہ ہے کہ ہمیں بھی ضرورت ہے WebKit. اس کے ساتھ ساتھ اس کے ساتھ ساتھ.

کو کھولنے طرزیں / ماسک. css. اور اس کے لئے شیلیوں کو اپ ڈیٹ کریں ماسک کلاس. اثر کا حصہ اس تصویر کو مکمل طور پر ظاہر کرنے کے لئے ہے جب صارف اس پر چلتا ہے. A شامل کریں ظاہر اس مثال میں عنصر کے لئے اپنی مرضی کے مطابق جائیداد. 

 .مقابل {
  [...]
  Webkit ماسک تصویر: پینٹ (ماسک)؛
  ماسک تصویر: پینٹ (ماسک)؛
}
.مقابل: ہور، .مقابل: توجہ مرکوز {
  ماسک - ظاہر: سچ؛
}

02. ماسک شکل پراپرٹی کا اطلاق کریں

API کی طرف سے اٹھایا جانے کے لئے اپنی مرضی کے مطابق خصوصیات جڑ عنصر پر ہونے کی ضرورت نہیں ہے. وہ عنصر پر پینٹنگ پر لاگو کیا جا سکتا ہے، جو کسی بھی انتخابی اداروں کو کم نفاذ کے ساتھ ختم کرے گا.

اب ہم ایک خاص درخواست دینے جا رہے ہیں ماسک شکل اپنی مرضی کے مطابق جائیداد تین شکلوں کی کلاسوں میں. یہ کام کرتا ہے جس کی شکل فراہم کی جاتی ہے. 

 .masked.square {
  - ماسک شکل: چوک؛
}
.masked.circle {
  ماسک شکل: سرکل؛
}
.masked.triangle {
  - ماسک شکل: مثلث؛
}

03. استعمال کرنے کے لئے کونسی شکل کی وضاحت کریں

کھولیں سکرپٹ / ماسک. js. . اس شکل کو تخلیق کرنے کے لئے کچھ منطق کے ساتھ پہلے ہی بھرا ہوا ہے. ہم اب بھی اس کلاسوں کے ساتھ مل کر اس کو باندھنے کی ضرورت ہے جو ہم نے لکھا تھا.

The. ماسک شکل اپنی مرضی کے مطابق جائیداد اس شکل کی وضاحت کرتا ہے جو استعمال کیا جا رہا ہے. ہمارے پاس ایک حلقہ، ایک مربع یا مثلث ہے جو منتخب کرنے کے لئے مثلث ہے. اگر کوئی کسی کو مختلف شکل یا کوئی شکل منتخب کرتا ہے تو، کسی دائرے کی شکل میں ڈیفالٹ. سی ایس ایس فارمیٹنگ کی طرف سے چھوڑ دیا کسی بھی جگہ پر ٹرم. 

 شکل = 'سرکل' دو؛
اگر (پراپرٹیز. وصول ('ماسک شکل') & amp؛ amp؛
  ['مربع'، 'مثلث'، 'سرکل']
  .includes (پراپرٹیز.)
  '- ماسک شکل'). ٹوسٹنگ (). ٹرم ())) {
  شکل = پراپرٹیز .ٹ (
  '- ماسک شکل'). ٹوسٹنگ (). ٹرم ()؛ }

04. فیصلہ کرنا چاہے کہ آیا

پہلے سے طے شدہ طور پر، ماسک مقرر کردہ شکل کا نقطہ نظر فراہم کرتے ہیں. جب صارف ان پر چلتا ہے تو، ظاہر اپنی مرضی کے مطابق جائیداد سچ ہو جاتا ہے، تاکہ اس میں شکل بھریں.

اپنی مرضی کے مطابق جائیداد کی اقسام بعد میں آ رہے ہیں، جس کا مطلب اب ایک ہے سچ قیمت ایک تار کے طور پر منظور کیا جائے گا. تار کے خلاف میچ کریں اور اگر یہ مقرر کیا جائے تو ایک نئی متغیر مقرر کریں. 

 ظاہر کریں = غلط؛
اگر (پراپرٹیز. وصول ('- ماسک-ظاہر') & amp؛ amp؛
  پراپرٹیز .ٹ ('- ماسک-ظاہر')
  .tostring (). ٹرم () == 'سچ') {
  ظاہر = سچ؛ }

05. چھوٹی سی لمبائی تلاش کریں

آخر میں، ہم چاہتے ہیں کہ سائز برابر لمبائی کے اطراف ہو. اس کا مطلب یہ ہے کہ ہمیں تصویر کی چوڑائی یا اونچائی کی سب سے چھوٹی تلاش کرنے اور اس کی لمبائی کا استعمال کرنے کے لئے اس کی لمبائی کا استعمال کرنے کی ضرورت ہے.

وضاحت کریں زیادہ سے زیادہ طوالت باقی کوڈ کو بتانے کے لئے متغیر کو سائز بنانے کے لئے کیا سائز ہے. چیزوں کو پیمانے پر رکھنے کے لئے اس سائز کا تناسب لائن کی چوڑائی مقرر کریں. 

 COST MAXLENGTH =.
  ریاضی .min (geom.width، geoM.height)؛
ctx.linewidth = Maxlength / 25؛

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین میں شائع کیا گیا تھا ویب ڈیزائنر . ویب ڈیزائنر کو سبسکرائب کریں .

زیادہ Houdini چالوں کو لینے کے لئے چاہتے ہیں؟

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.

پیدا، ویب ڈیزائنرز کے لئے ایوارڈ جیتنے والی کانفرنس، 24-25 اپریل کو NYC پر واپس آتی ہے! ٹکٹ ٹکٹ کرنے کے لئے تصویر پر کلک کریں

اس کے بارے میں مزید جاننے میں دلچسپی آپ کے ڈیزائن میں زیادہ اومف کو کیسے شامل کرسکتے ہیں؟ SAM رچرڈ، Google میں انٹرپرائز پارٹنر انجنیئر Houdini 25 اپریل کو نیویارک پیدا کرنے کے لئے اپنی بات کے ڈیزائن سسٹم جادو دے گا، جس میں وہ آپ کو سکھا دے گا کہ یہ آپ کو عام ڈیزائن کے نظام کے مسائل کو حل کرنے میں مدد مل سکتی ہے اور لچک، طاقت کو بہتر بنانے میں مدد مل سکتی ہے. ان پیٹرن کی کارکردگی اور برقرار رکھنے.

24-25 اپریل سے نیویارک رنز بنائے - اب آپ کے ٹکٹ حاصل کریں !

متعلقہ مضامین:

  • نیا یارک پیدا 2019 کے لئے واپس آ گیا ہے
  • سب سے بہترین جاوا اسکرپٹ Apis کے 14
  • اپریل 2019 کے لئے 10 نئے ویب ڈیزائن کے اوزار

کيسے - انتہائی مشہور مضامین

پینٹ برش صاف کرنے کے لئے کس طرح: مستند گائیڈ

کيسے Sep 11, 2025

(تصویری کریڈٹ: سونانی فلانغان) پینٹ برش صاف کرنے کے لئے کس طرح سیک..

Instagram رییل ٹیوٹوریل: ایک ابتدائی گائیڈ

کيسے Sep 11, 2025

(تصویری کریڈٹ: فیس بک) یہ Instagram رییل ٹیوٹوریل آپ کو ایک پرو کی طرح �..

غیر حقیقی انجن میں ایک 3D ویلیوفولف کیسے بنائیں

کيسے Sep 11, 2025

ایک ویلیوففف کی اس زبردستی تصویر کے لئے تصور، ماڈل، ساخت اور مواد سیٹ اپ - جو کوچیچی کے لئے تخلیق کیا گیا ت�..

کس طرح ایک Photorealistic کمرہ منظر بنانے کے لئے

کيسے Sep 11, 2025

جاننا چاہتے ہیں کہ حقیقت پسندانہ 3D آرکیٹیکچرل مکھی کے ذریعے کس طرح پیدا..

ایک مستند منگا مزاحیہ پٹی کیسے بنائیں

کيسے Sep 11, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 صفحہ 2. جبکہ سٹ�..

ایکس ذرات کے ساتھ پودوں کو بڑھانے کے لئے سیکھیں

کيسے Sep 11, 2025

ایک مستحکم پلانٹ کا نمٹنے کے لئے جس میں سوٹ میں اضافہ ہونے کی ظاہری شکل �..

ڈاز سٹوڈیو اور سنیما 4 ڈی کے درمیان کس طرح منتقل کرنے کے لئے

کيسے Sep 11, 2025

پروگراموں کے درمیان منتقل الجھن کر سکتے ہیں. میں چار فوڈ گروپوں کو چھڑک�..

کراس ڈیوائس کی اصلاح کے لئے 15 تجاویز

کيسے Sep 11, 2025

تمام آلات کے لئے ڈیزائن! انا Dahlström. اہمیت کے بارے �..

اقسام