Border Dengan Menggunakan CSS ~ Inspiration Zone

Tuesday, February 15, 2011

Border Dengan Menggunakan CSS

Posted by Riesh_16 on 12:13 AM

Tampilan web :

Studi kasus.css

.lingkaran{
width : 200px;
height : 200px;
-moz-border-radius : 100px;
-webkit-border-radius : 100px;
border : 2px solid #000000;
background-color : #c0c0c0;
}

#dalam-lingkaran{
text-align : center;
position : relative;
border : none;
width : 100px;
heigth : 100px
}

.daun{
padding : 10px;
border : 5px solid #008000;
width : 500px;
height : 50px;
border-bottom-left-radius : 50px;
border-top-right-radius : 50px;
}

.bayangan{
padding : 10px;
border : 2px solid #000000;
-moz-box-shadow : 5px 5px 8px rgba(255,0,255,1);
-webkit-box-shadow : -5px -5px 3px rgba (255,0,0,0.5);
width : 500px;
height : 30px;
}

Studi kasus.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Studi Kasus CSS</title>
<link href="studi kasus.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="lingkaran" align="center">
<p id="dalam-lingkaran"> Paragraf ini tetap berada di dalam lingkaran </p>
</div>
<br>
<div class="daun"> Border Menyerupai Daun </div>
<br>
<div class="bayangan">Efek Bayangan pada border persegi panjang</div>
</body>
</html>

Semoga Bermanfaat ^o^!!

-- Suastika Yulia Riska_109533414510_s1 PTI09 --