helo brother !!
To have a most beautifull form for your blog / website, so easy. I just create a style that compatible for IE and FF.
Take a look my CSS
First, open your photoshop to create a
Design Form Smooth Shadow [dr.emi]
mao ngobok-obok form lu, biar cantik and cakep ? nih gw ada tutorrial CSS form yang keren banged, kali ja bisa jadi inspirasi lu ..
Dengan Photoshop siapkan dlu untuk Background field na, gw pake gradasi dowank kok !
bwat bidang ukuran seleksi make marquee tool (2px x 30px)
Gradasi na dari warna #dddddd ke #ffffff perhatikan settingan gradasina
crop bagian gradasi dowank, save as ke GIF
bwat juga button na, terserah lu !
Buka Dreamweaver lu, bwat dokumen baru untuk CSS. Tetap berkonsep Web 2.0 design, CSS na pun kudu kompatible dengan IE dan FF
Nama file: styles.css
- Code:
- /* CSS Web 2.0 Builder by dr.emi */
body,td,th { font-family: Arial; font-size: 11px; color: #000000; }
body { background-color: #FFFFFF; margin: 10px 10px 10px 10px; }
#BlueSky { background-color: #F2F9FF; padding: 30px; margin-bottom:5px; width:350px; border:1px solid #91CBF7; }
#FormBox { margin:0px;padding:0px; }
#FormBox h1 { color:#333399; font-size:13px;margin-bottom:10px;padding:0px; }
#FormBox p { color:#777777; font-size:10px;margin-bottom:20px;padding:0px; }
#FormBox label { margin-bottom:10px; color:#555555;display:block;font-weight:bold; font-size:12px; }
#FormBox .input { margin-bottom:20px; border: 1px solid #cdcdcd; padding: 0.2em; background: #FFFFFF url(“form-smooth-sdw-dre-bg-field.gif”) repeat-x 0 1px; color:#666666; }
#FormBox .input:hover { margin-bottom:20px; border: 1px solid #FF0000; padding: 0.2em; background: #FFFFFF url(“form-smooth-sdw-dre-bg-field.gif”) repeat-x 0 1px; color:#666666; }
#FormBox .submit { width:117px; height:40px; border:none; background: #FFFFFF url(“button.gif”) no-repeat 0 0; }
#FormBox .spacer { margin-bottom:10px; }
display:block; gw pake bwat menghemat penggunaan tag html, kalo tanpa block maka lu kudu perlu style baru kaya span atau p, biar field input na terletak di bawah label nama, dst.
untuk field dengan background, gw pake background:(bla bla); kalo make background-image:dst… compatible na di IE dowank, di FF ga isa.
note *) gunakan input tanpa titik jika ingin menerapkan langsung style na pada tag input, tapi pada sesi ini form field na gw kasi hover untuk bisa merubah warna saat disentuh, jadi gunakan class .input untuk normal dan class .input:hover untuk saat mouse menyentuh form field
tros attach style na pada dikumen HTML baru
ni bwat kode HTML form na:
- Code:
- <div id=”BlueSky”>
<div id=”FormBox”>
<h1>Yang ngerasa cakep dan cantik, ngisi Form disinih !!</h1>
<p>For whom that beautifull and handsome, fill this form !!</p>
<form action=”” method=”get”>
<label>Nama:</label>
<input class=”input” type=”text” size=”50″ />
<label>E-Mail:</label>
<input class=”input”type=”text” size=”50″ />
<label>Website:</label>
<input class=”input” value=”http://” type=”text” size=”50″ />
<label>Message:</label>
<textarea class=”input” cols=”38″ rows=”5″></textarea>
<div class=”spacer”></div>
<input name=”” value=”” class=”submit” type=”submit” />
</form>
</div>
</div>
jadi kalo lu preview bakalan ke gini :
Thanks berat kalo ada yang mereplay !!!
kok ga bisa di review yah bro??
padahal keren abis neh tutorialnya…
thx yo bro…
ok agung, sudah guwe ganti linknya, maaf ya link sebelumnya mungkin sudah error dari usercash.com nya.
sekarang lu bisa klik download untuk mendownload, dan demo untuk preview
kok ga bisa di review yah bro??
padahal keren abis neh tutorialnya…
thx yo bro…
ok agung, sudah guwe ganti linknya, maaf ya link sebelumnya mungkin sudah error dari usercash.com nya.
sekarang lu bisa klik download untuk mendownload, dan demo untuk preview