Re: CSS3 border-image limitation

border-image is implemented in the latest (not-yet-released) Safari,  
so you can actually try it out.

http://nightly.webkit.org/

dave

On Dec 11, 2005, at 6:04 PM, Octavio Alvarez Piza wrote:

>
> 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 06:49:24 UTC