Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3

Labkom99.com – Membuat efek gelombang pada teks menggunakan clip-path HTML dan CSS3. Pada dasarnya CSS3 memiliki banyak efek gelombang yang dinamis dan mudah digunakan. Karena CSS3 memiliki efek transisi dan animasi. Dengan menggunakan clip-path pada CSS3 animasi gelombang bisa dibuat dengan cepat hanya dengan beberapa baris CSS saja. Tentunya hal ini lebih sederhana untuk diterapkan daripada membuat file flash biasa.  

Apa Itu Clip-Path

Secara singkatnya clip-path adalah jalur pemotongan yang menggunakan SVG atau bentuk lain untuk menentukan area elemen HTML yang terlihat. Atribut clip-path dapat mencegah beberapa elemen ditampilkan melalui area kliping yang ditentukan dan hanya melalui area khusus yang ditampilkan.

Hanya saja clip-path saat ini memiliki kompatibilitas yang kurang mumpuni dalam penyesuaian di browser. IE serta Edge tidak mendukungnya secara langsung. Bisa menggunakan browser Google Chrome dan Firefox untuk melihat efek yang dihasilkan.  

Nah berikutnya labkom99 akan mencoba membuat efek gelombang pada teks menggunakan clip-path HTML dan CSS3. Dan hasilnya kira-kira seperti pada gambar dibawah ini:  

Untuk membuatnya labkom99 hanya menggunakan notepad menulis kode. berikut kode clip-path yang digunakan :

@keyframes meh {
    from {
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 61% 91%, 94% 47%);
    }
    50% {
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 59% 52%, 74% 13%);
    }
    to {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 85%, 87% 41%);
    }
}

Pada bagian clip-path tersebut difungsikan untuk membuat polygon dan efek gelombang yang akan dikombisikan pada tesk. 

Content HTML dan CSS3 lain yang dapat anda pelajari :    

• Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3
• Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan
• Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
• Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3
• Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS
• Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG
• Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
• Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
• Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3

Kode CSS

.panel {
    overflow: auto;
    width: 100%;
    height: 100vh;
    position: relative;
    background: radial-gradient(circle, #0e0e0e 15%, #010101);
}

Kode CSS diatas difungsikan untuk mebuat background pada halaman yang akan ditampilkan.  

.wow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 10vmin;
    color: #fff;
    line-height: .85;
    text-transform: uppercase;
    background-size: contain;
    -webkit-text-fill-color: rgb(223 236 17 / 10%);
    -webkit-background-clip: text;
    z-index: 10;
}
.wow:before {
    content: 'www.labkom99.com';
    display: table;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5vmin;
    color: white;
    -webkit-text-fill-color: white;
    -webkit-background-clip: none;
    background-color: #04671e; 
    padding: 3px;
}
.wow + .wow {
    -webkit-text-fill-color: #045814; 
    z-index: 20;
    animation: meh 3s ease-out infinite alternate;
}

Untuk CSS diatas difungsikan untuk mendesain teks tulisan warna yang akan ditampilkan.   

Kode HTML

<div class="panel">
    <h1 class="wow">
        <span>LABKOM99</span> 
        <span>BELAJAR HTML</span>
    </h1>
    <h1 class="wow">
        <span>LABKOM99</span> 
        <span>BELAJAR HTML</span>
    </h1>
</div>

Kenapa menggunkan <h1 class=”wow”> double ? Karena efek gelombang yang akan dibuat juga menghasilkan warna yang berbeda dalam dua teks. Sehingga sekilas terlihat seperti pantulan ketikan gelombang datang. Untuk edit warna terletak pada CSS .wow {  

Agar tidak begitu penasaran mari kita lihat Demo Membuat efek gelombang pada teks menggunakan clip-path HTML dan CSS3