Sintaxnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Studi Kasus Modul 3</title>
<style type="text/css">
<!--
.lingkaran{
width:150px;
height:150px;
border: 2px solid #897048;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
background-color:#ddccb5;
text-align:center;
font-size:20px;
color:#fff
}
.text-lingkaran{
<!-- menentukan jarak dari tepi atas -->
padding-top: 100px;
color : black;
}
.round {
-moz-border-radius-bottomright: 25px 25px;
border-bottom-right-radius: 25px 25px;
-moz-border-radius-topleft: 25px 25px;
border-top-left-radius: 25px 25px;
border: 4px solid green;
padding: 10px;
width: 270px;
height: 30;
color: brown;
}
.round2 {
border: 2.5px solid black;
<!-- semua jarak untuk semua sisi sebesar 10 piksel-->
padding: 10px;
color : purple;
}
.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>
<p>
<div class="lingkaran">
<span class="text-lingkaran">
<br> Ya innii </br> border </br> Lingkaran yang susah bikinnya
</span>
</div>
<br />
<div class="round">
Bisa juga jadi kreasi border kaya' gini.</br>
Mmmm,susahnya,,, ^^
</div>
<br/>
<div class="shadow">
<p class="round2">Yang Ini Ada Efek Shadownya,, keren ga??? ^^
</div>
<br/>
</body>
</html>
0 comments:
Post a Comment