Selamat malam teman-teman =) Nah, pertemuan kali ini saya dituntut untuk menguasai CSS. Nah-nah, mau tahu caranya membuat border yang lucu-lucu dengan CSS? Silakan dipelajari sintaksnya =)
<!DOCTYPE html>
<html lang="en">
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<head>
<title>Studi Kasus Modul 3 - CSS</title>
<style type="text/css">
<!--
.bulat{
background-color:#ff99ff;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #660099;
padding : 30px;
width : 120px;
height : 120px;
font-family : arial;
font-size : medium;
color : red;
}
-->
<!--
.kotak_rounded{
background-color:#0000cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #33ffcc;
padding : 10px;
width : 250px;
height : 100px;
font-family : arial;
font-size : medium;
color : white;
}
-->
<!--
.berbayang{
background-color:#00ff66;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 7px 5px #99ff66;
-webkit-border-radius: 10px;
border : 1px solid #009900;
padding : 10px;
width : 250px;
height : 50px;
font-family : arial;
font-size : big;
color : #003333;
}
-->
</style>
</head>
<body>
<div class="bulat" align="center">
Kalau ingat<br/>
yang BUNDER?<br/><br/>
...yaa INTAN...<br/>
...yaa DIAN...<br/>
...yaa VE...<br>
</div>
<br />
<div class="kotak_rounded">
Kalo yang ganteng-ganteng?<br/><br/>
...yaa AGUNG...<br/>
...yaa ALIF...<br/>
...yaa RASTRA...<br/>
</div>
<br />
<div class="berbayang">
jadi terbayang-bayang...<br/>
kece-BONG
</div>
</body>
</html>
<html lang="en">
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<head>
<title>Studi Kasus Modul 3 - CSS</title>
<style type="text/css">
<!--
.bulat{
background-color:#ff99ff;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #660099;
padding : 30px;
width : 120px;
height : 120px;
font-family : arial;
font-size : medium;
color : red;
}
-->
<!--
.kotak_rounded{
background-color:#0000cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #33ffcc;
padding : 10px;
width : 250px;
height : 100px;
font-family : arial;
font-size : medium;
color : white;
}
-->
<!--
.berbayang{
background-color:#00ff66;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 7px 5px #99ff66;
-webkit-border-radius: 10px;
border : 1px solid #009900;
padding : 10px;
width : 250px;
height : 50px;
font-family : arial;
font-size : big;
color : #003333;
}
-->
</style>
</head>
<body>
<div class="bulat" align="center">
Kalau ingat<br/>
yang BUNDER?<br/><br/>
...yaa INTAN...<br/>
...yaa DIAN...<br/>
...yaa VE...<br>
</div>
<br />
<div class="kotak_rounded">
Kalo yang ganteng-ganteng?<br/><br/>
...yaa AGUNG...<br/>
...yaa ALIF...<br/>
...yaa RASTRA...<br/>
</div>
<br />
<div class="berbayang">
jadi terbayang-bayang...<br/>
kece-BONG
</div>
</body>
</html>
Ini hasil screenshotnya
Tidak ada komentar:
Posting Komentar
Jangan lupa memberi komentar pada setiap postingan saya!