Cara Membuat Efek Blend Mode pada Teks

09/07/2019    Risman Hakim    202     Website

Cara Membuat Efek Blend Mode pada Teks - Blend mode merupakan suatu cara untuk menggabungkan beberapa warna ke dalam suatu elemen, misalnya pada gambar atau pada teks. Didalam CSS terdapat propert yang bisa kita manfaatkan untuk membuat efek blend mode pada elemen yaitu mix-blend-mode. Nah, berikut ini saya akan bagikan tutorial sederhana tentang efek blend mode yaitu bagaiamana Cara Membuat Efek Blend Mode pada Teks.

Pada kasus yang akan saya buat kali ini adalah menambahkan beberapa warna kedalam suatu elemen teks. Nah, kalian bisa bisa membuat terlebih dahulu kode HTML untuk elemen teks nya.

<body>
    <h1 data-text="DUMET School.">DUMET School.</h1>
</body>

Setelah membuat elemen teks seperti diatas, selanjutnya adalah mendesain dan menambahkan efek blend mode dengan kode CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');
body {
  display: flex;
  background: #f7f1e3;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
h1 {
  position: relative;
  font: 700 120px/1 'Acme', sans-serif;
  color: #16a085;
  mix-blend-mode: normal;
  white-space: nowrap;
}
h1::before,
h1::after {
  position: absolute;
  top: 3px;
  content: attr(data-text);
  mix-blend-mode: normal;
}
h1::before {
  left: -3px;
  color: #f1c40f;
}
h1::after {
  left: 3px;
  color: #2c3e50;
}

Pada bagian properti CSS mix-blend-mode kalian bisa mencoba nilai lain yang tersedia untuk melihat perbedaan efek blend mode pada teks nya. Setelah semua telah selesai silahkan simpan filenya kemudian kalian bisa melihat hasil nya di browser masing - masing. Maka akan terlihat seperti berikut.

Cara Membuat Efek Blend Mode pada Teks

Baik, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Efek Blend Mode pada Teks, semoga bermanfaat dan selamat mencoba :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More