Cara Menambah Layer Warna pada Teks

21/01/2020    Risman Hakim    129     Website

Cara Menambah Layer Warna pada Teks - Dengan CSS, ada banyak hal yang bisa kita lakukan. Selain mengatur tata letak, jarak, berbagai macam efek dan animasi juga bisa kita buat dengan CSS. Seperti tutorial efek CSS berikut yang akan saya bagikan yaitu bagaimana Cara Menambah Layer Warna pada Teks. Dimana akan ada efek warna yang bertumpuk seperti tumpukan layer. Nah, seperti apa cara membuatnya? Yuk, ikuti langkah-langkahnya berikut ini.

Untuk membuat tumpukan layer warna pada kasus ini, saya akan terapkan pada elemen teks. Atau kalian juga bisa menerapkan pada elemen lain, seperti gambar. Silahkan kalian bisa ketikan sintak HTML untuk membuat elemen teks seperti berikut.

<body>
    <h1>Aladdin.</h1>
</body>

Setelah menentukan elemen yang akan diterapkan layer warna, langkah selanjutnya adalah memberikan desain warna yang bertumpuk pada elemen teksnya. Untuk membuat layer warna kita akan memanfaatkan properti text-shadow nilai propertinya lebih dari satu untuk menentukan warna dan shadow-nya. Silahkan, kalian bisa ketikan sintak CSS seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash&display=swap');
body {
    background-color: #017e7f;
}
h1 {
    font-size: 8rem;
    text-align: center;
    height:70vh;
    color: #F3F2DE;
    line-height: 70vh;
    font-family: 'Berkshire Swash', cursive;
    font-weight: 700;
    text-shadow: 5px 5px 0px #eb452b,
                 10px 10px 0px #efa032,
                 15px 15px 0px #46b59b,
                 20px 20px 0px #017e7f,
                 25px 25px 0px #052939,
                 30px 30px 0px #c11a2b;
}

Dari sintak CSS di atas, bisa kita lihat bahwa ada banyak nilai dan kode warna yang berbeda. Dan itulah yang menentukan layer warna pada elemen teksnya.

Jika sudah selesai semua sintak HTML & CSS diketikkan, silahkan simpan file-nya. Lalu, kalian bisa melihat hasilnya pada browser masing-masing. Maka hasilnya akan terlihat seperti berikut.

Cara Menambah Layer Warna pada Teks

Bagaimana? Menarik bukan? Baiklah, saya cukupkan tutorial CSS sederhana tentang Cara Menambah Layer Warna pada Teks. Semoga tutorial ini bermanfaat, selamat mencoba dan sampai jumpa di tutorial selanjutnya.

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