Re: [css-masking][css4-background][css-images] 9-part sliced images (was: [css4-background] 9-part slicing images in background-image)

On Wed, Dec 18, 2013 at 1:01 PM, Dirk Schulze <dschulze@adobe.com> wrote:
> On Dec 18, 2013, at 9:44 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> I believe that things like this should first be attempted as
>> functions, and if they end up too complex (which it probably will), we
>> just give up and try to add it to SVG instead.  The only problem there
>> is that we don't have an easy way to embed SVG in CSS, which is a
>> problem we can and should fix separately.
>
> I interpret your mail that you would like to see the image function before we introduce new properties (introduce in specifications since they are already there).

Right.  The argument's simple; almost anything you might want to do
with an image, you want to be able to do it to images everywhere.
Limiting it to one context via properties (or spreading it piecemeal
by adding N sets of properties one by one) is bad.

> I am generally fine with that but fear that a mockup, the draft and the final implementation would take a lot longer than specifying the implementation we already have. I can be convinced though.
>
> We can start from what we have in 'border-image' and take a look what is needed to take over:
>
> * border-image-source: <image> | none
>
> This on is kind of obvious, we need to reference the <image>: sliced-image(<image> …)
>
> * border-image-slice: [<number> | <percentage>]{1,4} && fill?
>
> This is the important part that defines the regions to slice the image. ‘fill’ removes the middle part. I do not think that we need ‘fill’. sliced-image(<image> [<number> | <percentage>]{1,4} …)

Right, removing the center is a very border-image specific thing.  If
you really want to reproduce it yourself, just make the center of your
image transparent.

> * border-image-width
>
> This defines the regions in which we draw the 9 sliced image parts.
>
> * border-image-outset
>
> How much does the border image area extend the border box. Again, useful but not necessarily helpful within the image function.
>
> * border-image-repeat
>
> Shall a tile be repeated, stretched, repeated as long as it fits, repeated as long as it fits into the border image area but with equal space?
>
> I think it gets clear that we can represent the first two properties in the sliced-image() function. The last three are important for the actual visual output. Currently I am unsure how they can be represent in the image itself. It feels more like this needs to be done by the property using the sliced-image() function.

Depends on how you're envisioning things.  Creating a 9-sliced image
as an abstract thing, only the first two are necessary, and you apply
the other three via some other function at time of use.  But you can
also do the whole thing at once at time of use.  Depends on how much
abstraction you want.  border-image suggests that you don't need to
define the 9-slice as a separate thing, and it's okay to pull them all
together.

~TJ

Received on Wednesday, 18 December 2013 22:34:30 UTC