SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Compatibility Check: border-radius and gradient

    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:
    Code:
    <!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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Casniuse has a good list of what you can use and many of the css3 generators will supply the code in a usable fashion.

    Avoid the IE gradient filters if you are using border radius as the filter kills the corners in IE9.

    You will find some differences between browsers anyway and quite often you will need background-clip for webkit to stop the corner bleed.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •