Membuat Form Responsive HTML5 & CSS3

Hallo teman-teman kali ini kita akan membuat sebuah form responsive dengan menggunakan HTML5 dan CSS3. Pada tutorial sebelumnya kita sudah membahas tentang bagaiman membuat sebuah website menjadi responsive dengan menggunakan media queries. Hal serupa akan kita terapkan pada tutorial ini. Yang berbeda adalah form ini akan memiliki efek CSS3 transition dan opacity.

Teman-teman bisa pelajari kode HTML dan CSS dibawah ini :

See the Pen aKEtw by Rully Febrian (@rully) on CodePen.

Teman-teman bisa berkreasi sendiri untuk mengubah warna dan background image sesuai keinginan. Coba perhatikan media queries @media only screen and (max-width: 580px) mendefinisikan fungsi akan berjalan ketika ukuran layar lebih kecil dari 580px. Teman-teman bisa menambahkan fungsi media queries lainnya. Adapun ukuran standard Media queries dapat teman-teman download DISINI.

Demikian Tutorial ini semoga menambah ilmu kita semua dan sampai bertemu di tutorial berikutnya. Terimakasih dan Selamat Mencoba.

DOWNLOAD