Desain Web Dengan CSS

Desain Web Dengan CSS
Berikut ini saya akan memberikan sedikit trik mendesain web dengan Css :
 
1. Buat file cssnya dengan nama desain.css :
 
#ats {
    width: auto;
    height: 150px;
    -moz-box-shadow: gray 3px 3px 4px;
    -webkit-box-shadow:gray 5px 5px 5px;
    font-family: "Comic Sans MS";
    font-size: 9mm;
    color: #CCCCCC;
    font-weight: bold;
    text-shadow:5px 5px 5px #666;
    background-color: #000000;
    text-decoration: blink;
    text-align: center;
    letter-spacing: 1em;
}
#ats:hover{
    background-color: #00FF00;
    height: 150px;
    width: auto;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
    font-family: "Comic Sans MS";
    font-size: 9mm;
    font-weight: bold;
    text-decoration: blink;
    letter-spacing: 1em;
    color:#000000;
}
#tgh {
    background-color:#FFFFFF;
    margin-top: 10px;
    height: 700px;
    width: 700px;
    margin-right: 150px;
    margin-left: 150px;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}
#bwh {
    background-color: #999999;
    height: 70px;
    width: auto;
    margin-top: 10px;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
    font-family: tahoma;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
}
#bwh:hover{
    background-color:#000000;
    height: 70px;
    width: auto;
    margin-top: 10px;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow:5px 5px 5px gray;
    font-family: tahoma;
    font-size: 10px;
    font-weight: bold;
    color:#FFFFFF;
}
#tgh #menu {
    width: 150px;
    margin-top: 10px;
    margin-left: 5px;
    height: 200px;
    margin-right: 5px;
    margin-bottom: 5px;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
    float: left;
}
#tgh #main {
    background-color:#EEEEEE;
    height: 600px;
    width: 360px;
    float: right;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-top-style: inset;
    border-bottom-style: inset;
    border-right-style: inset;
    border-left-style: inset;
}
#tgh #kanan {
    float: right;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    height: 200px;
    width: 150px;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
}
#tgh #menu2 {
    float: left;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 150px;
    background-color: #000000;
    -moz-box-shadow: 5px 5px 5px;
    -webkit-box-shadow:5px 5px 5px;
}
.menu3{
background-color: #000000;
color:#FFFFFF;
font-family:tahoma; font-size:12px;
text-decoration:none;
display:block;
width:150px;
height:27px;
border-bottom-style:dotted;
border-bottom-color: #CCCCCC;
}
.menu3:hover{
background-color: #00FF00;
font-weight:bold;
color:#000000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
 
 
2. Buat file Html dengan nama Coba.html :
 
<html>
<head>
<link rel="stylesheet" href="desain.css" type="text/css">
</head>
<body bgcolor="#EEEEEE">
<div id="ats">MY-WEB<p>

</div>
<div id="tgh">
  <div id="menu"><img src="gambar/_UnEm0_.jpg" alt="Gbr1" width="150" height="200"></div>
  <div id="kanan">
    <form name="form1" method="post" action="">
      <table width="100%" border="0" cellspacing="2" cellpadding="2" style="font-family:tahoma; font-size:12px;">
        <tr>
          <td colspan="3" align="center" bgcolor="#F2F2FF">Login User </td>
        </tr>
        <tr>
          <td width="41%">&nbsp;</td>
          <td width="7%">&nbsp;</td>
          <td width="52%">&nbsp;</td>
        </tr>
        <tr>
          <td>Username</td>
          <td>:</td>
          <td><input name="username" type="text" id="username" size="7"></td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td><input name="password" type="password" id="password" size="7"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><input type="submit" name="Submit" value="Login" style="background-color:#EEEEEE; color:#000000; border:dotted;"></td>
        </tr>
      </table>
    </form>
  </div>
  <div id="main"></div>
  <div id="menu2">
      <div style="background-color:#CA0000; font-family:tahoma; font-size:14px; color:#FFFFFF; width:150px; height:30px; display:block" align="center">MENU UTAMA</div>
    <a href="" class="menu3">Home</a>
    <a href="" class="menu3">Profil</a>
    <a href="" class="menu3">Link</a>
    <a href="" class="menu3">Guest Book</a>
  </div>
</div>
<div id="bwh" align="center">&copy;Copyright 2010 <br>
Desain by : adhye alor
</div>
</body>
</html>
 
 
Silahkan Dicoba......:-bd
 
 
Format Lainnya : PDF | Google Docs | English Version
Diposting pada : Rabu, 21 Juli 10 - 10:18 WIB
Dalam Kategori : DESAIN WEB DENGAN CSS
Dibaca sebanyak : 5480 Kali
Facebook Feedback