Membuat Kliping Teks Menggunakan Background-Clip

Halo, Ketemu lagi dengan saya :), apa kabar nya ? Semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial lagi nih, kali ini saya akan menjelaskan Cara Membuat Kliping Teks Menggunakan Background-Clip, Nah kira-kira ada yang tau gak kliping teks itu apa ? daripada bingung dan penasaran apa dan bagaimana bentuk kliping teks itu seperti apa langsung saja yuk kita buat. Silahkan simak langkah-langkah berikut.

1. Siapkan dulu satu buah gambar background apa saja.

2. Kalo sudah sekarang buka teks editornya, kemudian ketikan kode HTML berikut:

<h1 class="bgClip">Kliping Teks</h1>

3. Setelah itu ketikan lagi untuk kode CSS berikut:

.bgClip {
    background:url('http://media.mnn.com/assets/images/2014/10/cloud-quiz.jpg.500x0_q80_crop-smart_upscale-true.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;
      -webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<     from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

4. Pada bagian background: url silahkan isikan gambar yang sudah disiapkan tadi.

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

Cukup mudah yah ? Nah itulah bentuk dari kliping teks, bagus kan 🙂

Baik sampai disini tutorial mengenai Membuat Kliping Teks Menggunakan Background-Clip, Semoga bermanfaat, amin

Selamat Mencoba 🙂

Demo