Senin, 13 Februari 2012

Tabel biodata dengan sentuhan css3



Form Info Dengan Css3 Kali ini dari pada gak update mending bagi - bagi script, script ini memuat tentang info admin saja pasti bingung ya . . .? tampilannya sama seperti screenshot / gambar di atas, emmmm dari pada penasaran langsung liat demo nya aja kali ya, silahkan di cek hehehe.

DEMO

Simpan kodenya sesuai kebutuhan jika di sidebar Tambah Gadget html/Javascript jika di postingan beralih dari mode compose ke mode edit html.

<style>  
form {
    width: 460px;
    padding: 20px;
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    margin: 0 auto;
    }

fieldset {
    position: relative;
    padding: 10px;
    padding-top: 25px;
    margin-bottom: 30px;
    background: #F6F6F6;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
    background: -webkit-linear-gradient(center top, #EFEFEF, #FFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #FFF 100%));
    background: -moz-linear-gradient(center top, #EFEFEF, #FFF 100%);
    background: -o-linear-gradient(center top, #EFEFEF, #FFF 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#EFEFEF, EndColorStr=#FFF 100%)";
    background: linear-gradient(center top, #EFEFEF, #FFF 100%);
    }

legend {
    padding: 6px 12px;
    background-color: #FF609F;
    color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    text-shadow: 1px 1px 1px #333;
    }
td {
    background: #DDD;
    padding: 8px;
    border-right: 5px solid #555;
    width:190px;
    }

table {
    background-color: #555;
    }
</style>  
<form>
  <fieldset>  
   <legend>Info Tentang Admin</legend>  
<table border="0">
<tr>
<td>Nama</td>
<td>$hi~N~Tho</td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td>juni 1993</td>
</tr>
<tr>
<td>Tempat Tinggal</td>
<td>Rawamangun Lr 18</td>
</tr>
<tr>
<td>Status</td>
<td>Pelajar / Siswa</td>
</tr>
<tr>
<td>Kota</td>
<td>Makassar</td>
</tr>
<tr>
<td>Provinsi</td>
<td>Sulawesi - Selatan</td>
</tr>
<tr>
<td>Kabupaten</td>
<td>Luwu Utara</td>
</tr>
</table>
</fieldset>  
</form>

Ganti sendiri ya data - datanya sesuai data diri anda.