Hai, Kali ini saya akan bagikan tutorial mengenai bagaimana Cara Membuat Efek Bayangan ke dalam Teks dengan CSS3, seperti judul diatas kita akan kreasi sebuah teks dengan memberika efek bayangan nya menjorok ke dalam teks. Penasarn seperti apa, simak langkah-langkahnya berikut ini.
Langkah pertama untuk membuat teks bayangan, kita harus membuat struktur kode HTML seperti berikut.
<div class="teks"> Kreasi Teks Bayangan </div>
Untuk teks nya silahkan kalian isikan bebas, kalian juga bisa menambahkan jenis font dari google seperti berikut.
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
Setelah itu, langkah selanjutnya adalah kita akan desain teks tersebut menjadi teks bayangan dengan kode CSS3 berikut.
body{
background-color:#ecf0f1;
}
.teks {
font-size:100px;
text-align:center;
background-color: #465678;
color: transparent;
text-shadow: 0px 8px 6px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
font-family: 'Berkshire Swash', cursive;
}
Nah, Kalau sudah semua kode HTML dan CSS diketikan semua, langkah terakhir adalah simpan terlebih dahulu kemudian coba buka dibrowser masing-masing dan lihat hasilnya. Selesai
Bagaiman, cukup mudah bukan ? Baik sekian tutorial mengenai bagaimana Cara Membuat Efek Bayangan ke dalam Teks dengan CSS3, semoga bermanfaat, amin.
Selamat mencoba 🙂