Membuat Variasi Border pada CSS
Senin, 14 Februari 2011
| 
Diposting oleh
Abdul Patrick |
untuk kali ini ane bakal sharing masalah beberapa variasi pada border dengan menggunakan CSS.
langsung ajha dah. cekidot.....
Script:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Studi Kasus Modul 3</title>
<style type="text/css">
<!--
.segitiga {
display: block;
height: 0;
width: 0;
border-bottom: 10em solid #f00;
border-left: 10em solid transparent;
font-weight: bold;
}
.lingkaran{
display: block;
height: 10em;
width: 10em;
font-weight: bold;
border: 0.2em solid #888943;
background-color: #CACC7F;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
-khtml-border-radius: 5em;
border-radius: 5px;
text-align: center;
}
.lingkaran2{
width:100px;
height:100px;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
background:#000;
text-align:center;
font-size:20px;
color:#fff
}
.text-lingkaran{
padding-top: 37px;
}
.border1{
width:200px;
text-align:center;
padding:10px;
background:#000000;
color: red;
font-weight: bold;
-moz-border-radius: 2em 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
}
.border2{
font-weight: bold;
border: 2.5px solid blue;
}
.shadow {
width: 200px;
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
-->
</style>
</head>
<body>
<div class="segitiga">
Ini Segitiga Loch!!
</div>
<p>
<div class="lingkaran2">
<span class="text-lingkaran">
Ini Lingkaran Loch!!
</span>
</div>
<p>
<div class="border1">
Ini Keren Loch!
</div>
<div class="shadow">
<p class="border2">Bordernya ada Shadownya Loch!
</div>
</body>
</html>
Senin, Februari 14, 2011 |
0 komentar:
Posting Komentar
Kritik dan saran yang anda berikan akan sangat bermanfaat bagi kami untuk terus memberi yang terbaik. ^_^