Welcome to Designers Dairy blog here i have posted how to add Rounded Corners with Gradient
effect With IE7 ,IE8, IE9,IE 10
Code:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
outline:none;
border:none;
}
.radius
{
font-family:Arial, Helvetica, sans-serif;
width:390px;
height: 17px;
font-size:12px;
padding:8px 0px 5px 10px;
color:#FFF;
webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -webkit-gradient(linear, 0 0, 0 top, from(#f2e4d7), to(#f9eee3)); /* Webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(#f2e4d7, #0082b7); /* Webkit (Chrome 11+) */
background: -moz-linear-gradient(#f2e4d7, #0082b7); /** Mozilla 7 **/
background: -ms-linear-gradient(#f2e4d7, #faf7f3); /** IE10 **/
background: -o-linear-gradient(#f2e4d7, #42c3ea); /* Opera 11.10+ */
-pie-background: linear-gradient(#f2e4d7, #faf7f3); /**Pie.htc for IE 9**/
behavior:url(js/PIE.htc);
}
</style>
</head>
<body>
<div class="radius">
<div style="float:left; width:93%">My Journey</div>
<div style="float:left; width:7%; margin:3px 0px 0px 0px;"><img src="images/arrow.png" width="11" height="8" /></div>
</div>
</body>
</html>
effect With IE7 ,IE8, IE9,IE 10
Code:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
outline:none;
border:none;
}
.radius
{
font-family:Arial, Helvetica, sans-serif;
width:390px;
height: 17px;
font-size:12px;
padding:8px 0px 5px 10px;
color:#FFF;
webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -webkit-gradient(linear, 0 0, 0 top, from(#f2e4d7), to(#f9eee3)); /* Webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(#f2e4d7, #0082b7); /* Webkit (Chrome 11+) */
background: -moz-linear-gradient(#f2e4d7, #0082b7); /** Mozilla 7 **/
background: -ms-linear-gradient(#f2e4d7, #faf7f3); /** IE10 **/
background: -o-linear-gradient(#f2e4d7, #42c3ea); /* Opera 11.10+ */
-pie-background: linear-gradient(#f2e4d7, #faf7f3); /**Pie.htc for IE 9**/
behavior:url(js/PIE.htc);
}
</style>
</head>
<body>
<div class="radius">
<div style="float:left; width:93%">My Journey</div>
<div style="float:left; width:7%; margin:3px 0px 0px 0px;"><img src="images/arrow.png" width="11" height="8" /></div>
</div>
</body>
</html>
No comments:
Post a Comment