- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 15 Oct 2009 12:37:11 -0500
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: Steve Workman <steve.workman@gmail.com>, www-style@w3.org
On Thu, Oct 15, 2009 at 12:29 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> 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
Yeah, that'd work too. ::after::after is just as unimplemented as
::after::outside, though, so shrug.
> 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.
Hmm, do you think you can mock up some code for that? I'm not sure
quite how that would work to achieve the same styling. (You can see
how it is intended to look by taking the previous code I supplied,
replacing ::after with some div and ::after::outside with a wrapper
div, and replacing the calc() expression with a value like "40px".)
~TJ
Received on Thursday, 15 October 2009 17:38:05 UTC