irvan komputer: css

Thursday, April 25, 2013

membuat form login dengan css

Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form pendaftaran yang pasti isiannya cukup merepotkan. Sekarang saya akan berbagi tentang cara membuat form login dengan css.
Banyak variasi form login css yang bisa kita buat, baik nanti beda warna, posisi maupun ataupun gambar latarnya. Langkah pertama adalah membuat susunan kode form html ditempatkan dibagian dalam <body>...</body>, lihat kode berikut :

<div id="form-login">
<form id="FLogin" name="FLogin" method="post" action="">
<h1>Login Member</h1>
  <label>Username </label> : <input name="username" type="text" id="username"

size="20" maxlength="20" class="txt" /><br />
  <label>Password </label> : <input name="password" type="password" id="password"

size="20" maxlength="20" class="txt" />
  <div id="tombol"><input name="btnLogin" type="submit" value="Login"

class="button" /><input name="btnLogin" type="reset" value="Reset"

 class="button" /></div>
</form>
</div>

Tuesday, April 9, 2013

Tutorial CSS Mengatur Transparansi

Dengan menggunakan properti CSS kita bisa mengatur transparansi suatu objek atau elemen HTML, seperti gambar, tulisan dan lainnya.
Untuk mengatur transpransi di IE kita menggunakan kode CSS: filter:alpha(opacity=x), sedangkan di Firefox, kita menggunakan kode CSS: opacity:x.
Di Firefox (opacity:x) x bisa bernilai 0.0 - 1.0. Semakin kecil semakin transparan.
Di IE (filter:alpha(opacity=x)) x bisa bernilai 0 - 100. Semakin kecil semakin transparan. Di IE, supaya trasparansi bisa berjalan objek harus memiliki dimensi seperti panjang(width) dan lebar

Sekarang mari kita lihat contoh-contohnya:
Contoh kode CSS di atas adalah:

<div style="width:450;height:243;background-image:url('gambar/pemandangan.jpg');
border:#ababab 1px solid;">
<p>&nbsp;</p>
<h2 style="opacity:0.5;filter:alpha(opacity=50);width:100%;font-size:40pt">
Ini Tulisan Transparan
</h2>
</div>

Sekarang kita lihat contoh lainnya, di mana kita me set transparansi suatu gambar: