Ad

 WWW.CHECKLISTING.COM


Showing posts with label css3. Show all posts
Showing posts with label css3. Show all posts

Sunday, April 1, 2012

Rectangle Shadow by CSS3


Here is the code for the CSS3 Rectangle Shadow.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rectangle Shadow by CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rectangle-shadow {
box-shadow: 10px 10px 5px #C00;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#C00;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="rectangle-shadow">Rectangle Shadow by CSS3</div>
</body>
</html>



Rectangle Shadow by CSS3

Rounded Corners by CSS3

One of the most advanced features of CSS3 is enabling rounded corner. Herewith below code it examines features.
Rounded Corners by CSS3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rounded Corners by CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rounded-corners {
margin: 50px auto;
width:500px;
color:#fff;
padding:5px;
text-align:center;
font-size:20px; font-weight:bold;
background: #F00;
border:2px solid;
border-radius:25px; -moz-border-radius:25px;
}
</style>
</head>
<body>
<div id="rounded-corners">Rounded Corners by CSS3</div>
</body>
</html>
Rounded Corners by CSS3