Re: [css3-background] Corner clipping for images and gradients

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