Magic Making Image Magic กับ 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-25 เมษายน) ในการประชุมคุณสามารถจับ Sam Richard, Enterprise Partner Engineer ที่ Google พูดคุยเกี่ยวกับวิธีที่ Houdini สามารถปรับปรุงความยืดหยุ่นพลังงานประสิทธิภาพและการบำรุงรักษารูปแบบการออกแบบได้อย่างมาก หากต้องการจองตั๋วไปจนถึงการประชุมที่ได้รับรางวัลนี้สำหรับนักออกแบบเว็บไซต์เยี่ยมชม generateconf.com .

ในฐานะนักพัฒนาบางครั้งเราใช้ CSS เพื่อรับ โดยการเปลี่ยนคุณสมบัติสองสามประการเราสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมด ผู้จำหน่ายเบราว์เซอร์กำลังทำงานเป็นจำนวนมากในนามของเราเพื่อไปยังจุดนั้น

แต่เนื่องจากคุณสมบัติ CSS ใหม่ออกมาอาจใช้เวลาสักครู่จนกว่าเราจะได้ใช้สำหรับไซต์การผลิต ผู้ใช้ที่มีเบราว์เซอร์เก่าจะติดอยู่กับชุดสไตล์ที่ได้รับการปรับลดรุ่นที่เพิ่มขึ้นอย่างต่อเนื่องซึ่งดูไม่ดีเท่าที่อยู่ในเบราว์เซอร์สมัยใหม่

  • ตัวอย่างแอนิเมชั่น CSS เย็น 19 ตัวอย่างเพื่อสร้างใหม่

Houdini ถูกตั้งค่าให้เปลี่ยนทั้งหมด มันเป็นชุดของข้อมูลจำเพาะแบบร่างที่ให้นักพัฒนาสามารถเข้าถึงเวทย์มนตร์เบื้องหลังบางส่วนที่ให้ไว้โดย CSS เมื่อข้อมูลจำเพาะทั้งหมดเสร็จสมบูรณ์นักพัฒนาจะสามารถใช้ JavaScript เพื่อกำหนดวิธีการใช้งานเช่นการคำนวณแบบเลย์เอาต์และสไตล์

Houdini มีความสามารถคืออะไร?

Houdini เป็นคอลเลกชันของ API และข้อมูลจำเพาะที่ออกแบบมาเพื่อลดแรงเสียดทานระหว่าง JavaScript และ CSS ด้วยการเปิดเผยเวทมนตร์บางอย่างที่เบราว์เซอร์ดำเนินการไปยังนักพัฒนาเราสามารถปรับเปลี่ยนหน้าเว็บที่ทำงานได้ดีที่สุดสำหรับกรณีการใช้งานเฉพาะของเรา

แก้ไขในช่วงกลางของความก้าวหน้าเหล่านี้เป็นแนวคิดของเวิร์คเกอร์ - คลาสที่มีน้ำหนักเบาและมีความพิเศษสูงมุ่งเน้นไปที่การกระทำที่เฉพาะเจาะจงเช่นภาพเคลื่อนไหว พวกเขามีความคล้ายคลึงกับ Web Workers ซึ่งดำเนินการออกไปจากด้ายหลักและทำให้หน้าตอบสนอง สิ่งเหล่านี้สามารถขยายได้ในอนาคตตามความต้องการของนักพัฒนาวิวัฒนาการ

ในขณะที่ API บางอย่างเหล่านี้ยังอยู่ในช่วงแรก ๆ ของพวกเขาหลายคนได้ลงจอดทั้งโครเมี่ยมและโอเปร่าในขณะที่ V66 และ V53 ตามลำดับ CSS Paint API ช่วยให้นักพัฒนาสามารถสร้างภาพใน JavaScript เพื่อใช้งานได้ทุกที่ที่รูปภาพจะถูกใช้ใน CSS ในขณะที่รุ่น CSS Typed Object เปิดเผยวัตถุ CSS ไปยัง JavaScript ของคุณมากกว่าเพียงแค่สตริงของคุณ การสนับสนุนใน Safari สำหรับ API เหล่านี้กำลังอยู่ในระหว่างการพัฒนา API อีกมากมายกำลังอยู่ระหว่างทางใน Chrome และ API ต่าง ๆ ของ Houdini กำลังทำงานผ่านกระบวนการสเปค W3C ด้วย API สีที่ได้รับคำแนะนำจากผู้สมัครแล้ว

ร่าง API มีการเปลี่ยนแปลงอยู่ตลอดเวลาและปัจจุบันในขณะนี้อาจไม่คล้ายกับสิ่งที่ในที่สุดในเบราว์เซอร์ จับตา ishoudinireadyyet.com เพื่ออยู่ข้างหน้าของการปรับปรุงล่าสุด

ต้องการสิ่งที่ง่ายกว่า? ลอง สร้างเว็บไซต์ . ทั้งสองทางของคุณ เว็บโฮสติ้ง บริการต้องทำงานให้คุณ

ใช้ Houdini เพื่อปรับรูปร่างหน้ากากรูปภาพ

สำหรับเวลาที่เป็นเพียงแม้แต่ CSS Paint API ของ Houdini ยังสามารถบรรลุข้อตกลงได้อย่างมาก ตัวอย่างเช่นเราสามารถรวมกับมาสก์ภาพเพื่อปรับโครงสร้างองค์ประกอบตามความต้องการ

เพื่อแสดงวิธีการทำงานนี้นำทางไปยัง filesilo ในการเข้าถึงไฟล์ที่เกี่ยวข้อง (นอกจากนี้ตรวจสอบให้แน่ใจว่าสามารถเข้าถึงไฟล์ของคุณได้อย่างง่ายดายในด้านขวา การจัดเก็บเมฆ .

01. ใช้การปิดบัง CSS

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

ภาพก่อนที่จะใช้หน้ากาก CSS

ก่อนที่เราจะเริ่มสร้างเวิร์คเล็ตให้ตั้งค่าเซิร์ฟเวอร์ท้องถิ่น จากนั้นเราต้องตั้งค่าหน้ากากในแต่ละภาพ ในขณะที่ต้องการคุณสมบัติ CSS ภาพหน้ากาก มันยังคงใช้คำนำหน้าใน Chrome นี่หมายความว่าเราต้องการ webkit คำนำหน้าควบคู่ไปกับมัน

เปิดออก รูปแบบ / Mask.css และอัปเดตสไตล์สำหรับ สวมหน้ากาก ชั้นเรียน ส่วนหนึ่งของผลกระทบคือการเปิดเผยภาพอย่างเต็มที่เมื่อผู้ใช้อยู่เหนือมัน เพิ่ม เปิดเผย คุณสมบัติที่กำหนดเองไปยังองค์ประกอบในตัวอย่างนั้น 

 .masked {
  [... ]
  -webkit-mask- รูปภาพ: สี (หน้ากาก);
  หน้ากากภาพ: สี (หน้ากาก);
}
.Masked: โฉบ, .masked: โฟกัส {
  - งาน - เปิดเผย: จริง;
}

02. ใช้คุณสมบัติหน้ากากรูปร่าง

คุณสมบัติที่กำหนดเองไม่จำเป็นต้องอยู่ในองค์ประกอบรากที่จะหยิบขึ้นมาโดย API พวกเขาสามารถนำไปใช้กับองค์ประกอบที่ถูกทาสีซึ่งจะแทนที่ตัวเลือกใด ๆ ด้วยความเฉพาะเจาะจงที่ต่ำกว่า

ตอนนี้เราจะใช้พิเศษ รูปร่างหน้ากาก คุณสมบัติที่กำหนดเองเป็นสามชั้นรูปร่าง สิ่งนี้จะบอกถึงผลการทำงานที่ทำให้เกิดการเรนเดอร์ 

 .masked.square {
  - รูปร่าง - รูปร่าง: สแควร์;
}
.masked.circle {
  - รูปร่าง - รูปร่าง: วงกลม;
}
.masked.triangle {
  - รูปร่าง - รูปร่าง: สามเหลี่ยม;
}

03. กำหนดรูปร่างที่จะใช้

เปิด สคริปต์ / Mask.js . สิ่งนี้ได้รับการกรอกด้วยตรรกะบางอย่างเพื่อสร้างรูปร่าง เรายังต้องผูกกับชั้นเรียนที่เราเพิ่งเขียน

ที่ รูปร่างหน้ากาก คุณสมบัติที่กำหนดเองกำหนดรูปร่างที่จะใช้ เรามีวงกลมสี่เหลี่ยมหรือสามเหลี่ยมให้เลือก หากมีคนเลือกรูปร่างที่แตกต่างกันหรือไม่มีรูปร่างเลยค่าเริ่มต้นเป็นรูปวงกลม ตัดออกจากช่องว่างที่เหลือโดยการจัดรูปแบบ CSS 

 ให้รูปร่าง = 'วงกลม';
ถ้า (Properties.get ('- หน้ากากรูปร่าง') & amp; & amp;
  ['สแควร์', 'สามเหลี่ยม', 'วงกลม']
  .includes (Properties.get (
  '--mask-shape') toString (). ตัดแต่ง ())) {
  รูปร่าง = Properties.get (
  '- รูปร่างรูปร่าง') ToString () ตัดแต่ง (); }

04. ตัดสินใจว่าจะเปิดเผยหรือไม่

โดยค่าเริ่มต้นหน้ากากให้โครงร่างของรูปร่างที่กำหนด เมื่อผู้ใช้อยู่เหนือพวกเขา เปิดเผย คุณสมบัติที่กำหนดเองกลายเป็นจริงดังนั้นควรกรอกรูปร่างใน

ประเภทคุณสมบัติที่กำหนดเองกำลังจะมาถึงจุดต่อมาซึ่งหมายความว่าตอนนี้ จริง ค่าจะถูกส่งผ่านเป็นสตริง จับคู่กับสตริงและตั้งค่าตัวแปรใหม่หากมีการตั้งค่า 

 ให้เปิดเผย = เท็จ;
ถ้า (Properties.get ('- Mask-Reveal') & amp; & amp;
  Properties.get ('- Mask-Reveal')
  .Tostring () ตัดแต่ง () == 'จริง') {
  เปิดเผย = จริง; }

05. ค้นหาความยาวที่เล็กที่สุด

ในที่สุดเราต้องการให้รูปร่างมีความยาวเท่ากัน ซึ่งหมายความว่าเราจำเป็นต้องค้นหาความกว้างหรือความสูงที่เล็กที่สุดของภาพและใช้ความยาวนั้นเพื่อคำนวณรูปร่าง

กำหนด ความยาวสูงสุด ตัวแปรที่จะบอกส่วนที่เหลือของรหัสที่มีขนาดเท่าใดในการสร้างรูปร่าง ตั้งค่าความกว้างของบรรทัดของบริบทกับสัดส่วนของขนาดนี้เพื่อให้สิ่งต่าง ๆ ในการปรับขนาด 

 const maxlength =
  Math.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.

สร้างขึ้นการประชุมที่ได้รับรางวัลสำหรับนักออกแบบเว็บไซต์กลับไปที่ NYC เมื่อวันที่ 24-25 เมษายน! คลิกที่ภาพเพื่อจองตั๋ว

สนใจเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่ Houdini สามารถเพิ่ม OOMPH ให้กับการออกแบบของคุณได้อย่างไร? Sam Richard, Enterprise Partner Engineer ที่ Google จะให้ความมหัศจรรย์ของระบบการออกแบบการพูดคุยกับ Houdini ที่สร้างนิวยอร์กในวันที่ 25 เมษายนซึ่งเขาจะสอนคุณว่ามันสามารถช่วยคุณแก้ปัญหาระบบการออกแบบทั่วไปและปรับปรุงความยืดหยุ่นได้อย่างมาก ประสิทธิภาพและการบำรุงรักษาของรูปแบบเหล่านี้

สร้างนิวยอร์กวิ่งจาก 24-25 เมษายน - รับตั๋วของคุณตอนนี้ !

บทความที่เกี่ยวข้อง:

  • สร้างนิวยอร์กกลับมาในปี 2562
  • 14 ของ apis JavaScript ที่ดีที่สุด
  • 10 เครื่องมือออกแบบเว็บใหม่สำหรับเดือนเมษายน 2019

วิธีการ - บทความยอดนิยม

วิธีเพิ่มความซ้ำซ้อนในมายา

วิธีการ Sep 11, 2025

(เครดิตภาพ: Antony Ward) ความสามารถในการทำซ้ำซ้อน�..

วิธีสร้างโลโก้ใน Photoshop

วิธีการ Sep 11, 2025

ก่อนที่จะเริ่มต้นด้วยวิธีการสร้างโลโก้ใน Photosho..

21 วิธีในการเพิ่มประสิทธิภาพ CSS ของคุณและเพิ่มความเร็วไซต์ของคุณ

วิธีการ Sep 11, 2025

CSS จะต้องผ่านไปป์ไลน์ที่ค่อนข้างซับซ้อนเช่นเ�..

ฝึกฝนวิทยาศาสตร์ของการเพิ่มประสิทธิภาพอัตราการแปลง

วิธีการ Sep 11, 2025

การเพิ่มประสิทธิภาพอัตราการแปลง (CRO) เป็นกระบว�..

วิธีจำลองการระเบิดในมายา

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

5 วิธีในการสร้างประสบการณ์ VR ที่ดื่มด่ำมากขึ้น

วิธีการ Sep 11, 2025

ความจริงเสมือนจริงไม่ใช่เรื่องใหม่ แต่มันเป�..

สร้างโปสเตอร์จากเทมเพลตใน Photoshop

วิธีการ Sep 11, 2025

Adobe กำลังเปิดตัวชุดวิดีโอชุดใหม่วันนี้เรียกว่าตอนนี้ซึ่งมีวัตถุปร�..

ค้นพบสไตล์และเนื้อหาของการพิมพ์

วิธีการ Sep 11, 2025

การตัดสินใจการตัดสินใจการตัดสินใจ ... หากมีสิ่งสำคัญอย่างหนึ่งต่อกร..

หมวดหมู่