Cara Membuat Efek Bayangan ke dalam Teks dengan CSS3

Hallo, Kali ini saya akan share panduan mengenai bagaimana Cara Membangun Efek Bayangan ke pada Teks dengan CSS3, seperti judul diatas kita akan kreasi sebuah teks dengan memberika efek bayangan nya menjorok ke pada teks. Penasarn seperti apa, simak langkah-langkahnya berikut ini.

Langkah pertama-tama bagi membangun teks bayangan, kita mesti membangun struktur kode HTML seperti berikut.

<div class=teks>
Kreasi Teks Bayangan
</div>

Bagi teks nya silahkan kalian isikan bebas, kalian pun dapat menambahkan jenis font dari google seperti berikut.

<link href=https://fonts.googleapis.com/css?family=Berkshire+Swash rel=stylesheet>

Setelah itu, langkah berikutnya yakni 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 telah segala kode HTML dan CSS diketikan segala, langkah terakhir yakni simpan terlebih dahulu kemudian coba buka dibrowser masing-masing dan lihat hasilnya. Selesai

Bagaiman, lumayan gampang bukan ? Bagus demikian panduan mengenai bagaimana Cara Membangun Efek Bayangan ke pada Teks dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

DEMO

Sumber https://kursuswebsite.org