Just another WordPress.com site

Modul 3 (Studi Kasus)

Salah satu kemampuan yang menarik dari CSS3 adalah dalam pembuatan kotak bersudut bulat. Sebagai contoh untuk hasil tampilan sebagai berikut:

Source Code-nya adalah :

<!DOCTYPE html>
<html lang=”en”>

<head>
<title>Studi Kasus Border</title>
<style type=”text/css”>
<!–
.bunder{
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-khtml-border-radius: 100px;
-ms-border-radius: 100px;
-chrome-border-radius: 100px;
background-color: #ddccb5;
border: 2px solid #897048;
padding: 5px;
width: 150px;
height:150px;
}

.semi-kotak{
-moz-border-radius-topleft:25px 25px;
-moz-border-radius-bottomright:25px 25px;
-webkit-border-radius-topleft:25px 25px;
-webkit-border-radius-bottomright:25px 25px;
-o-border-radius-topleft:25px 25px;
-o-border-radius-bottomright:25px 25px;
-khtml-border-radius-topleft:25px 25px;
-khtml-border-radius-bottomright:25px 25px;
-ms-border-radius-topleft:25px 25px;
-ms-border-radius-bottomright:25px 25px;
-chrome-border-radius-topleft:25px 25px;
-chrome-border-radius-bottomright:25px 25px;
background-color:white;
border:4px solid green;
padding:5px;
width: 300px;
height:40px;
}

.shadow {
-moz-box-shadow:10px 10px 10px #999999;
-webkit-box-shadow:10px 10px 10px #999999;
-o-box-shadow:10px 10px 10px #999999;
-khtml-box-shadow:10px 10px 10px #999999;
-ms-box-shadow:10px 10px 10px #999999;
-chrome-box-shadow:10px 10px 10px #999999;
background-color:white;
border:2px solid #897048;
padding:5px;
width: 300px;
height:40px;
}
–>
</style>

</head>
<body>

<div align=”center”>
<br>
Yang ini border lingkaran. Pendekatan yang digunakan masih sama lho.
Ayo, kreasikan sendiri ya??
</div>
<br/>

<div>
Bisa juga bikin kreasi border seperti ini.<br>
Mmmmm….!!!
</div>
<br/>

<div>
Kalau yang ini semacam efek shadow.<br>
Keren kan?
</div>

</body>
</html>

SEMOGA BERMANFAAT

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: