Re: CSS3 border-image limitation

On Sun, 11 Dec 2005 02:41:31 -0500
fantasai <fantasai.lists@inkedblade.net> wrote:

> Octavio Alvarez Piza wrote:
> > 
> > Hi, all.
> > 
> > I am pretty excited about the new border-image in CSS3. Reading through
> > the Working Draft looks like it only works for solid colors in both, the
> > outer and inner background. If either background is defined as
> > "background: uri('file.png')", there would be a need for transparency in
> > the border images, but how to tell the user agent if the transparency
> > belongs to which background?
> > 
> > Also, if both backgrounds are uri('outer.png') and uri('inner.png'), how
> > would the user agent know what pixels of the image should be
> > outer-transparent and which ones should be inner-transparent?
> 
> I'm not sure I understand your question, but the backgrounds and border
> images are layered, one on top of the other. When you layer images, if
> both pixels are transparent, then what is underneath will show through.
> If the top one is transparent, the bottom one will show through. If the
> top one is solid, then that is the pixel that is shown.
> 
> Does that answer your question?

Not quite. I prepared a more graphical example.

The following picture

http://alvarezp.ods.org/extra/www-style/css3-border.png

... shows how the output for the following code:

<div id="outer" style="background: uri('spirals.png');">
  <div id="inner" style="background: uri('gradient.png') 90% 10%; border-image: uri('star-shape.png');">
    <p>This is the &lt;p>. The background for this paragraph is:</p>
    <p>background: uri('gradient.png');</p>
  </div>
</div>

Both, div.outer and div.inner have images for background. Therefore, the
specified border "star-shape.png" should have only the delimiting lines that
make the star shape. Authors should not need to paint the background in the
image because they would not be able to predict the exact position the user
agent will use to render the div.inner.

The red dotted square shows what the border-top-left-image area should be.
The problem relies in how to tell the user agent that below and right of the
lines, the inner part should be transparent to the div.inner background but
the upper left part of the image should be transparent to the div.outer
background.

Another view of this problem would be trying to implement "border-style: wave"
using border-image.

I don't know if I managed to explain the problem.

Octavio.

Received on Monday, 12 December 2005 02:23:24 UTC