Sihir Topeng Gambar Kerja dengan Houdini

Sep 14, 2025
Bagaimana caranya
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Jika Anda tertarik untuk belajar lebih banyak tentang Houdini, pastikan Anda menghadiri menghasilkan New York (24-25 April). Di konferensi, Anda dapat menangkap Sam Richard, Enterprise Mitra Engineer di Google, mendiskusikan bagaimana Houdini dapat sangat meningkatkan fleksibilitas, daya, kinerja, dan pemeliharaan pola desain. Untuk memesan tiket Anda ke konferensi pemenang penghargaan ini untuk desainer web, kunjungi generateeconf.com .

Sebagai pengembang, kami terkadang menerima CSS begitu saja. Dengan mengubah beberapa properti, kami dapat mengubah tampilan seluruh situs web. Vendor browser melakukan banyak pekerjaan atas nama kami untuk sampai ke titik itu.

Tetapi karena fitur CSS baru keluar, itu bisa sebentar sampai kita menggunakannya untuk situs produksi. Pengguna dengan browser lama akan terjebak dengan serangkaian gaya yang diturunkan dan ditingkatkan secara progresif yang tidak terlihat sebagus yang ada di browser modern.

  • 19 Contoh animasi CSS keren untuk menciptakan kembali

Houdini diatur untuk mengubah semua itu. Ini adalah kumpulan spesifikasi draft yang memberikan akses pengembang ke beberapa sihir di belakang layar yang disediakan oleh CSS. Setelah semua spesifikasi selesai, pengembang akan dapat menggunakan JavaScript untuk menentukan bagaimana aspek-aspek seperti tata letak dan perhitungan gaya dilakukan.

Apa yang mampu dilakukan Houdini?

Houdini adalah kumpulan API dan spesifikasi yang dirancang untuk mengurangi gesekan antara JavaScript dan CSS. Dengan mengekspos beberapa keajaiban yang dilakukan browser kepada pengembang, kami dapat membuat penyesuaian pada halaman yang paling cocok untuk penggunaan khusus kami.

Memperbaiki di tengah kemajuan ini adalah konsep sebuah worklet - kelas ringan dan sangat terspesialisasi berfokus pada tindakan spesifik seperti animasi. Mereka mirip dengan pekerja web, yang melaksanakan jauh dari utas utama dan menjaga halaman responsif. Ini dapat diperluas pada masa depan sebagai kebutuhan pengembang berkembang.

Sementara beberapa API ini masih dalam tahap awal mereka, beberapa sekarang telah mendarat di Chrome dan Opera, masing-masing pada V66 dan V53. CSS Paint API memungkinkan pengembang untuk membuat gambar dalam JavaScript untuk digunakan di mana pun suatu gambar biasanya digunakan dalam CSS, sedangkan model Objek CSS mengekspos objek CSS ke JavaScript Anda, daripada hanya string. Dukungan dalam Safari untuk API ini saat ini sedang dalam pengembangan, beberapa API lainnya sedang dalam perjalanan dalam berbagai API Chrome dan Houdini bekerja melalui proses spesifikasi W3C, dengan API cat telah mencapai rekomendasi kandidat.

Draf API terus berubah dan yang ada pada saat ini mungkin tidak menyerupai apa yang akhirnya mendarat di browser. Mengawasi ishoudinireyet.com untuk tetap di atas perbaikan terbaru.

Ingin sesuatu yang lebih sederhana? Coba A. Pembangun Situs Web . Bagaimanapun, Anda hosting web. Layanan perlu bekerja untuk Anda.

Gunakan Houdini untuk membentuk kembali masker gambar

Untuk saat ini, bahkan Houdini's CSS Paint API mampu mencapai banyak hal. Misalnya, kita dapat menggabungkannya dengan masker gambar untuk membentuk kembali elemen sesuai permintaan.

Untuk menunjukkan bagaimana ini dapat bekerja, navigasikan ke FileSilo. Untuk mengakses file yang relevan (juga, pastikan file Anda mudah diakses di sebelah kanan penyimpanan awan ).

01. Oleskan Masking CSS

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

Gambar sebelum topeng CSS diterapkan

Sebelum kita mulai membuat worklet, atur server lokal. Maka kita perlu mengatur topeng pada setiap gambar. Sementara properti CSS diperlukan adalah Topeng-gambar. , masih diawali di Chrome. Ini berarti kita juga membutuhkan Webkit. awalan di sampingnya.

Buka gaya / topeng.css. dan perbarui gaya untuk masked. kelas. Bagian dari efeknya adalah sepenuhnya mengungkapkan gambar ketika pengguna melayang di atasnya. Tambah sebuah mengungkapkan properti khusus untuk elemen dalam contoh itu. 

 .Masked {
  [...]
  -webkit-mask-gambar: cat (topeng);
  Topeng-Gambar: Cat (topeng);
}
.masked: hover, .masked: fokus {
  --mask-ungkapkan: Benar;
}

02. Terapkan properti Bentuk Topeng

Properti kustom tidak perlu berada di elemen root untuk diambil oleh API. Mereka dapat diterapkan pada elemen yang dicat, yang akan menimpa pemilih dengan spesifisitas yang lebih rendah.

Sekarang kita akan menerapkan spesial Bentuk topeng Kustom properti ke kelas tiga bentuk. Ini menceritakan worklet yang membentuk untuk membuat. 

 .masked.square {
  --Mask-bentuk: Square;
}
.masked.circle {
  --Mask-bentuk: lingkaran;
}
.masked.trangle {
  --Mask-bentuk: segitiga;
}

03. Tentukan bentuk mana yang digunakan

Buka Scripts / Mask.js. . Ini sudah diisi dengan beberapa logika untuk membuat bentuk. Kita masih perlu mengikatnya bersama dengan kelas-kelas yang baru saja kita tulis.

Itu Bentuk topeng Properti kustom mendefinisikan bentuk yang akan digunakan. Kami memiliki lingkaran, kotak atau segitiga untuk dipilih. Jika seseorang memilih bentuk yang berbeda atau tidak ada bentuk sama sekali, default ke bentuk lingkaran. Potong spasi yang tersisa oleh pemformatan CSS. 

 biarkan bentuk = 'lingkaran';
Jika (Properties.get ('- Bentuk-mask') & amp; & amp;
  ['Square', 'segitiga', 'lingkaran']
  .Cludes (Properties.get (
  '--Mask-bentuk'). Tostring (). Potong ())) {
  bentuk = properti.get (
  '--Mask-bentuk'). Tostring (). Potong (); }

04. Putuskan apakah akan mengungkapkan

Secara default, topeng memberikan garis besar bentuk yang ditentukan. Ketika pengguna melayang di atasnya, itu mengungkapkan Properti kustom menjadi benar, sehingga harus mengisi bentuknya.

Jenis properti khusus datang pada titik selanjutnya, yang berarti untuk saat ini a benar Nilai akan diteruskan sebagai string. Cocok dengan string dan atur variabel baru jika diatur. 

 biarkan mengungkapkan = false;
Jika (Properties.get ('- Mask-Reveal') & amp; & amp;
  Properties.get ('- Mask-Reveal')
  .tostring (). Potong () == 'true') {
  ungkapkan = benar; }

05. Temukan panjang terkecil

Akhirnya, kami ingin bentuk memiliki sisi dengan panjang yang sama. Ini berarti kita perlu menemukan yang terkecil dari lebar atau tinggi gambar dan menggunakan panjang itu untuk menghitung bentuk.

Mendefinisikan panjang maksimal variabel untuk memberi tahu sisa kode ukuran apa untuk membuat bentuk. Atur lebar garis konteks ke proporsi ukuran ini untuk menjaga hal-hal untuk skala. 

 const maxlength =
  Math.min (geom.width, geom.height);
ctx.linewidth = MaxLength / 25;

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Berlangganan ke Desainer Web .

Ingin mengambil lebih banyak trik 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.

Hasilkan, konferensi pemenang penghargaan untuk desainer web, kembali ke NYC pada 24-25 April! Klik gambar untuk memesan tiket

Tertarik belajar lebih banyak tentang bagaimana Houdini dapat menambah lebih banyak semangat untuk desain Anda? Sam Richard, Enterprise Mitra Engineer di Google akan memberikan sihir sistem desain ceramah dengan Houdini pada Hasilkan New York pada 25 April, di mana ia akan mengajarkan Anda bagaimana hal itu dapat membantu Anda memecahkan masalah sistem desain umum dan sangat meningkatkan fleksibilitas, kinerja dan pemeliharaan pola-pola ini.

Hasilkan New York Runs dari 24-25 April - Dapatkan Tiket Anda Sekarang !

Artikel terkait:

  • menghasilkan New York kembali untuk 2019
  • 14 dari API JavaScript terbaik
  • 10 Alat Desain Web Baru untuk April 2019

Bagaimana caranya - Artikel Terpopuler

Cara Mengompres Gambar: Panduan Desainer Web

Bagaimana caranya Sep 14, 2025

Kecepatan rata-rata koneksi internet modern akan terdengar sangat futuristik untuk master web dari masa lalu. Kembali pada hari-h..

Cara Membuat Werewolf 3D di Mesin Unreal

Bagaimana caranya Sep 14, 2025

Konsep, model, tekstur dan pengaturan materi untuk gambar ganas dari manusia serigala - yang dibuat untuk Kunoichi, permainan yang berorientasi stealth yang ditetapkan di dunia fantasi - dise..

10 Tips untuk pemodelan permukaan yang keras

Bagaimana caranya Sep 14, 2025

Gambar kapal uap besar Brunel yang hebat dari tahun 1858 ini berada di layar permanen di museum baru £ 7 juta di Bristol, yang m..

Cara menekankan titik fokus dari suatu gambar

Bagaimana caranya Sep 14, 2025

Menggunakan elemen Anda Pensil Underdrawing. adalah cara yang bagus untuk menangkap perhatian pemirsa dalam sepoto..

Buat bingkai gaya di Photoshop

Bagaimana caranya Sep 14, 2025

Halaman 1 dari 2: Halaman 1 Halaman 1 Ha..

Cat potret seperti master lama

Bagaimana caranya Sep 14, 2025

Untuk tutorial ini kami akan melihat manfaat yang mendalam untuk menyalin lukisan master lama. Saya telah memilih untuk menyalin ..

Buat karakter 3D Furry dari awal

Bagaimana caranya Sep 14, 2025

Menciptakan karakter bulu bisa mudah, tetapi jika Anda ingin membuat buah berbulu yang benar-benar menarik Seni 3d. ..

Persiapan dengan prototyping di Adobe XD

Bagaimana caranya Sep 14, 2025

Karena permintaan para profesional desain UX terus tumbuh, desainer mencari alat yang mudah digunakan yang cukup kuat untuk menciptakan prototipe berkualitas tinggi, tetapi itu terasa akrab d..

Kategori