Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan

  • Whatsapp
Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan

Labkom99.com – Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan Ini adalah efek khusus animasi gambar dengan latar belakang css klip GIF. Efek khusus ini menggunakan teknologi klip latar belakang css untuk memotong gambar gif menjadi efek teks yang sangat keren.

Efek tulisan pada animasi ini menghasilkan tulisan dengan efek bunga -bunga yang indah. Efek bung tersesbut muncul kedalam setiap huruf pada teks. Sehingga menghasilkan kesan dan nuansa romantis yang cantik pada tulisan.

Read More



Alat / Bahan Baku
Notepad

Perhatian 

Untuk membuat animasi cantik pada tulisan pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Pada bagian ini sangat penting bagi pemula yang ingin belajar HTML untuk memahami dasar dasar html tersebut. Jika dasar dasar html sudah kalian kuasai maka kalian akan mudah untuk membuat kode kode html lainya. Namun bagi yang sudah sudah mengerti tinggal skip aja di part ini.


Metode / Langkah

Dalam membuat sebuah struktur html tentunnya dimulai dengan html pembuka <html> dan html penutup </html>. Namun pada labkom99 yakin kalian semua sudah paham tentang hal itu. Bagi yang belum paham silahkan pelajari dasar dasar html seperti pada sub PERHATIAN.

Seperti yang ditunjukkan pada source code di bawah ini, pada posisi body pada umumnya berasal dari perintah div seperti pada script html di bawah ini :

 <body>
        <div class= "wrapper">
            <div class= "text" data-text= "Labkom99">Labkom99</div>
        </div>
</body>

Dan untuk mempercantik desain gunakan CSS  seperti dibawah ini :

Baca Juga :

 .wrapper{
          background: #59284e;
          height: 97vh;
          border-radius: 5px;
          position: relative;
        }
        .text{
          flex: 0 0 100%;
          font-size: 14rem;
          font-weight: 900;
          color: #00000000;
          text-align: center;
          font-family: ‘Lato’, sans-serif;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-bottom: 1px solid #d4d7ff;
          border-top: 1px solid #d4d7ff;
          background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
          background-clip: text;
          -webkit-background-clip: text;
        }
         .text:after{
           content: attr(data-text);
           -webkit-text-stroke: 1.5px #d4d7ff;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -49%);
           background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
           background-clip: text;
           -webkit-background-clip: text;
           background-size: 43%;

        }

Demo Hasil dari Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan Sebagai Berikut Ini

DEMO ————– Labkom99———–Donwload

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *