Cara Membuat Animasi Teks Bayangan dengan CSS3

Hai, jumpa lagi dengan saya 🙂 , Pada artikel kali ini saya akan bagikan tutorial sederhana tentang bagaimana Cara Membuat Animasi Teks Bayangan dengan CSS3, Nah buat kalian yang suka membuat teks bayangan tidak ada salah nya untuk memberikan sedikit efek animasi seperti berikut.

Kalian bisa ikuti langkah berikut ini untuk memberikan efek animasi bayangan pada teks. Pertama kalian harus buat satu buah kalimat bebas untuk teks bayangan dengan kode HTML berikut.

<body>
	<section>
		<h1 class="extruded">Halo Dunia</h1>
	</section>
</body>

Setelah kita membuat teks nya, selanjutnya kita akan desain teks tersebut dengan kode CSS3 untuk membuat efek animasi bayangan.

body {
    background: #222;
    padding: 1em;
	color: #fff;
}
h1{
  font-family: serif;
  font-size: 4em;
  text-align: center;
}

.extruded{
color: #888;
  position: relative;
  color: #FFF;
  text-shadow: cyan 1px 1px,
                cyan 2px 2px,
                cyan 3px 3px,
                cyan 4px 4px,
                cyan 5px 5px,
                cyan 6px 6px;
  left: -6px;
  top: -6px;
  transition: text-shadow 1s, color 1s;
}
.extruded:hover{
  text-shadow: #fff 1px 1px;
  color: #aaa;
}

Setelah semua kode diatas diketikan, simpan terlebih dahulu, kemudian jalankan pada browser masing-masing dan lihat hasilnya. Maka ketika kalian arahkan kursor ke arah teks maka akan terjadi perubahan bayangan. Selesai

Baik itulah tutorial sederhana mengenai bagaimana Cara Membuat Animasi Teks Bayangan dengan CSS3, semoga bermanfaat. 🙂