Labkom99.comMembuat 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:

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

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%);
    }
}

.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



LABKOM99
BELAJAR HTML

LABKOM99
BELAJAR HTML




<html>
<head>
<title> Labkom99.com - Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3 </title>
<style>
* {
    font-family: 'Microsoft Yahei', sans-serif;
}
.panel {
    overflow: auto;
    width: 100%;
    height: 100vh;
    position: relative;
    background: radial-gradient(circle, #0e0e0e 15%, #010101);
}
.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-image: url(/uploads/161001/lighten2.jpg);
    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;
}
@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%);
    }
}
.jj span {
    display: block;
}
body {
    margin: 0;
}
</style>
    <body>
    <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>
    </body>
</head>
</html>


Selamat Mencoba....!!!!!

Komentar