Cara Membuat Cutout Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

Di bawah ini kita akan mempelajari cara membuat cutout / knockout yang responsif dengan CSS.

Cutout (atau teks knockout) adalah teks tembus pandang yang tampak terpotong di atas gambar latar belakang:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.image-container {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 5vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
</style>
</head>
<body>

<h2>Contoh Efek Cutout Yang Responsif</h2>

<div class="image-container">
  <div class="text">Gunung Fuji Jepang</div>
</div>

<p> Contoh ini membuat teks cutout / teks knockout yang responsif - teks yang tampak terpotong di atas gambar latar. </p>
<p> Ubah ukuran jendela browser untuk melihat efek responsif. </p>
<p> <strong> Catatan: </strong> Contoh ini tidak berfungsi di Internet Explorer atau Edge. </p>

</body>
</html>

Catatan: Contoh ini tidak berfungsi di Internet Explorer atau Edge.

Cara Membuat Teks Potongan

Langkah 1) Tambahkan HTML:
Contoh

<div class="image-container">
  <div class="text">Gunung Fuji Jepang</div>
</div>

Langkah 2) Tambahkan CSS:
Properti mode campuran campuran memungkinkan untuk menambahkan teks potongan ke gambar. Namun, ini tidak didukung di IE atau Edge:
Contoh

.image-container {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg"); /* Gambar yang digunakan - penting! */
  background-size: cover;
  position: relative; /* Diperlukan untuk memposisikan teks cutout di tengah gambar */
  height: 300px; /* tingginya */
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Ukuran font responsif */
  font-weight: bold;
  margin: 0 auto; /* Pusatkan container teks */
  padding: 10px;
  width: 50%;
  text-align: center; /* teks di tengah */
  position: absolute; /* Posisi teks */
  top: 50%; /* posisi teks di tengah */
  left: 50%; /* posisi teks di tengah */
  transform: translate(-50%, -50%); /* posisi teks di tengah */
  mix-blend-mode: screen; /* Ini memungkinkan untuk cutout */
}

Jika menginginkan teks container hitam, ubah mode campuran campuran menjadi “multiply” dan warna latar belakang menjadi hitam, dan warna putih:
Contoh

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.image-container {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: black;
  color: white;
  font-size: 5vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}
</style>
</head>
<body>

<h2>Contoh Efek Cutout Yang Responsif</h2>

<div class="image-container">
  <div class="text">Gunung Fuji Jepang</div>
</div>

<p> Contoh ini membuat teks cutout / teks knockout yang responsif - teks yang tampak terpotong di atas gambar latar. </p>
<p> Ubah ukuran jendela browser untuk melihat efek responsif. </p>
<p> <strong> Catatan: </strong> Contoh ini tidak berfungsi di Internet Explorer atau Edge. </p>

</body>
</html>