Border-Round
Biasanya ketika kita hendak membuat sesuatu sudut menjadi bundar (round), maka mau tidak mau kita harus menggunakan bantuan file gambar. Namun tidak demikian bila kita menggunakan CSS3. semuannya bisa dilakukan dengan CSS3 tanpa bantuan gambar apapun, berikut scripnya :
<!DOCTYPE HTML>
<html>
<head>
<title> Border Effects </title>
<style>
h4 {
background:#FFF;
border:1px solid #000;
width:500px;
text-align:center;
height: 100px;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px;
padding: 5px 5px 5px 5px;
</style>
</head>
<body>
<h4> Welcome to CSS3 </h4>
</body>
</html>
Save dengan nama border-round.html
Efek Ini dapat bekerja atau berjalan pada web browser Mozilla, Google Crome, dan Safari
Berikut Tampilan nya :
Selanjutnya saya akan membahas BAB 4- Border-Shadow , Kunjungi terus sidary
5 comments
sekrang tau gan, carannya bikin properti border,,, langsung praktekin aja,,, makasih gan,,,,, keep posting,,,,
infonya mantap nih
biasanya ane kalau make border yang lebih simple seperti ini border: solid 4px;
mantap gan !!
Saya tunggu bab bab selanjutnya gan
Peraturan :
1. Dilarang Menggunakan Link
2. Dilarang Membuat Kata-kata Sex, porn, Dsb
3. Komentar Yang Positif.
EmoticonEmoticon