Hai, jumpa kembali dengan saya 🙂 , di tutorial kali ini saya akan kasih tau bagaimana Cara Membuat Teks Stroke dengan Efek Bayangan, bicara tentang efek bayangan pada teks pasti sudah biasa, namun dengan kecanggihan teknologi CSS3 ini kita bisa membuat berbagai macam bentuk teks salah satunya teks stroke, Nah seperti apa cara membuatnya ? berikut ini langkah-langkahnya.
Seperti biasa, kita akan buat dulu satu buah kalimat untuk teks nya dengan kode HTML berikut.
<body>
<h1 class="picadilly">
DUMET SCHOOL
</h1>
</body>
Untuk teks nya bisa kalian sesuaikan, setelah itu kita akan membuat desain teks stroke dengan efek bayangan dengan kode CSS3 berikut.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.picadilly {
position: relative;
color: #fff;
font-weight: 100 !important;
font-size: 150px;
-webkit-text-stroke: 7px #2962FF;
letter-spacing: 15px;
-webkit-filter: drop-shadow(9px 11px 0 #FD3A58);
width: 1000px;
text-align: center;
line-height: 1.2;
margin: 4rem auto;
z-index: 2;
}
Setelah kode diatas sudah diketikan semua, simpan terlebih dahulu, kemudian coba buka di browser masing-masing dan lihat hasilnya.
Baik, itulah tutorial sederhana tentang Cara Membuat Teks Stroke dengan Efek Bayangan, semoga bermanfaat, amin.
Selamat mencoba 🙂