designersdairy: February 2013

Tuesday, February 26, 2013

Rounded Corners with Gradient Css With IE7 ,IE8, IE9,IE 10

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>

designersdairy

Search This Blog

Tuesday, February 26, 2013

Rounded Corners with Gradient Css With IE7 ,IE8, IE9,IE 10

Validating to select in sequencial order using angular