Membuat Animasi Teks Bayangan (Text-Shadow) Dengan HTML-CSS3

Hai, jumpa lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.

Pada artikel kali ini saya akan menjelaskan bagaimana cara Membuat Animasi Teks Bayangan (Text-Shadow) Dengan HTML-CSS3, seperti apa cara membuat nya, yuk simak langkah nya berikut ini.

1. Silahkan buka teks editor nya terlebih dahulu, kemudian ketikan kode HTML berikut.

<h1 data-shadow='Dumetschool'>Dumetschool</h1>

2. Selanjutnya ketikan kode CSS3 berikut ini untuk animasi bayangan teks.

@import url(http://fonts.googleapis.com/css?family=Righteous);

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

html, body {
  height: 100%;
  }
  body {
    text-align: center;
    background-color: hsla(213, 100%, 50%, 1);
    }
  body:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    height: 100%;
    }

h1 {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 12em; 
  text-shadow: .03em .03em 0 hsla(28, 100%, 50%, 1);
  }
  h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: .06em; left: .06em;
    z-index: -1;
    text-shadow: none;
    background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
    animation: shad-anim 15s linear infinite;
    }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }

3. Kalo sudah jangan lupa disimpan, kemudian jalankan di browsernya masing-masing dan lihat hasilnya. Selesai

Bagus yah ? silahkan kembangkan lagi.

sampai disini artikel mengenai bagaimana cara Membuat Animasi Teks Bayangan (Text-Shadow) Dengan HTML-CSS3, semoga bermanfaat, amin.

Selamat mencoba.

DEMO