W3C home > Mailing lists > Public > www-style@w3.org > October 2009

Re: Styling HTML5 elements

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 15 Oct 2009 10:29:47 -0700
Cc: Steve Workman <steve.workman@gmail.com>, www-style@w3.org
Message-Id: <CE467CCE-9440-4B27-8971-CF3157F35496@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

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.

Received on Thursday, 15 October 2009 17:30:27 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:21 GMT