graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Experiments With CSS3 border-radius and box-shadow

In building DeCal, I experimented with some new CSS3 toys that have a variety of support in our favorite browsers. border-radius and box-shadow were the favorites of the day, and as of this writing, Firefox 3.6+ and Opera 10.5+ lead the pack in rendering more complicated rules. IE, predictably, sucks.

In building DeCal, I used some CSS3 for progressive enhancement of the visual presentation. A few of the new toys employed:

  • box-shadow
  • border-radius
  • RGBa

What’s interesting is the disparate browser support these new rendering technologies enjoy. Some browsers, like Firefox 3.6+ and Opera 10.5+, are very promising; others, like Safari and Chrome, are incomplete or buggy in their support. In the main calendar view, I used all three of these new rules for the clickable buttons. Here is the relevant CSS originally tested for the orange button:

#cal td.smd_cal_event span a {
	background: #fab102;
	padding: 4px 10px 5px 10px;
	border: 1px solid #fff;
	border-bottom: 1px solid #363d50;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow:
		inset 0 4px 7px 0 #fff25f,
		inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4),
		inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9),
		0 2px 4px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:
		inset 0 4px 7px 0 #fff25f,
		inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4),
		inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9),
		0 2px 4px 0 rgba(0, 0, 0, 0.4);
	box-shadow:
		inset 0 4px 7px 0 #fff25f,
		inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4),
		inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9),
		0 2px 4px 0 rgba(0, 0, 0, 0.4);
	}

We’ve started with some simple background color and padding rules, added a simple top/bottom border definition, then the same border-radius defined for all vendor-specific rendering engines (annoying), and then the miscellaneous box-shadows defined for all three vendor-specific rendering engines again (seriously, people; what a waste of bandwidth). We’re expending a glacial slab of CSS for the visual aspect, but it is still magnitudes easier than building background images. (For the sake of comparison, the above CSS rules weigh in at about 700 bytes; a comparable image is easily 6-7k plus an additional HTTP request.)

Here is a magnified detail of the button as it appears using the above CSS in our five contending browsers on Windows:

Screenshot of five browsers rendering CSS3 border-radius and box-shadow

As you can see, the support degrades across different browsers. Internet Explorer 7 recognizes nothing. Everyone else renders border-radius without issue; almost to the pixel, it is the same. There is a slight difference in how the top and bottom borders are blended in the bottom curve, and to my eyes, Firefox 3.6 does the best job of rendering the curve, the background color and the border color, with Opera 10.5 being a close second.

CSS3 box-shadow Support Across Browsers

One of the mega-sweet things about CSS3 is the ability to define multiple variations of the same styling rule per DOM element. Multiple backgrounds are a big win, for sure. But multiple box-shadows are just as good, because it enables the design of complex gradients, like the bevels in my button, with zero image requirements. To summarize the CSS, the first inset rule is the top yellowish shade, the second inset is the the razor-thin yellow shade along the bottom, and the third inset is the broad dark orange shade across the bottom. Finally, the fourth definition is the actual drop shadow underneath the element.

The results are interesting. With the original rule written above, Safari supported nothing. However, if you place the outer shadow before the inset rules and remove the fourth integer value (used to define the shadow spread) like this …

-webkit-box-shadow:
	0 2px 4px rgba(0, 0, 0, 0.4),
	inset 0 4px 7px 0 #fff25f,
	inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4),
	inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9);

… the outer box-shadow works. So Safari renders RGBa just fine, but does not yet support inset box-shadows.

Chrome is even more interesting, because it uses the Webkit definitions, tries to create the correct inset shadows, but produces rendering errors (those squarish corners sticking out behind the border-radius) instead of doing nothing like its cousin Safari. Removing the inset rules fixes this, but of course leaves just our normal flat button. Which, in the spirit of progressive enhancement, will have to do for now. (Also of note, Chrome’s outer shadow is not pleasant; it takes the 4px rule quite literally and the result is a bit stale.)

Opera 10.5 and Firefox 3.6 are the clear winners here. Both produce smooth gradated buttons with no rendering errors, and have very smooth, nicely fading drop shadows that extend well beyond the defined 4px to produce a Photoshop-quality effect. Between the two, Firefox’s rendering is just a hair better, with a more evenly spaced inside bevel. I’m really picking here though, because both browsers far out-perform the others. For now.

Browser Support Just Over the Horizon

Not really being a CSS expert like more famous people, these tests are pretty basic. It should be noted that the current build of Webkit produces the inset box-shadows perfectly, so it’s only a matter of time (months?) before Safari, Chrome, the iPhone and others make my buttons look nice.

It’s still unclear how far IE9 will go in CSS3 support. They are clearly committed to border-radius, which is excellent, but I have not seen anything yet on box-shadow. The best news about IE is that it will use standard CSS definitions without any fucking retarded vendor prefix. It’s nice to see Microsoft’s team tackle this correctly the first time, even if they are four years late to the party.

, , , , , , , , ,

commentary + criticism

Kevin

wrote the following on Tuesday April 6, 2010

On a related note, you guys might be interested in this aqua-style button created in just CSS3. Change one variable and the whole color changes! Nifty.

Bedriftsbasen Norge

wrote the following on Sunday April 11, 2010

Impressive, but much work in coding…

dvessel

wrote the following on Saturday June 5, 2010

Hello Kevin. Interesting findings. I was looking for a way to get Safari to fallback but it doesn’t work. I tried with Version 4.0.5 (6531.22.7).

I’m pretty sure it wasn’t updated since you posted this. Maybe there’s a discrepancy between platforms? I’m on a Mac, latest Snow Leopard.

I noticed box shadows was removed from W3C. I do hope they improve it since you must define all the properties in one rule unlike say the border rules where you can set colors and styles separately. No ability to cascade different aspects a property makes it hard to manage.

dvessel

wrote the following on Saturday June 5, 2010

Well, I just figured out how to let it fallback. All you need to do is define it twice. Webkit ignores the rule if it doesn’t understand it. Since the latest dev and release versions of Webkit based browsers would understand the simpler definition, it must be set first.

 -webkit-box-shadow:
   0 2px 4px rgba(0, 0, 0, 0.4);
 -webkit-box-shadow:
   0 2px 4px rgba(0, 0, 0, 0.4),
   inset 0 4px 7px #fff25f,
   inset 0 -2px 4px rgba(255, 242, 94, 0.4),
   inset 0 -4px 8px rgba(207, 75, 3, 0.9);