- From: Lea Verou <lea@w3.org>
- Date: Tue, 26 Mar 2013 23:50:02 +0200
- To: fantasai <fantasai.lists@inkedblade.net>
- Cc: www-style@w3.org
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#lea ✿ http://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 UTC