CSS3 Image-less Login Box

Login form adalah elemen yang wajib ada dalam sebuah website komunitas. Kali ini saya ingin berbagi kode untuk desain login-form yang simple menggunakan CSS3 dan sebuah atribut pada HTML5 yaitu ‘placeholder’ yang sangat berguna untuk mempercantik form dengan mudah.

Untuk mengatur style placeholder (teks dalam input form sebelum di klik) tersebut, kita bisa menggunakan pseudo-class yang sampai saat ini baru saya temukan bekerja pada webkit browser seperti Chrome dan Safari.

input::-webkit-input-placeholder {font-style:italic; color:#666;}

Selain itu pada CSS3 shadow normal maupun inset terdapat pada ‘variabel’ yang sama, yaitu ‘box-shadow’. Namun bukan berarti kita tidak dapat menggunakan keduanya secara bersamaan. Kita dapat ‘memasang’ keduanya dengan menggunakan koma sebagai pembatasnya. Lebih jelasnya bisa dilihat contoh di bawah ini:

-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.2);

Tentunya login-form ini masih jauh dari sempurna kalau saya kerjakan sendiri. Kalau anda punya cara yang lebih baik terlebih untuk atribut ‘placeholder’ yang dapat bekerja di semua browser, jangan sungkan untuk berkomentar :]

Oh ya, untuk yang ingin lihat file PSDnya, bisa diunduh secara gratis di PixelBeam.