[css3-background] Background-attachment and a new suggestion

G'day y'all,

In search of a way to perform a certain web design task, I stumbled
upon my first show-stopper with CSS. (Little disclaimer on beforehand:
it's also impossible with any other technique.) What I was looking for
is basically this: a background-attachment that mimics "fixed" except
for the bit where it stays on the same place relative to the viewport.
Looking for it in the CSS3 Module I only got the new addition,
"local".[1]
     One issue I have with that, namely that this is one of the
hardest parts of the spec in terms of understandability. I'm still not
sure how the three differ in CSS3, whereas I do get CSS2's
description. That's "just a minor issue" for now, I guess, 'cause
we're still in Working Draft.
     Now, my reason to mail is stated above, but I shall give an
example for the sake of it.

 <ul id="nav">
     <li id="home"><a>Home</a></li>
     <li id="archives"><a>Archives</a></li>
 </ul>

#nav { background: url(normal.png) }
#nav li a { background: url(hover.png) } /* Let's ignore the
preloading jokery for now with all stuff in one image, y'know, all
that */
#nav li#home a { width: 6em }
#nav li#archives a { width: 10em; background-position: 0 -10em }

Yeah. Way too much code. This also only works if the list items are
left- or right-aligned. I want something like...

 <ul id="nav">
     <li><a>Home</a></li>
     <li><a>Archives</a></li>
 </ul>

#nav li a:hover { background-image: url(hover.png);
background-attachment: anchored }

"anchored" would be the new value I suggest, and the only practical
issues I can imagine are "should it "anchor" to all sorts of parent
elements or just on positioned ones" (and yes, that would make
background-attachment dependent of position, which would not be too
good IMO) and "what about more children/parents". Let's see some logic
here, for I'm not sure if it's plausible and within any scope at all.

P.S.: I am well aware that some stuff could be done with
semi-transparent imagery, but that's just one of the many
possibilities.


1: http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-attachment
-- 
Cheers,
Rob.

http://zooibaai.nl/ | http://digital-proof.org/
http://design.zooibaai.nl/ | More soon...

Received on Monday, 18 July 2005 20:55:33 UTC