Desain Web Menggunakan CSS

Posted: November 5, 2012 in Desain Web, Uncategorized

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 :

  1. <html>
  2. <head>
  3. <link rel=”stylesheet” href=”desain.css” type=”text/css”>
  4. </head>
  5. <body bgcolor=”#EEEEEE”>
  6. <div id=”ats”>MY-WEB<p>
  7. </div>
  8. <div id=”tgh”>
  9.   <div id=”menu”><img src=”gambar/_UnEm0_.jpg” alt=”Gbr1″ width=”150″ height=”200″></div>
  10.   <div id=”kanan”>
  11.     <form name=”form1″ method=”post” action=””>
  12.       <table width=”100%” border=”0″ cellspacing=”2″ cellpadding=”2″ style=”font-family:tahoma; font-size:12px;”>
  13.         <tr>
  14.           <td colspan=”3″ align=”center” bgcolor=”#F2F2FF”>Login User </td>
  15.         </tr>
  16.         <tr>
  17.           <td width=”41%”>&nbsp;</td>
  18.           <td width=”7%”>&nbsp;</td>
  19.           <td width=”52%”>&nbsp;</td>
  20.         </tr>
  21.         <tr>
  22.           <td>Username</td>
  23.           <td>:</td>
  24.           <td><input name=”username” type=”text” id=”username” size=”7″></td>
  25.         </tr>
  26.         <tr>
  27.           <td>Password</td>
  28.           <td>:</td>
  29.           <td><input name=”password” type=”password” id=”password” size=”7″></td>
  30.         </tr>
  31.         <tr>
  32.           <td>&nbsp;</td>
  33.           <td>&nbsp;</td>
  34.           <td>&nbsp;</td>
  35.         </tr>
  36.         <tr>
  37.           <td>&nbsp;</td>
  38.           <td>&nbsp;</td>
  39.           <td><input type=”submit” name=”Submit” value=”Login” style=”background-color:#EEEEEE; color:#000000; border:dotted;”></td>
  40.         </tr>
  41.       </table>
  42.     </form>
  43.   </div>
  44.   <div id=”main”></div>
  45.   <div id=”menu2″>
  46.       <div style=”background-color:#CA0000; font-family:tahoma; font-size:14px; color:#FFFFFF; width:150px; height:30px; display:block” align=”center”>MENU UTAMA</div>
  47.     <a href=””>Home</a>
  48.     <a href=””>Profil</a>
  49.     <a href=””>Link</a>
  50.     <a href=””>Guest Book</a>
  51.   </div>
  52. </div>
  53. <div id=”bwh” align=”center”>&copy;Copyright 2010 <br>
  54. Desain by : adhye alor
  55. </div>
  56. </body>
  57. </html>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s