Cara Membuat Animasi Label Input

Cara Membuat Animasi Label Input - Satu animasi yang akan saya bagikan berikut ini adalah animasi label pada input. Buat teman - teman yang ingin mencoba membuat animasi sederhana pada inputan bisa mengikuti langkah - langkah yang saya berikan.

Pada kasus animasi label input ini, saya akan membuat animasinya dengan CSS dengan memanfaatkan properti - properti yang disediakan CSS tentunya, dimana animasi akan dibuat dengan transisi. Baiklah langsung saja kita akan buat bagaimana Cara Membuat Animasi Label Input.

Silahkan kalian buat satu file index.html kemudian ketikan sintak HTML sebagai struktur sederhana dan membuat inputan yang akan dikenai animasi label.

<body>
    <form>
        <input id="input" type="text" required="">
        <label id="label" placeholder="Your Email"></label>
    </form>
</body>

Setelah membuat elemen inputan dan label seperti diatas, langkah selanjutnya adalah membuat animasi pada inputannya. Silahkan ketikan sintak CSS berikut.

<style>
    #input {
        box-sizing: border-box;
        width: 20%;
        height: calc(4em + 1px);
        margin: 0 0 1em;
        padding: 1em;
        border: 1px solid #ccc;
        background: #fff;
        resize: none;
        outline: none;
    }
    #input[required]:focus {
        border-color: #00bafa;
    }
    #input[required]:focus + #label:before {
        color: #00bafa;
    }
    #input[required]:focus + #label:before,
    #input[required]:valid + #label:before {
        transition-duration: .2s;
        transform: translate(0, -1.5em) scale(0.9, 0.9);
    }
    #input[required]:invalid + #label[alt]:before {
        content: attr(alt);
    }
    #input[required] + #label {
        display: block;
        pointer-events: none;
        line-height: 1em;
        margin-top: calc(-3em - 2px);
        margin-bottom: calc((3em - 1em) + 2px);
    }
    #input[required] + #label:before {
        content: attr(placeholder);
        display: inline-block;
        margin: 0 calc(1em + 2px);
        padding: 0 2px;
        color: #898989;
        white-space: nowrap;
        transition: 0.3s ease-in-out;
        background-image: linear-gradient(to bottom, #fff, #fff);
        background-size: 100% 5px;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

Setelah mengetikan semua sintak HTML dan CSS, silahkan simpan filenya kemudian kalian bisa melihat hasil akhirnya pada browser masing - masing, dan lihat apakah animasi label pada input yang kalian buat berhasil atau tidak.
Baiklah, cukup sekian tutorial bagaimana Cara Membuat Animasi Label Input, semoga tutorial animasi ini bermanfaat selamat mencoba dan sampai jumpa ditutorial DUMET School selanjutnya.

18 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat