W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: [css4-background] use cases for 'border-corner-shape'?

From: Lea Verou <lea@w3.org>
Date: Tue, 26 Mar 2013 23:50:02 +0200
Cc: www-style@w3.org
Message-Id: <371F9A48-6A94-4264-97C1-2EA84D1BB15E@w3.org>
To: fantasai <fantasai.lists@inkedblade.net>
Good examples fantasai!

Here are a couple more examples on real websites:
http://g2geogeske.com/
http://www.condorviajes.com/
http://www.magnoliabakery.com/
http://www.estadeboda.com/proveedores/
https://twitter.com/mgiannopoulos/status/316085504993021952/photo/1
https://twitter.com/jpscaletti/status/315962561445101568/photo/1

Also, all the following common effects would be significantly simplified, if not completely solved:
- Ribbons, like the one I used in the top left corner of http://docs.webplatform.org/wiki/css/properties/border-radius
- Page curl effects, like the one used in http://cssconf.com
- Triangles, rhombii, trapezoids, hexagons, octagons, crosses, arrows etc. Authors go to great lengths to make CSS triangles and trapezoids with borders, and this is all over the web.
- Tucked corners effects, like the ones used in http://en.gravatar.com/
- Arrow-style buttons, similar to back buttons in iOS
- Many people mentioned photo galleries as a common use case they had for such corners

Using border-images for these is a pain, because:
a) The hit-testing area doesn’t change, as fantasai pointed out
b) box-shadow doesn’t follow them
c) You need to hardcode borders in the image, as you can’t have additional borders

Lea Verou
W3C developer relations
http://w3.org/people/all#leahttp://lea.verou.me ✿ @leaverou






On Mar 26, 2013, at 23:18, fantasai wrote:

> On 03/24/2013 03:50 PM, Lea Verou wrote:
>> I’ll try to find some additional good examples.
>> 
>> Elika, since you added the property, maybe you had some good existing use cases in mind?
> 
> The major one for 'bevel' was to allow the shapes that are used in certain
> kinds of breadcrumb trails and tabs: some styles uses slanted tabs rather
> than curved-corner ones, and I've seen breadcrumb trails that look like
>  ____________________
> |     \       \       \
> |______\_______\_______\
> 
> or
>   ____________________
>  | ... \  ... \  ...  \
>  |_____/______/_______/
> 
> (Earlier designs of the Launchpad bug tracker did this, for example.)
> 
> Another use case was to give shapes that would commonly allow the hit-testing
> (and background-painting) area to more closely approximate fancy-cornered
> border images.
> 
> ~fantasai
> 
Received on Tuesday, 26 March 2013 21:50:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 21:50:21 GMT