Cara Membuat Efek Blend Mode pada Teks

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 :)

9 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat