Cara Membuat Text Dengan Background gif
Hallo teman-teman, berjumpa lagi dengan saya di panduan Source Code Aplikasi. Di artikel kali ini saya akan memberikan tips dan trik mengenai Cara Membuat Text Dengan Background gif, dimana text yang akan kita bikin mempunyai background dengan extensi gif yaitu gambar bergerak. Selaku contoh yang akan kita bikin ialah 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 ialah demo yang akan nanti kita bikin
Bagus sekarang ini kita akan seketika mempraktekkan Cara Membuat Text Dengan Background gif, seperti lazimnya teman-teman siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<title> Cara Merancang 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 di browsernya. Karenanya browser akan tampil seperti gambar di bawah ini
Seperti yang kalian lihat di gambar di atas ini, ialah hasil script yang kita telah bikin. Langkah berikutnya kita akan sedikit merubah dengan menambah kan ( -webkit-background-clip: text;
dan -webkit-text-fill-color: transparent;) bagi menyembunyikan background dan terlihat hanya text nya saja yang mempunyai background gif, silahkan teman-teman tambahkan di css nya. Jikalau telah save dan refresh di browsernya, karenanya hasilnya sesuai demo gambar di atas.
Gampang sekali bukan, oke sekianlah dulu di panduan kali ini mengenai Cara Membuat Text Dengan Background gif. Kita berjumpa lagi di artikel berikutnya, semoga bermanfaat.
Terima Kasih dan Hingga Jumpa 🙂
Sumber https://kursuswebsite.org
