Pada kesempatan kali ini,saya akan berbagi ilmu bagaimana membuat sebuah "rounded textfield".Mungkin tidak semua tahu apa itu "Rounded Textfield".Kalau saya menyebutnya textfield melengkung. :-)
OK,langsung saja yah...
Pertama siapkan file HTML seperti di bawah ini :
<html>
<head>
<title>Coba</title>
<body>
<input type="text" class="text" />
</body>
</html>
<head>
<title>Coba</title>
<style type="text/css">
.text{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:1px solid #000;
background: #fff;
padding-left:5px;
}
.text:focus{
background: #fff;
}
</style>
</head>.text{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:1px solid #000;
background: #fff;
padding-left:5px;
}
.text:focus{
background: #fff;
}
</style>
<body>
<input type="text" class="text" />
</body>
</html>
Simpan kedua di atas dengan ekstensi .html
Jalankan file tersebut,Anda akan melihat perbedaan textfield yang satu ini dengan yang lainnya.
Coba lihat perbedaan textfield di bawah ini :
TextField standart:
Rounded TextField
Nah sekarang penjelasan kode CSSnya...
-moz-border-radius: 3px; : Ini adalah property yang digunakan untuk membuat rounded cornernya (pojokannya melengkung).
-moz- disini,maksudnya adalah perintah ini akan dieksekusi oleh browser mozilla.-webkit-border-radius: 3px; : Nah,yang membedakan kode ini dengan yang di atasnya adalah
-webkit-.Kode -webkit- ditujukan untuk browser selain mozilla,misalnya safari dll.border:1px solid #000; : Kode ini untuk menampilkan border dari textfield tersebut.
1px digunakan untuk ketebalan border tersebut.solid digunakan untuk style border tersebut.#000 untuk mendefinisikan warna dari border tersebut..text:focus{
background: #f2f2f2;
}
Penggalan kode di atas,merupakan beberapa efek saat cursor berada pada textfield (focus),background berubah warna.
Nah,sekian dulu tentang CSSnya.Tunggu postingan selanjutnya.
Jangan lupa komentar dan kritiknya ya...
SELAMAT MENCOBA..!
0 comments:
Post a Comment