Membuat Rounded Corner dan Shadow Dengan HTML5 dan CSS3

Rounded Corner dan Shadow akan membuat tampilan sebuah website lebih indah, bukan?

Membuat Rounded Corner dan Shadow Dengan HTML5 dan CSS3
Rounded Corner
Ini adalah salah satu contoh Rounded Corner dan shadow dengan HTML5 dan CSS3 Bagaimana cara membuatnya?

File HTML5

<!doctype html> <html lang="en"> <head>
<meta charset="utf-8">
<title>Welcome to my webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<section id="main">
<h2><font color="white">REGISTER NOW</font></h2>
</section>

</body>
</html>

File CSS3

#main{
border: 1px solid orange;
width: 300px;
background: orange;
text-align: center;
-webkit-border-radius: 20px;
/* membuat rounded corner */
-webkit-box-shadow: rgb(110,110,110) 5px 5px 8px;
/* value1, value2, value3 = sebelah kanan, bawah, blur
  inset akan membuat shadow berada di dalam box
*/

}

Membuat Rounded Corner dan Shadow Dengan HTML5 dan CSS3 Membuat Rounded Corner dan Shadow Dengan HTML5 dan CSS3 Reviewed by Ainun Mahya on 9:25 PM Rating: 5

No comments:

Silakan Berkomentar dengan Bijak

Powered by Blogger.