Cara Membuat Teks Stroke dengan Efek Bayangan
Halo, jumpa kembali dengan saya 🙂 , di panduan kali ini saya akan kasih tau bagaimana Cara Merancang Teks Stroke dengan Efek Bayangan, bicara mengenai efek bayangan di teks pasti telah lazim, namun dengan kecanggihan teknologi CSS3 ini kita dapat membangun beraneka macam format teks salah satunya teks stroke, Nah seperti apa cara membuatnya ? berikut ini langkah-langkahnya.
Seperti lazim, kita akan bikin dulu satu buah kalimat bagi teks nya dengan kode HTML berikut.
<body>
<h1 class=picadilly>
Source Code Aplikasi
</h1>
</body>
Bagi teks nya dapat kalian sesuaikan, setelah itu kita akan membangun 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 telah diketikan segala, simpan terlebih dahulu, kemudian coba buka di browser masing-masing dan lihat hasilnya.
Bagus, begitulah panduan sederhana mengenai Cara Merancang Teks Stroke dengan Efek Bayangan, semoga bermanfaat, amin.
Selamat mencoba 🙂
Sumber https://kursuswebsite.org
