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.
<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.
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.
Baik, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Efek Blend Mode pada Teks, semoga bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
