Re: Styling HTML5 elements

On Oct 15, 2009, at 9:30 AM, Tab Atkins Jr. wrote:

> #meter::after {
>  position: absolute;
>  left: 10px;
>  top: 10px;
>  width: 100px;
>  height: 100px;
>  background: #006;
>  border-radius: 50%;
>  clip: rect( calc( attr("value",integer) / attr("max",integer) *
> 100px ), 100px, 100px, 0px );
> }
>
> #meter::after::outside {
>  position: absolute;
>  top: 10px;
>  right: 10px;
>  width: 120px;
>  height: 120px;
>  background: #4af;
>  border-radius: 50%;
> }

Just looking at this quickly, but couldn't you avoid "::outside" like  
this:

s/#meter::after::outside/#meter::after
s/#meter::after/#meter::after::after

Or maybe avoid that by using multiple backgrounds (light blue image on  
top, single medium blue/dark blue image underneath), and use  
background-position to determine how much of the  medium blue/dark  
blue image gets covered up by the light blue image. Then throw a  
border-image around the whole thing.