Re: [CSS3] border-radius, border-image and drawing order.

Brad Kemper wrote:
> 
> 
> Sent from my iPhone

Brad, just in case: this signature could be removed by
clearing the field:
  Settings -> Mail, Contacts, Calendar -> Signature
on your iPhone.

> 
> On Aug 15, 2009, at 1:28 PM, Andrew Fedoniouk 
> <news@terrainformatica.com> wrote:
> 
>> Tab Atkins Jr. wrote:
>>> On Sat, Aug 15, 2009 at 2:33 PM, Andrew
>>> Fedoniouk<news@terrainformatica.com> wrote:
>>>> Consider following style and markup:
>>>>
>>>> div
>>>>   {
>>>>     width:100px; height:100px;
>>>>     border-width:4px;
>>>>     border-color:red;
>>>>     border-radius:50%; /* that means border is a
>>>>                           perfect circle */
>>>>     border-style:solid;
>>>>   }
>>>>
>>>> <div>Some text</div>
>>>>
>>>> Shall border be drawn on top of the text or behind it?
>>>> That is the question.
>>>>
>>>> If border is a part of background as current spec implies
>>>> then text should be drawn on top of the border.
>>> Borders are drawn above the background, but under the text.
>>>> But what about border-image?
>>>> If it is drawn behind the content layer then
>>>> this border-image makes almost no practical sense.
>>> Border-image is drawn on the same layer as borders.  Borders are
>>> hidden while a border-image is in effect.
>>> Could you elaborate on why the border-image being drawn below text is
>>> a problem?  Is this also a problem for normal borders?
>>
>> Imagine that text in the third column here:
>> http://www.bradclicks.com/cssplay/border-image/Alladins_Lamp_2.png
>> will contain couple of more lines. For now they will be drawn on top
>> of the lamp that is unexpected.
> 
> Not if I put enough padding at the bottom to prevent unwanted overlap. 
> Not all border-images would have such a large pronounced picture as 
> that, of course. Patterns, simple stretched lines, etc. would probably 
> be more common, with more interesting things happening on the corners 
> than on one side. Don't get too hung up on one particular sample. There 
> are, and will be, more.

I think that if we would have following:

1) background-image & friends extended by sectioning attribute
    similar to the one in border-image.

2) foreground-image & friends similar to the background-image & Co.
    foreground-image is getting drawn on top of content layer of the
    element.

3) that border-image removed completely.

then it will bring us more benefits as you may specify that
some of elements of the border go behind the content some go on top of 
it. In this case you do not need multiple background images
so each part can be atomically addressable in redefined in
cascading SS. In cases when you need multiple background images
you will make them sectioned that will improve loading speed, etc.

Having this foreground feature and sectioning for both images
for years we can prove that ability to compose borders and
other decorations in multiple layers is very useful and powerful.

>>> Another benefit of the current border-image proposal is that it allows
>>> you to paint outside of the actual box geometry.  The benefits of this
>>> are clearly explain with a great example over at Brad's site:
>>> http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html 
>>>
>>
>> "to paint outside of the actual box geometry"
>>
>> That simply means that borders of the element are drawn on top of its 
>> siblings but not on top of its children. That makes the logic even worse.
> 
> On top of previous children, but you can use z-axis to control that. 
> Remember that you are declaring the border image in the same CSS where 
> you can also control margin, etc. Obviously if you go outside the box, 
> you'd want to consider how doing so may impact the neighbors.
> 

I am not sure I understand you here.

Say you have

div
{
   position:relative;
   border-image: something-that-lays-outside-and-inside-border-box;
}

By using position:relative; you can draw border on top of other elements
but there is *no* way for you to draw borders of the element on top of 
its children. And there is no clipping of content area by such image 
borders.

As I said the only option for the author to move such border/decoration
explicitly to the foreground layer.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Saturday, 15 August 2009 22:45:57 UTC