Jalur, bentuk, kliping, dan masking

Rendering HTML dibangun di atas model kotak, tetapi ada lebih banyak hal dalam hidup (dan desain web) daripada sekadar persegi panjang. CSS mendukung beberapa cara untuk mengubah area elemen yang dirender, sehingga memberi kebebasan kepada developer untuk membuat desain yang mendukung semua bentuk dan ukuran. Pemangkasan memungkinkan bentuk geometris, sedangkan penyamaran memengaruhi visibilitas di tingkat piksel.

Jalur dan Bentuk

CSS menggunakan fungsi untuk menentukan bentuk. Kami membahas informasi umum tentang fungsi dalam modul Fungsi CSS. Di bagian ini, Anda akan mempelajari cara membuat bentuk di CSS. Semua contoh berikut menggunakan bentuk yang Anda buat dengan properti clip-path, yang mengurangi area yang terlihat hanya pada apa yang ada di dalam bentuk. Hal ini memungkinkan elemen berbeda secara visual dari kotak elemen. Kita akan membahas pemangkasan secara lebih mendetail nanti.

Bentuk yang ditentukan dalam CSS dapat berupa bentuk dasar (seperti lingkaran, persegi panjang, dan poligon) atau jalur (yang dapat menentukan bentuk kompleks dan gabungan).

Bentuk dasar

circle() dan ellipse()

Fungsi circle() dan ellipse() menentukan bentuk bulat dan oval dengan radius relatif terhadap elemen. Fungsi circle() menerima satu ukuran atau persentase sebagai argumen. Secara default, kedua fungsi memosisikan bentuk relatif terhadap tengah elemen. Keduanya menerima posisi opsional setelah kata kunci at, yang dapat dinyatakan sebagai panjang, persentase, atau kata kunci posisional.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

Contoh sebelumnya menunjukkan jalur kliping melingkar menggunakan fungsi circle(). Perhatikan bahwa radius 50% akan membuat lingkaran dengan lebar penuh elemen. Fungsi ellipse() menerima dua argumen yang merepresentasikan jari-jari horizontal dan vertikal bentuk.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

Contoh sebelumnya menunjukkan jalur kliping elips menggunakan fungsi ellipse(). Perhatikan bahwa radius 50% akan membuat elips dengan lebar penuh elemen. Contoh berikut menampilkan elips yang sama yang diposisikan dengan titik tengahnya di bagian atas elemen.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() dan inset()

Fungsi rect() dan inset() menyediakan berbagai cara untuk menentukan persegi panjang dengan menyetel posisi sisinya relatif terhadap sisi elemen. Dengan begitu, Anda dapat membuat persegi panjang yang secara visual berbeda dari kotak default elemen. Secara opsional, mereka menerima kata kunci round untuk membuat persegi panjang dengan sudut membulat, menggunakan sintaksis yang sama dengan properti singkat border-radius.

Fungsi rect() menentukan posisi sisi atas dan bawah persegi panjang relatif terhadap tepi atas elemen dan sisi kiri dan kanan relatif terhadap tepi kiri elemen. Fungsi ini menerima empat unit ukuran atau persentase sebagai argumen yang menentukan sisi atas, kanan, bawah, dan kiri. Anda dapat memilih fungsi rect() jika menginginkan persegi panjang yang tidak diskalakan saat ukuran elemen berubah atau yang mempertahankan proporsi yang sama saat elemen berubah.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

Contoh sebelumnya menunjukkan jalur kliping persegi panjang yang ditentukan menggunakan fungsi rect(). Dimensi relatif terhadap tepi atas dan kiri elemen seperti yang ditunjukkan dalam diagram.

Fungsi inset() menentukan posisi sisi persegi panjang berdasarkan jarak ke dalam dari setiap sisi elemen. Fungsi ini menerima satu hingga empat unit ukuran atau persentase sebagai argumen, sehingga Anda dapat menentukan beberapa sisi sekaligus. Anda dapat memilih fungsi inset() saat menginginkan persegi panjang yang diskalakan dengan elemen atau persegi panjang yang memiliki jarak tetap dari tepi elemen.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

Contoh sebelumnya menunjukkan jalur kliping persegi panjang yang ditentukan menggunakan fungsi inset(). Dimensi relatif terhadap sisi elemen.

Fungsi rect() dan inset() secara opsional menerima kata kunci round untuk membuat persegi panjang dengan sudut membulat, menggunakan sintaksis yang sama dengan properti singkat border-radius. Contoh berikut menunjukkan versi persegi panjang yang dibulatkan seperti yang ditunjukkan sebelumnya.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

Untuk bentuk lain, seperti segitiga, pentagon, bintang, dll., fungsi polygon() memungkinkan Anda membuat bentuk dengan menghubungkan beberapa titik dengan garis lurus. Fungsi polygon() menerima daftar pasangan yang terdiri dari dua unit panjang atau persentase. Setiap pasangan menjelaskan titik pada poligon: nilai pertama adalah jarak dari tepi kiri elemen, nilai kedua adalah jarak dari tepi atas elemen. Anda tidak perlu menutup poligon, karena poligon akan diselesaikan dengan menghubungkan titik terakhir dengan titik pertama.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

Contoh sebelumnya membuat jalur kliping segitiga dengan menentukan tiga titik.

Secara default, fungsi polygon() merender area yang tumpang-tindih sebagai terisi. Anda dapat mengubah perilaku ini dengan argumen pertama opsional yang disebut aturan pengisian. Untuk bergantian antara area yang diisi dan tidak diisi, tetapkan aturan pengisian ke evenodd. Untuk menggunakan aturan pengisian default, tetapkan ke nonzero.

Contoh sebelumnya menunjukkan fungsi polygon() dengan fungsi trigonometri untuk membuat poligon reguler dan bentuk bintang. Hal ini tidak membuat poligon reguler terbesar yang muat di dalam elemen atau memusatkannya–kami akan membiarkannya sebagai latihan untuk Anda coba. Bentuk bintang dalam contoh ini juga menunjukkan aturan pengisian nonzero dan evenodd.

Bentuk kompleks

Jika fungsi bentuk dasar tidak cukup untuk menggambarkan bentuk yang kompleks, CSS menyediakan fungsi yang menggunakan sintaksis yang lebih canggih untuk menggambarkan fitur seperti kurva dan garis. Fungsi ini juga berguna untuk bentuk gabungan (bentuk yang terdiri dari beberapa bentuk, seperti lingkaran dengan lubang di dalamnya).

path()

Fungsi path() menerima string sintaksis jalur SVG untuk mendeskripsikan bentuk. Hal ini memungkinkan bentuk kompleks dibuat menggunakan petunjuk yang menjelaskan garis dan kurva yang membentuk bentuk tersebut. Mengedit sintaksis SVG secara langsung bisa rumit, jadi sebaiknya pertimbangkan editor visual khusus yang dapat mengekspor sintaksis saat membuat bentuk dengan fungsi path().

Fungsi path() tidak menggunakan unit ukuran CSS dan semua nilai ditafsirkan sebagai piksel. Artinya, bentuk yang dibuat dengan fungsi jalur tidak responsif terhadap ukuran elemen atau penampung. Sebaiknya gunakan path() hanya untuk bentuk yang memiliki dimensi tetap.

shape()

Fungsi shape() menggunakan sintaksis perintah untuk mendeskripsikan bentuk, mirip dengan fungsi path(). Namun, perintah fungsi shape() adalah CSS native dan dapat menggunakan unit ukuran CSS. Dengan demikian, bentuk yang ditentukan menggunakan fungsi shape() dapat diukur ukurannya secara responsif.

Contoh sebelumnya menggunakan fungsi path() dan shape() untuk menentukan bentuk hati dan lingkaran dengan lubang di tengah. Contoh ini menggunakan nilai yang sama dalam piksel untuk kedua fungsi, tetapi fungsi shape() dapat menggunakan unit ukuran CSS lainnya seperti persentase atau unit relatif penampung juga.

Kliping

Pemangkasan menentukan area elemen yang terlihat, mirip dengan memangkas gambar dari majalah. Properti clip-path menetapkan jalur yang digunakan untuk menentukan area klip.

Seperti yang Anda lihat dalam contoh di bagian sebelumnya, fungsi bentuk atau jalur dasar apa pun dapat digunakan sebagai clip-path. Properti clip-path juga mendukung jalur yang ditentukan dalam elemen clipPath SVG, yang dapat disematkan atau berada dalam file terpisah.

Diagram sebelumnya menunjukkan bagaimana penambahan clip-path ke elemen gambar mengubah area gambar yang terlihat. Jalur klip atas menggunakan fungsi circle(), sedangkan jalur klip bawah menggunakan clipPath SVG. Perhatikan bahwa lingkaran yang dibuat menggunakan fungsi circle() diposisikan di tengah elemen secara default.

Properti clip-path hanya menerima satu jalur. Untuk menggunting elemen dengan beberapa bentuk yang tidak tumpang-tindih, gunakan fungsi path() atau shape() untuk menentukan jalur gabungan, atau gunakan clipPath SVG. Opsi lain untuk skenario kompleks adalah menggunakan masking, bukan clipping, yang akan kita bahas di bagian selanjutnya.

Memotong dengan bentuk

Untuk menggunting menggunakan fungsi bentuk atau jalur dasar, tetapkan properti clip-path ke nilai yang ditampilkan oleh fungsi, seperti pada contoh sebelumnya. Setiap fungsi akan memosisikan bentuk kliping secara berbeda relatif terhadap elemen, jadi lihat referensi untuk setiap fungsi.

Dalam contoh sebelumnya, dua elemen memiliki clip-path melingkar yang diterapkan menggunakan class .clipped. Perhatikan bahwa clip-path diposisikan relatif terhadap setiap elemen dan teks dalam clip-path tidak diatur ulang untuk mengikuti bentuk.

Kotak referensi jalur kliping

Secara default, jalur kliping untuk elemen mencakup batas elemen. Saat menggunakan salah satu fungsi bentuk dasar, Anda dapat menyetel kotak referensi clip-path untuk menyertakan hanya area elemen dalam batas. Nilai yang valid untuk kotak referensi adalah stroke-box (default) dan fill-box (untuk menyertakan hanya area di dalam batas).

Contoh sebelumnya menunjukkan elemen dengan batas besar (20px), yang masing-masing menggunakan fungsi inset() untuk menetapkan clip-path. Elemen yang memotong relatif terhadap batas elemen masih menampilkan sebagian batas. Elemen yang dipangkas relatif terhadap area di dalam batas tidak menampilkan batas dan lebih kecil, meskipun dengan nilai inset yang sama.

Kliping dengan grafik

Jalur kliping dapat ditentukan dalam dokumen SVG, baik disematkan dalam dokumen HTML atau dirujuk secara eksternal. Hal ini dapat berguna untuk menentukan jalur kliping kompleks yang dibuat dalam program grafis atau jalur kliping yang menggabungkan beberapa bentuk.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

Dalam contoh sebelumnya, clipPath dengan id kitten-clip-shape diterapkan ke elemen <img>. Dalam hal ini, dokumen SVG disematkan dalam HTML. Jika dokumen SVG adalah file eksternal bernama kitten-clipper.svg, maka clipPath akan dirujuk sebagai url(kitten-clipper.svg#kitten-clip-shape).

Penyamaran

Penyamaran adalah metode lain untuk menentukan area elemen yang ditampilkan atau disembunyikan. Jika pemangkasan menggunakan bentuk atau jalur dasar, masking menggunakan piksel dari gambar atau gradien untuk menentukan visibilitas. Tidak seperti pemangkasan, masking memungkinkan area elemen menjadi transparan sebagian. Beberapa gambar mask dapat diterapkan ke elemen untuk menghasilkan berbagai efek.

Untuk menerapkan mask, tetapkan properti mask-image. Properti ini menerima satu atau beberapa gambar, gradien, atau referensi ke elemen <mask> dalam dokumen SVG. Beberapa gambar mask dapat diterapkan dengan memisahkannya menggunakan koma.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

Pada contoh sebelumnya, .my-element ditutup menggunakan gambar PNG, diikuti dengan gradien linear. Beberapa mask digabungkan secara default untuk membuat mask akhir.

Contoh sebelumnya menunjukkan gambar dengan satu atau beberapa mask diterapkan. Aktifkan setiap masker untuk melihat bagaimana masker digabungkan untuk menghasilkan efek akhir.

Masking alfa versus luminance

Anda dapat menerapkan mask menggunakan alpha atau luminance gambar. Saat membuat mask berdasarkan alpha, transparansi setiap piksel dalam gambar mask diterapkan ke elemen, dengan mengabaikan informasi warna piksel tersebut. Saat membuat mask berdasarkan luminance, transparansi dan nilai setiap piksel (seberapa terang atau gelap) diterapkan ke elemen. Pemberian mask oleh luminans memperlakukan warna yang lebih cerah sebagai terlihat dan warna yang lebih gelap sebagai tidak terlihat.

Untuk menyetel mode masking, gunakan properti mask-mode. Secara default, properti mask-mode disetel ke match-source, yang menetapkan mode berdasarkan jenis gambar mask. Untuk gambar dan gradien, nilai ini akan ditetapkan secara default ke alpha. Untuk mask SVG, nilai ini akan ditetapkan secara default ke nilai properti mask-type elemen <mask> atau luminance, jika tidak ada mask-type yang ditentukan.

Pada contoh sebelumnya, pola pengujian yang menampilkan nilai warna dan alfa yang berbeda digunakan sebagai mask. Dengan mengganti mask-mode, Anda dapat melihat bagaimana mode alpha didasarkan pada transparansi, sedangkan mode luminance didasarkan pada kecerahan warna dan transparansi.

Properti penyamaran tambahan

CSS menyediakan properti tambahan untuk menyempurnakan perilaku mask Anda. Setiap properti menerima daftar nilai yang dipisahkan koma, yang akan dicocokkan dengan daftar mask yang ditetapkan oleh properti mask-image. Jika jumlah nilai lebih sedikit daripada mask, daftar akan berulang hingga nilai ditetapkan untuk setiap mask. Jika ada lebih banyak nilai daripada mask, nilai berlebih akan dibuang.

Singkatan mask

Anda dapat menetapkan beberapa properti mask sekaligus dengan singkatan mask. Hal ini dapat menyederhanakan penetapan beberapa mask dengan mengelompokkan semua properti setiap mask. Singkatan mask setara dengan menetapkan properti ini secara berurutan: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, dan mask-composite. Tidak semua properti perlu disertakan dan properti yang tidak disertakan akan direset ke nilai awalnya. Dengan dukungan hingga delapan properti per mask, akan sangat membantu jika referensi lengkap tersedia.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

Dalam contoh sebelumnya, setiap class memiliki dua mask yang diterapkan. Yang pertama menggunakan properti individual, sedangkan yang kedua menggunakan singkatan mask. Kedua gaya ini setara satu sama lain.

Mengalirkan teks di sekitar elemen mengambang

Saat memangkas atau membuat mask elemen, Anda hanya mengubah area yang terlihat dalam kotaknya, tetapi kotaknya sendiri tetap tidak berubah. Artinya, elemen mengambang akan memengaruhi alur dokumen berdasarkan kotak pembatas aslinya, bukan bagian elemen yang terlihat. Untuk menentukan alur di sekitar elemen, gunakan properti shape-outside bersama dengan jalur klip.

Properti shape-outside menentukan bentuk yang akan mengalirkan konten di sekitar elemen. Bentuk ini dapat berupa fungsi bentuk dasar apa pun, tetapi bukan bentuk yang ditentukan menggunakan fungsi path() atau shape(), atau clipPath yang ditentukan dalam dokumen SVG.

Properti shape-outside juga menerima gambar atau gradien. Seperti halnya penyamaran, batas bentuk akan ditentukan oleh transparansi gambar atau gradien. Properti shape-image-threshold menetapkan tingkat transparansi yang dianggap berada di dalam bentuk.

Bentuk dalam animasi

Menganimasikan clip-path

Anda dapat menganimasikan properti clip-path, memadukan bentuk ke bentuk. Anda harus menggunakan fungsi bentuk yang sama untuk setiap keyframe guna menghasilkan animasi yang lancar. Saat menggunakan fungsi polygon() atau shape(), jumlah titik yang sama harus digunakan di setiap keyframe.

Dalam contoh sebelumnya, clip-path elemen bertransisi antara bentuk pentagon dan bintang yang ditentukan menggunakan fungsi polygon(). Contoh ini menggunakan aturan pengisian evenodd untuk menunjukkan cara titik-titik yang beranimasi membuat area yang tumpang-tindih.

Menganimasikan dengan offset-path

Anda juga dapat membuat animasi elemen di sepanjang jalur yang dibuat dengan fungsi bentuk ini. Properti offset-path menetapkan bentuk yang akan digunakan sebagai jalur, dan offset-distance menetapkan posisi di sepanjang jalur tersebut. Anda juga dapat menggunakan fungsi ray() dengan properti offset-path untuk menganimasikan sepanjang garis lurus.

Contoh sebelumnya menunjukkan penggunaan poligon yang sama untuk clip-path dan offset-path. Animasi menggunakan offset-distance untuk memindahkan bintang yang lebih kecil di sepanjang poligon yang sama dengan yang digunakan bintang besar sebagai clip-path-nya.

Periksa pemahaman Anda