So, I’m working on a new site that has a lot of gradient, rounded-corner buttons… and I mean A LOT. I don’t want to have to make each and everyone one of these an image (even with a sprite sheet, it’d be huge).
So, I decided that it’d probably be okay to use some CSS3 properties.
Specifically border-radius (along with -webkit and -moz varieties) and the gradient fills (-webkit-gradient, -moz-linear-gradient) for background “images”.
I was trying to find a list of browser compatibility for these properties so I could check which browser it would work for, but I haven’t been able to find a conclusive list.
Does anyone know which browsers do and don’t like these values?
Thanks.
P.S. Here is the quick demo I threw together to test out the look first:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.btn {
padding: 4px 8px 3px;
color: #FFF;
border-radius: 10px;
background: #77a700;
position: relative;
z-index: 1;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(76,137,19)),
color-stop(0.5, rgb(111,166,34))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(76,137,19) 5%,
rgb(111,166,34) 50%
);
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
font-size: 11px;
}
/*
This little technique allows for a second border, or in my case, a border that isn't at the edge.
*/
.btn:after {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
border: 1px solid #8ec300;
border-radius: 11px;
z-index: -1px;
}
</style>
</head>
<body>
<span class="btn">
Hello
</span>
</body>
</html>