Rounded Corner and Shadow Effect no Images
Before CSS3 to achieve rounded corner effect small images are used. But CSS3 introduce a new effect to achieve this effect without images and also a shadow effect. Below is the code. The below code is working for all browsers except IE. To run this in IE the page should need to be hosted on server or using XAMPP or any other web server on local computer. Also have to include file ie-css3.htc for IE only.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#roundedcorner
{
width:300px;
height:200px;
margin:0 auto;
margin-top:20px;
border: solid 3px;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
-khtml-border-radius: 15px; /* Linux Browser */
border-radius: 15px; /* Opera 10+, IE */
background:#DBF6F6;
behavior: url(ie-css3.htc); /* For IE only */
text-align:center;
padding:10px;
}
#shadow
{
width:300px;
height:200px;
margin:0 auto;
margin-top:20px;
border: solid 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0px 0px 10px #000; /* Firefox */
-webkit-box-shadow: 0px 0px 10px #000; /* Safari and Chrome */
box-shadow: 0px 0px 10px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
-khtml-box-shadow: 0px 0px 10px #000; /* Linux browsers */
background:#DBF6F6;
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
padding:3px;
margin-top:10px;
padding:10px;
}
</style>
</head>
<body>
<div id="roundedcorner">
<br /><br />
div with rounded corner.
</div>
<div id="shadow">
<br /><br />
div with rounded corner and shadow effect. No Images just CSS.
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#roundedcorner
{
width:300px;
height:200px;
margin:0 auto;
margin-top:20px;
border: solid 3px;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
-khtml-border-radius: 15px; /* Linux Browser */
border-radius: 15px; /* Opera 10+, IE */
background:#DBF6F6;
behavior: url(ie-css3.htc); /* For IE only */
text-align:center;
padding:10px;
}
#shadow
{
width:300px;
height:200px;
margin:0 auto;
margin-top:20px;
border: solid 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0px 0px 10px #000; /* Firefox */
-webkit-box-shadow: 0px 0px 10px #000; /* Safari and Chrome */
box-shadow: 0px 0px 10px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
-khtml-box-shadow: 0px 0px 10px #000; /* Linux browsers */
background:#DBF6F6;
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
padding:3px;
margin-top:10px;
padding:10px;
}
</style>
</head>
<body>
<div id="roundedcorner">
<br /><br />
div with rounded corner.
</div>
<div id="shadow">
<br /><br />
div with rounded corner and shadow effect. No Images just CSS.
</div>
</body>
</html>
Screenshot Below:-
Download complete code and files form here:-
https://docs.google.com/leaf?id=0B2iokvd3EpXAZDg2Mzc5YjQtNmU3MC00MmFkLWE3OGQtMDFhMDg0MzdkYTQ0&hl=en_US
Nice and very helpful
ReplyDelete