Cara Membuat Text Dengan Background gif dan langkahnya

Hallo teman-teman, berjumpa lagi dengan saya pada tutorial Dumet School. Di artikel kali ini saya akan memberikan tips dan trik tentang Cara Membuat Text Dengan Background gif, dimana text yang akan kita buat memiliki background dengan extensi gif yaitu gambar bergerak. Sebagai contoh yang akan kita buat adalah sebuah text (“H a p p y B i r t d a y 2 3 S e p t e m b e r 2 0 1 7“) yang mempunyai background dengan extensi gif/gambar bergerak, gambar di bawah ini adalah demo yang akan nanti kita buat

Baik sekarang kita akan langsung mempraktekkan Cara Membuat Text Dengan Background gif, seperti biasa teman-teman siapkan text editornya dan copy script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title> Cara Membuat Text Dengan Background gif</title>
</head>
<body>
  <h1 class="wrapper">
    <span class="clip-text">H a p p y</span>
    <span class="clip-text">B i r t h d a y</span>
    <span class="clip-text clip-text-emoji"></span>
    <span class="clip-text">2 3</span>
    <span class="clip-text">S e p t e m b e r</span>
    <span class="clip-text">2 0 1 7</span>
  </h1>
</div>
</body>
</html>

Dan teman-teman siapkan terlebih dahulu gambar gif nya, kemudian kita akan panggil dengan css nya

<style type="text/css">
		body {
  background: #eee;
}
.wrapper {
  font-family: 'VT323', monospace;
  font-size: 67px;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 0;
  position: relative;
}
.clip-text {
  display: block;
  background-image: url(tumblr_o08ho7s8fK1qlqo4ro1_500.gif);
}
.clip-text-emoji {
  font-size: 50%;
  line-height: 120%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.clip-text-emoji:after {
  content: "";
  animation: faces 2s infinite;
}
@keyframes faces {
  0% {
    content: "( ͡° ͜ʖ ͡°)";
  }
  20% {
    content: "(◕‿◕✿)";
  }
  40% {
    content: "˙ ͜ʟ˙";
  }
  60% {
    content: "ᕙ(⇀‸↼‶)ᕗ";
  }
  80% {
    content: "☼.☼";
  }
  100% {
    content: "( ͡° ͜ʖ ͡°)";
  }
}
</style>

Tambahkan css nya di atas ini, kemudian save dengan nama index.html dan jalankan pada browsernya. Maka browser akan tampil seperti gambar di bawah ini

Seperti yang kalian lihat pada gambar di atas ini, adalah hasil script yang kita sudah buat. Langkah berikutnya kita akan sedikit merubah dengan menambah kan ( -webkit-background-clip: text;
dan -webkit-text-fill-color: transparent;) untuk menyembunyikan background dan terlihat hanya text nya saja yang mempunyai background gif, silahkan teman-teman tambahkan pada css nya. Jika sudah save dan refresh pada browsernya, maka hasilnya sesuai demo gambar di atas.

Mudah sekali bukan, oke sekian dulu pada tutorial kali ini tentang Cara Membuat Text Dengan Background gif. Kita berjumpa lagi di artikel berikutnya, semoga bermanfaat.

Terima Kasih dan Sampai Jumpa 🙂

Cara Membuat Text Dengan Background gif

Kategori