Cara menggunakan teknik clipping dan masking CSS dan SVG

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

Untuk membantu memperjelas hal-hal, masking dan kliping adalah dua cara berbeda Anda dapat memanipulasi gambar dengan CSS. Mari kita mulai dengan kliping.

Dasar-dasar kliping

Jika Anda pernah menggunakan Photoshop, Anda mungkin sudah tidak asing lagi dengan Clipping Masks. Ini adalah jenis pendekatan yang serupa. Kliping melibatkan peletakan bentuk vektor, seperti lingkaran atau segitiga, di atas gambar atau elemen. Setiap bagian dari gambar di belakang bentuk akan terlihat, sementara segala sesuatu di luar batas bentuk akan disembunyikan.

Misalnya, jika topeng kliping segitiga berada di atas gambar hutan, Anda akan melihat gambar hutan di dalam bentuk segitiga. Batas bentuk disebut jalur klip, jangan bingung 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 yang rusak. Aplikasi pengembangan lokal gratis kami, Lokal, akan membantu Anda menyiapkan lingkungan pengujian tempat Anda dapat mengikuti tutorial ini dengan aman.

Kliping beraksi

Klip selalu merupakan jalur vektor. Ini bisa membingungkan untuk dipahami, tetapi 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 adalah cuplikan struktur HTML dari contoh:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Ini adalah CSS untuk membuat kliping terjadi:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

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

Alat kliping

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 dari gambar atau elemen lain pada halaman. Kami akan berfokus pada grafik SVG, tetapi perlu diingat bahwa ini dapat dilakukan dengan jenis atau gaya gambar lainnya.

Properti topeng dan elemen topeng

Sekedar penyegaran untuk membantu memvisualisasikan, penting untuk diingat bahwa elemen bertopeng adalah gambar "asli" (sebelum topeng diterapkan). Anda mungkin tidak ingin melihat keseluruhan gambar, jadi menyembunyikan sebagiannya dilakukan dengan properti mask CSS. mask adalah singkatan CSS untuk sekelompok properti individu, yang akan kita selami sebentar lagi. Elemen <mask> SVG digunakan di dalam grafik SVG untuk menambahkan efek masking. Dalam contoh ini, topengnya adalah lingkaran dan ada juga gradien yang diterapkan.

Menggunakan elemen topeng SVG pada grafik SVG

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

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

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

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

Dengan CSS ini, kami menentukan di mana menemukan topeng. Ini akan mencari ID dari #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

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

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

Penyembunyian teks SVG

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

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

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

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

Properti topeng-gambar

Gambar dapat dideklarasikan dan gambar mask-image dapat diatur ke nilai URL. Gambar 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 seluruhnya bagian dari objek atau elemen, pertama-tama Anda akan menginginkan tautan gambar ke file untuk elemen yang akan di-mask. Berikut tampilan gambar tersebut. Ini berwarna-warni untuk membuatnya sangat jelas bagian mana yang ditampilkan dan disembunyikan topeng.

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

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

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

Properti mask-image adalah tempat bentuk topeng akan dideklarasikan. Dalam hal ini, gambar topeng adalah grafik SVG. Memiliki tautan URL yang disertakan adalah cara topeng dibuat.

Ini dia di Codepen.

Menggabungkan beberapa gambar topeng

Tepat ketika Anda berpikir masking tidak bisa lebih baik, ada opsi untuk mengatur lebih dari satu layer gambar topeng. Yang perlu Anda lakukan adalah menambahkan dua nilai URL (atau lebih jika Anda merasa ambisius) dipisahkan dengan koma.

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

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

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

Ini dia di Codepen.

Buat gradien sederhana dengan mask-image

Tidak semua topeng harus berbentuk kompleks. Terkadang bukan gambar tertentu yang menjadi topeng, melainkan topeng sederhana seperti gradien. Jika Anda mencari cara cepat untuk mencapai ini, properti mask-image adalah opsi, yang cukup mudah diterapkan.

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

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

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 topeng. Jika Anda pernah membuat latar belakang ubin sebelumnya, ini mirip dengan itu.

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

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

mask-size: 200px;
webkit-mask-size: 200px;

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

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

Dukungan peramban

Sebelum berkomitmen pada cara baru bekerja dengan grafik, penting untuk dicatat bahwa dukungan browser tidak konsisten dengan clipping dan masking. Clipping lebih didukung daripada masking, tetapi Internet Explorer tidak sepenuhnya mendukung clipping. Dukungan browser saat ini untuk masker CSS juga cukup terbatas, jadi disarankan untuk digunakan sebagai peningkatan pada beberapa elemen dekoratif. Dengan begitu, jika tidak didukung oleh browser pengguna, tidak akan memengaruhi pengalaman menonton konten.

Untuk menguji hal-hal dan melihat apakah topeng dan kliping Anda didukung, saya 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 ia akan didukung sepenuhnya. Jangan biarkan keterbatasan membuat Anda kecewa – selalu baik untuk menjadi yang terdepan dalam permainan 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 saat ini, hal ini kemungkinan akan menjadi praktik umum di masa mendatang. Selalu menyenangkan untuk memikirkan bagaimana teknik ini dapat digunakan untuk menciptakan visual yang menarik. Grafik web masa depan akan membuat kita tidak terlalu bergantung pada editor gambar dan memungkinkan cara yang lebih efektif untuk membuat dan memodifikasi citra langsung di browser.

Berikutnya: Desain situs lebih cepat!

Anda memahami pentingnya proses desain web yang efisien. Apa pun yang dapat Anda lakukan untuk mendesain situs web lebih cepat berarti lebih banyak uang di saku Anda. Itu sebabnya Flywheel merancang platform hosting kami untuk menghemat waktu Anda dan membuat Anda tetap melakukan pekerjaan terbaik Anda! Dengan tips dan alat desain web ini, Anda dapat menyelesaikan lebih banyak proyek dan menghabiskan lebih banyak waktu untuk mengembangkan bisnis Anda.

Dalam panduan ini, kami akan membahas tip tentang cara bekerja lebih cepat dan mempercepat alur kerja WordPress Anda. Dari penyiapan situs awal hingga menjalankannya, temukan bagaimana Anda dapat memangkas jam kerja dari pekerjaan sehari-hari Anda! Unduh hari ini.

Artikel ini awalnya diterbitkan pada 3 Agustus 2016. Terakhir diperbarui pada 6 November 2018.