Cara Menggunakan Teknik Clipping dan Masking CSS dan SVG

SVG sangat bagus untuk bekerja di web, dan clipping serta masking memungkinkan beberapa cara menarik untuk menampilkan atau menyembunyikan potongan grafik web Anda. Menggunakan teknik ini juga memungkinkan lebih banyak fleksibilitas dengan desain Anda karena Anda tidak perlu melakukan perubahan secara manual dan membuat gambar baru—semuanya dilakukan dengan kode. Dengan menggunakan kombinasi teknik kliping dan masking CSS, Anda akan memiliki banyak pilihan untuk grafis situs web Anda.

Untuk membantu memperjelas berbagai hal, masking dan clipping adalah dua cara berbeda untuk memanipulasi gambar dengan CSS. Mari kita mulai dengan kliping.

Dasar-dasar Kliping

Jika Anda pernah menggunakan Photoshop, Anda mungkin sudah familiar dengan Clipping Masks. Ini adalah pendekatan serupa. Clipping melibatkan peletakan bentuk vektor, seperti lingkaran atau segitiga, di atas gambar atau elemen. Setiap bagian gambar di belakang bentuk akan terlihat, sedangkan segala sesuatu di luar batas bentuk akan disembunyikan.

Misalnya, jika clipping mask segitiga berada di atas gambar hutan, Anda akan melihat gambar hutan dalam bentuk segitiga. Batas bentuk disebut jalur klip, berbeda dengan properti clip yang disusutkan. Anda membuat jalur klip dengan menggunakan properti clip-path .

Catatan: Jangan Coba Ini di Situs Langsung Anda

Ingat: Anda tidak boleh mengubah kode secara langsung di situs Anda, untuk memastikan tidak ada kerusakan. Aplikasi pengembangan lokal gratis kami, Lokal, akan membantu Anda menyiapkan lingkungan pengujian tempat Anda dapat mengikuti tutorial ini dengan aman.

Kliping dalam Aksi

Klip selalu merupakan jalur vektor. Mungkin membingungkan untuk memahaminya, namun apa pun di luar jalur akan disembunyikan, sementara apa pun di dalam jalur akan terlihat. Untuk mendapatkan pemahaman yang lebih baik dan mengujinya sendiri, lihat contoh di CodePen.

Berikut cuplikan struktur HTML dari contoh:

 [html]

<svg class="clip-svg">
	<defs>
		<clipPath id="poligon-klip-segitiga-sama sisi" clipPathUnits="objectBoundingBox">
			<titik poligon="0 0,87, 0,5 0, 0,5 0, 1 0,87" />
		</clipPath>
	</defs>
</svg>

[/html]

Ini adalah CSS untuk membuat kliping terjadi:

 [css]

.polygon-klip-segitiga-sama sisi {
	-jalur klip-webkit: poligon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	jalur klip: poligon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-jalur klip-webkit: url("#poligon-klip-segitiga-sama sisi");
	jalur klip: url("#poligon-klip-segitiga-sama sisi");
}

[/css]

Anda dapat melihat di mana id clipPath direferensikan dalam HTML dan bagaimana ia menggunakan URL clip-path untuk melakukan kliping.

Alat Klip

Clippy adalah alat yang hebat untuk menghasilkan jalur klip CSS. Ada berbagai macam bentuk dan ukuran starter yang dapat disesuaikan.

Dasar-dasar Penyamaran

Masking dilakukan menggunakan gambar PNG, gradien CSS, atau elemen SVG untuk menyembunyikan bagian gambar atau elemen lain pada halaman. Kami akan fokus pada grafik SVG, namun perlu diingat ini dapat dilakukan dengan tipe atau gaya gambar lain.

Properti Topeng dan Elemen Topeng

Sekadar penyegaran untuk membantu visualisasi, penting untuk diingat bahwa elemen yang di-mask adalah gambar “asli” (sebelum masker diterapkan). Anda mungkin tidak ingin melihat keseluruhan gambar, jadi menyembunyikan sebagian gambar dapat dilakukan dengan properti mask CSS. mask adalah singkatan CSS untuk sekelompok properti individual, yang akan kita bahas sebentar lagi. Elemen SVG <mask> digunakan di dalam grafik SVG untuk menambahkan efek masking. Dalam contoh ini, topengnya berbentuk lingkaran dan ada juga gradien yang diterapkan.

Menggunakan Elemen Mask SVG pada Grafik SVG

Untuk merasakan <mask> SVG kita akan menutupinya dengan grafis SVG.

Sekilas mungkin agak rumit, tetapi semuanya bekerja sama untuk menutupi gambar yang mendasarinya. Kita mempunyai gambar sebenarnya sebagai latar belakang, jadi di manakah SVG ikut berperan? Berbeda dengan contoh kliping, gambar latar belakang ini secara teknis berada di dalam elemen SVG. Kami akan menggunakan CSS untuk menerapkan topeng ini pada gambar. Properti akan berasal dari elemen mask SVG, dan kami akan memberinya id masked-element di CSS kami.

Untuk melihat cara kerjanya, lihat contoh Codepen ini. Berikut kode kerja untuk grafik SVG bertopeng:

 [html]

<svg class="elemen bertopeng" lebar="300" tinggi="300" viewBox="0 0 300 300">
	<gambar xlink:href="tautan gambar" lebar="300px" tinggi="300px" />
</svg>

[/html] 

Dengan CSS ini, kita menentukan di mana menemukan topengnya. Ini akan mencari ID #mask-this:

 [css]
/* Berikut CSS untuk masking */
.gambar elemen bertopeng {
  topeng: url(#mask1);
}

[/css] 

Perhatikan gradien pada bentuk lingkaran? Gradien telah diterapkan, serta mengatur bentuk lingkaran untuk topeng.

 [html]

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="lulusan" gradienUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="putih" offset="0"/>
      <stop stop-color="hijau" stop-opacity="0" offset="1"/>
    </linearGradien>
    <lingkaran cx="0,50" cy="0,50" r="0,50" id="lingkaran" isi="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

[/html]

Penyembunyian Teks SVG

Penyembunyian teks dapat melakukan beberapa hal keren, seperti menampilkan gambar melalui blok teks. Kabar baiknya adalah elemen teks dapat digunakan di dalam topeng SVG. Seiring dengan meningkatnya dukungan browser di masa depan, ini bisa menjadi cara yang sangat menarik untuk menggabungkan gambar dan tipografi.

Berikut penjelasan dasar tentang apa yang sedang terjadi. Ada elemen teks SVG di dalam topeng SVG. Kami telah menentukan nilai RGB untuk warna putih, yang menciptakan area oval di sekitar teks yang disamarkan. Apa pun di belakang area oval terlihat melalui teks, memberikan kesan terpotong.

 [html]

<div class="text-wrap">
    <svg class="teks-demo" viewBox="0 0 600 400" lebar="600" tinggi="400">
    <defs>
      <mask id="Mask saya">
        <lebar persegi="100%" tinggi="100%" isi="#fff" />
        <teks x="50" y="200" id="Tekssaya">Teks Saya</teks>
        <teks x="125" y="293" id="Subtekssaya">SVG</teks>
      </mask>
    </defs>
    <kelas elips="bertopeng" cx="300" cy="200" rx="300" ry="150" isi="rgba(255, 255, 255, 0,8)" />
  </svg>
  </div>

[/html]

 [css]

/* Berikut CSS untuk elemen teks */
#teksku {
ukuran font: 125 piksel;
gaya font: tebal;
isi: #000;
}

/* Berikut CSS untuk masking */
.bertopeng {
topeng: url("#MaskSaya");
}

[/css]

Untuk memahami sepenuhnya, ada gunanya bermain-main dan bereksperimen dengan kode. Coba ubah warna, ubah teks, dan sesuaikan ukuran di Codepen ini.

Properti Gambar Topeng

Sebuah gambar dapat dideklarasikan dan mask-image dapat diatur ke nilai URL. mask-image dapat berupa PNG, SVG, atau referensi ke elemen mask SVG, seperti yang saya tunjukkan pada contoh sebelumnya.

Karena masking digunakan untuk menyembunyikan sebagian atau seluruh bagian objek atau elemen, pertama-tama Anda memerlukan link gambar ke file untuk elemen yang akan di-mask. Berikut penampakan gambarnya. Berwarna-warni untuk memperjelas bagian mana yang ditampilkan dan disembunyikan topeng.

 [css]

<img class="mask-img contoh-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Gambar bertopeng">

[/css] 

Sejauh ini sudah ada banyak kode SVG, namun contoh ini sedikit berbeda karena akan ada gambar raster yang disamarkan dengan SVG.

 [css]

.contoh-mask {
  gambar topeng: url(https://linktoimage.com/browser-icon-01.svg);
  gambar-mask-webkit: url(https://linktoimage.com/browser-icon-01.svg);
  mode topeng: alpha;
  mode topeng-webkit: alfa;
  pengulangan topeng: tanpa pengulangan;
  webkit-mask-repeat: tidak ada pengulangan;
  ukuran topeng: 200px;
  ukuran masker webkit: 200px;
  posisi topeng: tengah;
  posisi topeng-webkit: tengah;
}

[/css]

Properti mask-image adalah tempat bentuk topeng akan dideklarasikan. Dalam hal ini, gambar topeng adalah grafik SVG. Memasukkan tautan URL adalah cara pembuatan topeng.

Ini dia di Codepen.

Menggabungkan Beberapa Gambar Topeng

Saat Anda mengira penyembunyian tidak bisa lebih baik lagi, ada opsi untuk mengatur lebih dari satu lapisan gambar topeng. Yang perlu Anda lakukan hanyalah menambahkan dua nilai URL (atau lebih jika Anda merasa ambisius) yang dipisahkan dengan koma.

Untuk memperluas topeng sederhana dari atas, akan ada panah yang ditambahkan ke grafik aslinya. Beginilah cara dua topeng digabungkan.

 [css]

.mask-gabungan {
   gambar topeng: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  gambar-mask-webkit: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

[/css] 

Yang harus Anda lakukan adalah menambahkan dua nilai (dengan koma) dan sekarang ada dua masker gabungan, membuat kemungkinan masking tidak terbatas.

Ini dia di Codepen.

Buat Gradien Sederhana dengan mask-image

Tidak semua topeng harus berbentuk rumit. Kadang-kadang bukan gambar tertentu yang dijadikan topeng, melainkan topeng sederhana seperti gradien. Jika Anda mencari cara cepat untuk mencapai hal ini, properti mask-image adalah sebuah opsi, yang cukup mudah untuk diterapkan.

Dalam contoh ini, ada kelas yang diterapkan pada kumpulan gradien sebagai properti mask-image . Dengan deklarasi sederhana ini, mudah untuk membuat masker gradien pada gambar.

 [css]

mask-image: gradien linier (hitam, putih, transparan);
-webkit-mask-image: linear-gradient(hitam, putih, transparan);

[/css] 

Lihat ini di Codepen.

Properti Pengulangan Topeng

Setelah Anda membuat satu topeng, cukup mudah untuk membuat lebih banyak lagi. Ini sangat berguna jika Anda ingin membuat pola khusus. Properti mask-repeat memungkinkan pengulangan mask. Jika Anda pernah membuat latar belakang ubin sebelumnya, ini serupa dengan itu.

Ada beberapa hal penting yang perlu diingat, seperti ukuran dan jenis mask-repeat yang perlu dideklarasikan agar pola sempurna tercipta.

mask-size cukup mudah untuk divisualisasikan, terutama dengan nilai piksel yang ditetapkan di sini.

 [css]

ukuran topeng: 200 piksel;
ukuran masker webkit: 200 piksel;

[/css] 

Ada beberapa opsi pengulangan topeng jika Anda mencari efek berbeda untuk polanya:

• repeat-x mengulangi sepanjang koordinat x.
• Repeat-y mengulangi koordinat y.
• space berulang dan menyebar di area yang tersedia.
• round berulang beberapa kali di seluruh area yang tersedia (penskalaan akan membantunya mengisi ruang jika diperlukan)

Dukungan Peramban

Sebelum berkomitmen pada cara baru bekerja dengan grafis ini, penting untuk diingat bahwa dukungan browser tidak konsisten dengan clipping dan masking. Kliping lebih didukung daripada masking, namun Internet Explorer tidak sepenuhnya mendukung kliping.

Dukungan browser saat ini untuk masker CSS juga cukup terbatas, sehingga disarankan untuk digunakan sebagai penyempurnaan pada beberapa elemen dekoratif. Dengan begitu, jika tidak didukung oleh browser pengguna, tidak mempengaruhi pengalaman menonton konten.

Untuk mengujinya dan melihat apakah masker dan kliping Anda didukung, kami sarankan membuat JSFiddle atau Codepen dan kemudian mencobanya di browser yang berbeda. Dukungan browser telah meningkat dalam beberapa tahun terakhir, dan pada akhirnya akan mencapai titik di mana dukungan penuh akan diberikan.

Jangan biarkan keterbatasan membuat Anda kecewa—adalah hal yang baik untuk menjadi yang terdepan dan begitu dukungan menjadi lebih umum, Anda akan tahu persis bagaimana merevolusi grafis Anda. Jika ragu, pastikan untuk merujuk ke Can I Use yang tepercaya.

Setelah bereksperimen dengan contoh-contoh ini, ini akan memberikan pengenalan yang baik tentang masking dan clipping. Meskipun dukungan browser terbatas pada saat ini, hal ini kemungkinan akan menjadi praktik umum di masa depan.

Selalu menyenangkan memikirkan bagaimana teknik ini dapat digunakan untuk menciptakan visual yang menarik. Masa depan grafik web akan mengurangi ketergantungan kita pada editor gambar dan memungkinkan cara yang lebih efektif untuk membuat dan memodifikasi gambar langsung di browser.

Bila Anda ingin memberikan semua kerja keras yang Anda lakukan pada situs Anda, pastikan Anda memilih hosting WordPress terbaik dengan WP Engine!