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?
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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
padding: 4px 8px 3px;
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
This little technique allows for a second border, or in my case, a border that isn't at the edge.
border: 1px solid #8ec300;