Re: [css3-background] A few points about the current module

Bert Bos wrote:

>On Thursday 04 August 2005 02:22, Kelly Miller wrote:
>
>  
>
>>     Every time I re-read information about multiple backgrounds in
>>CSS3, I notice that it is repeatedly stated that multiple backgrounds
>>are best overlapped.  But doesn't this seem like a really limiting
>>way of doing multiple backgrounds?  What if I want to put images on
>>the far left and far right sides of the container, plus one down the
>>middle? The current system either forces the use of pixels for
>>sizing, or assumes that the designer will overlap images.  What if
>>these images are PNG's with transparent sections, or SVG's?  Then
>>overlapping breaks the images and there is no way of avoiding it.<br>
>>     Instead of this really limiting system, I suggest allowing the
>>user to use the rect() and inset-rect() structures as values in
>>background-position, which could then be used as bounding boxes for
>>the image behavior.  Images could then be tiled in the bounding
>>boxes, without danger of overlapping destroying transparency
>>effects.  They would also allow the users to position background
>>images with respect to the right and bottom edges of the container,
>>something which otherwise could only be done with calc().<br>
>>    
>>
>
>That's an interesting idea and the syntax wouldn't become much more 
>complicated than it is now. But on the other hand, I think most of the 
>use cases will involve putting images along the edges to create the 
>impression of a frame. And for that there is the 'border-image' 
>property. 'Border-image' has the nice feature that it creates nine 
>areas while only requiring the designer to draw a single image, which 
>is also more efficient in download time.
>
>Maybe there are cases where 'border-image' isn't enough and you also 
>can't achieve the effect you want with overlapping images, but are they 
>important enough?
>
>The WG has looked at examples of backgrounds in print and tried to guess 
>what the designer of those backgrounds would have done at other sizes. 
>Maybe an interesting exercise would be that people on this mailing list 
>make scans of backgrounds that they find in magazines, books or on the 
>Web, put them online and post the URL here. And then everybody else can 
>try to translate that background to CSS, while trying to express how 
>that background would adapt to differently sized boxes.
>
It is true that border-image covers a large number of the situations 
where more advanced background-position would help, but there are also 
situations where this would be useful.  Probably the most obvious 
example is an irregular background pattern.  Normally, such background 
patterns are done by forcing them into square/rectangular patterns, and 
this can lead to larger than normal images being used (especially in 
situations where most of the patterns are small repeatable patterns and 
only one segment is really large).  For example, one could use this 
syntax to create the illusion of smoothly curving background images on 
other background images, which could be done using border-image as well, 
but only in situations where the design would easily fit into the 
border-image mold.  Border-image tends to restrict patterns, since you 
can't use two different sized segments for opposing sides of the 
border-image.  This syntax would be mainly useful in situations where 
border-image is too limiting and a more robust solution is necessary.  
It is true that for the most part, these situations are rare; but I've 
seen them myself.

Also, the other problem with border-image is that you can't make text 
flow over the images in border-image.  With this syntax, you could.  
Therefore, even situations where border-image appears to be the 
appropriate choice, this may be a better choice.  Obviously, 
border-image is more appropriate in situations where you'd want to use 
padding to keep the text off the outside graphics, but if you don't, 
then you have to use roundabout methods like absolute positioning and 
such to create the illusion of no padding (see 
http://www.stunicholls.myby.co.uk/boxes/borderwrite.html ).

Also, another potential use of this technique would be to allow each box 
to have a color setting; thus allowing the use of multiple 
background-color settings in one tag.  Once again, the only use of this 
kind of thing would be to speed up rendering (if you can use CSS color, 
you don't have to use an image, and that'll save download time), and may 
not be used very much, but it is worth considering.

-- 
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!

Please avoid sending me Word or PowerPoint attachments.
See http://www.gnu.org/philosophy/no-word-attachments.html

Received on Saturday, 13 August 2005 00:13:12 UTC