[css3-background] Clipping of border images at the outline of an element (was: Re: Corner clipping for images and gradients)

On 4 January 2015 at 00:38, Lea Verou <lea@verou.me> wrote:

> Not sure how relevant this is to the discussion you’re having, but there
> is a border-clip property planned, in Backgrounds & Borders 4 [1], though
> the syntax and behavior is still under discussion, so suggestions are
> welcome.
>

I saw that after my last mail. Looks like 'border-clip' and 'border-limit'
there are very similar and allow to split the borders.

The behavior discussed here is to allow the border images being clipped at
the outline of the element. See the image attached to
http://lists.w3.org/Archives/Public/www-style/2014Feb/0398.html or the live
example attached to
http://lists.w3.org/Archives/Public/www-style/2014Feb/0391.html.

One example shown there covers gradients not following the outline. See
this example:

data:text/html,<style>div{width:200px;height:200px;background:black;border-style:solid;border-width:5px;border-radius:50px;border-image:linear-gradient(yellow,red)
5;}</style><div></div>

This may actually be a different issue as it's just related to gradients
used as border images and rather about outlines than about clipping.
Though it is surely an unexpected behavior for most authors.

Sebastian



> On Dec 30, 2014, at 14:40, Sebastian Zartner <sebastianzartner@gmail.com>
> wrote:
>
> Sorry for the late reply on this.
>
> On 11 February 2014 at 17:56, Brad Kemper <brad.kemper@gmail.com> wrote:
>
>> On Feb 10, 2014, at 4:27 PM, Sebastian Zartner <
>> sebastianzartner@gmail.com> wrote:
>>
>> <borderImage.zip>
>>>
>>>
>>> A picture or link that I didn't gave to view source on would be better,
>>> since I am reading this on my iPhone.
>>>
>>
>> Sure, here it is.
>>
>> Sebastian
>>
>> <borderImage.png>
>>
>>
>> Thanks. For the fourth example, where the border can be seen through
>> under the border image, I recall an earlier version of the spec had this,
>> or maybe we just discussed whether or not it should, and the WG decided it
>> would be better to have the border replaced by the border image. This, the
>> spec has this:
>>
>> If the value is ‘none’ or if the image cannot be displayed (or the
>> property doesn't apply), the border styles will be used; *otherwise the
>> element's borders are invisible* and the border image is drawn as
>> described in the sections below.
>>
>> Thanks for pointing that out. Though I can't find a decision on that in
> the archives. Anyway, that should be discussed separately.
>
> For the last example, I still question if this use case is important or
>> likely enough to warrant a whole new property, rather than just a new
>> zero+behavior value for 'border-image-outset'. If an author wants that
>> look, I would think he would just create the graphic that way. Unlike the
>> corner clipping of gradients, that seems like an unlikely edge case.
>>
>
> The last example may be doable with creating the graphic, so that it
> follows the border shape, though it's tricky to get the image borders to
> follow the radius. And this will get worse when different corner shapes are
> allowed[1].
>
> That example also shows how clipping can happen independently from the
> outset distances. If you insist that this can be done changing the syntax
> of border-image-outset, I suggest it should be added as optional value,
> i.e.:
>
> Value: [ <length> | <number> ]{1,4} clip?
>
> Sebastian
>
> [1] http://dev.w3.org/csswg/css-backgrounds-4/#corner-shaping
>
>
>