Design Form Smooth Shadow [dr.emi]

helo broder !!

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Design Form Smooth Shadow [dr.emi]</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<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>
</body>
</html>

jadi kalo lu preview bakalan ke gini :

Download sini file jadina

Bwat preview na, klik aja link ini Cheesy

Thanks berat kalo ada yang mereplay !!! Cheesy