card-front

Terinspirasi dari desain user interface yang dibuat oleh Ramakhrisna, saya tertantang untuk membuat form pengisian kartu kredit. Form ini bisa digunakan untuk web ecommerce.

Struktur HTML

Pertama kita akan menentukan struktur html terlebih dahulu, dimana akan ada 2 (dua) gambar mockup kartu kredit yang dijadikan elemen untuk background.

CSS Style

 

Pertama saya akan menjelaskan mengenai alur yang akan kita buat, pada saat user memasukkan form input maka text atau nomor yang tertera pada gambar kartu kredit akan berubah. Dan akan ada rotasi gambar menggunakan css properti transform dan perspective 3d yang membuat gambar kartu kredit berputar bolak balik baik pada saat hover atau pada saat input field berada pada focus tertentu lihat class flip pada class card, terdapat properti transform Rotate.

Jquery Script

 

Okay pada part jquery kita akan menggunakan event keyup dan keypress pada field input, event ini digunakan untuk mengambil value pada saat user mengetik tombol pada keyboard, kemudian value tersebut kita taruh di label yang terdapat pada gambar kartu kredit.

See the Pen Checkout Credit Card by Lufti Nurfahmi (@luftinur) on CodePen.0

 

Comments