Senin, 14 Februari 2011
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun,
misalnya border dan padding.
- Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya
paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan
untuk membuat variasi border.
Berikut beberapa contoh border dan objek yang dapat dilakukan dengan CSS3 :
Ini dia Scriptnya biyar lebih jelasnya :
<em><!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" xml:lang="en" lang="en">
<head>
<title>STUDI KASUS</title>
<style type="text/css">
<!--
.lingkaran{
width:200px;
height:200px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
background:#F90;
border: 2px solid #FF0;
text-align:center;
font-size:20px;
color:#fff
}
.text-lingkaran{
padding-top: 100px;
}
.round {
background-color: aqua;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-radius: 5px;
border: 2px solid blue;
padding: 10px;
width: 310px;
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.shadow {
background-color: yellow;
border-bottom-left-top:25px 25px;
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
border: 2px solid red;
padding: 10px;
width: 310px;
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
-->
</style>
</head>
<body>
<p>
<div class="lingkaran">
<span class="text-lingkaran">
<br/><br/>
Ini adalah border lingkaran!!
....
....
....
</span>
</div
<br/><br/>
<div class="round">
Bisa juga bikin kreasi border seperti ini.
Mmmmmmmm :-)
</div>
<br />
<div class="shadow">
Kalau yang ini semacam efek shadow.
Dan tambahan dekorasi pada text nya..
Keren kannnnnn?????? < biasa aja >
</div>
</body>
</html>
0 komentar:
Posting Komentar