CSS : Membuat Form Komentar Minimalis

form simple

Haaahhh…
Akhirnya saya bisa desain tampilan web menggunakan CSS 😀
sudah lama saya ngambek dengan CSS karena awalnya kesulitan memahami cara kerja CSS
Benar kata pepatah, “Bisa karena biasa” hehee

Oke jadi langsung saja ya
Pada tulisan ini saya ingin mengajak teman-teman semua untuk mendesain sebuah form komentar yang memiliki tampilan minimalis tetapi enak dipandang.

Buat dahulu kerangka HTML-nya

Tengok hasilnya pada browser

1

Tambahkan CSS styling untuk form pada bagian head sebagai berikut

preview hasil pada borwser

2

Bikin styling untuk element input dan textarea biar terlihat ciamik

Tilik lagi hasilnya

3

Setelah itu tambahkan juga styling ketika elemnt input dan textarea dalam kondisi focus, serta kita atur lebar dari textarea

Berikut preview hasilnya

4

Terakhir adalah mencantikkan tombol komentar pada saat kondisi normal sekaligus pada saat kondisi kursor berada pada atas tombol

Daaaan
seperti inilah hasil akhir dari karya kita bersama heuheuheu… 😀

5

DEMO dapat dilihat dilink dibawah ini yaa
DEMO

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

8 thoughts on “CSS : Membuat Form Komentar Minimalis

Leave a Reply

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