Source Kodenya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DemoBorder</title>
<style type="text/css">
<!--
.box1 {
background-color:grey;
-moz-border-radius:200px;
-webkit-border-radius:200px;
border : 5px solid green;
padding: 10px;
width: 200px;
height:200px;
}
.teks1{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}
.box2 {
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
padding: 10px
width : 200px;
height : 100px;
border : 5px solid red;
margin-right: 900px;
}
.teks2{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}
.box3 {
margin : 10px;
padding : 30 px;
width : 400px;
height : 100px;
border:1px solid red;
-moz-box-shadow:5px 5px 5px red;
box-shadow:5px 5px 5px red;
}
.teks3{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}
-->
</style>
</head>
<body>
<div class ="box1">
<div class ="teks1"align="center">
Yang ini border lingkaran.Pendekatan yang digunakan masih sama lhow.Ayow kreasikan sendiri ya ??
</div>
</div>
<br/>
<div class="box2">
<div class ="teks2"align="center">
pusiiiingggg....
</div>
<br/>
<div class="box3">
<div class ="teks3"align="center">
kalau yang ini semacam efek shadow.Keren kan ?
</div>
</body>
</html>
Hasilnya:
Membuat Desain Web Memanfaatkan CSS dan background
Source Kodenya:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Desain Web Menggunakan CSS</title>
<body background="bg.jpg">
<style type="text/css">
</head>
<!--
#bagian1 {
margin: auto;
width: 1000px;
border: 1px solid blue;
background:blue;
}
#bagian2 {
float: left;
height: 100px;
width:700px;
border: 0;
background:blue;
}
#bagian3 {
height : 100px;
width: auto;
border: 1px solid blue;
background-image:url(bgheader.GIF);
}
#bagian4 {
height:0px;
width:100px px;
margin-top:15px;
margin-left:750px ;
border: 0;
}
#bagian5 {
height:0px;
width:100px 10px;
margin-top:0px;
margin-left:950px ;
}
#bagian6 {
height:450px;
width:1200px 10px;
margin-top:100px;
}
#bagian7{
float: left;
width: 550px;
height: 400px;
margin-LEFT:100px ;
margin-right:100px ;
}
#bagian8 {
float: left;
width: 400px;
height: 330px;
border: 0;
}
#bagian9 {
height: 70px;
border: 0;
}
#bagian10 {
float: left;
width: 200px;
height: 250px;
border: 0;
}
#bagian11 {
margin-left:200px ;
width: 310px;
height: 200px;
border: 0;
}
#bagian12 {
clear: both;
height: 50px;
background-color : blue;
border: 1px solid blue;
}
-->
</style>
<body>
<div id="bagian1">
<div id = "bagian3">
<div id = "bagian2"><img src = "facemu.png" width="120" height="40">
</div>
<div id= "bagian4">
<form name= "login" method="post" action="">
<label><font face = "verdana" size = "4" color ="white">email</label></font><br>
<input type="text" name="email"><br>
<input type="checkbox" name="email"><font face = "verdana" size = "2" color ="black">keep me logged in </input>
</form>
</div>
<div id = "bagian5" >
<label><font face = "verdana" size = "4" color ="white">Password</label></font><br>
<input type="text" name="email">
<input type="button" value="login" ><br>
<a href = "facebook.com"><font face = "verdana" size = "2" color ="black"> Forgot your password ? </a></font>
</div>
<div id="bagian6">
<div id="bagian7"><img src = "Capture.jpg" width="500" height="350">
</div>
<div id="bagian8">
<div id="bagian9">
<font face = "verdana" size = "5" color ="blue">Sign Up<br>
<font face = "verdana" size = "4" color ="blue">It's free and always will be <br>
<hr>
</div>
<div id="bagian10">
<font face = "times new roman" size = "4" color ="blue">
<br>First Name <br><br>
Last Name<br><br>
Your Email<br><br>
Re-Enter Email<br><br>
New Password<br><br>
</font>
</div>
<div id="bagian11">
<br><input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
</div><br><br><font face = "times new roman" size = "2" color ="blue">Mengapa saya perlu mengisinya ?</font><br><br>
<input type="button" value="Mendaftar" align="right">
</div>
</div>
<div id="bagian12">
<font face = "times new roman" size = "5" color ="white">
yunitachandrakartika.blogspot.com</font>
</div>
</div>
</body>
</html>
Hasilnya:
Tidak ada komentar:
Posting Komentar