- From: Lea Verou <lea@w3.org>
- Date: Sun, 24 Mar 2013 23:14:09 +0200
- To: "L. David Baron" <dbaron@dbaron.org>
- Cc: www-style@w3.org
Googling these is pretty hard, as everybody uses different names to refer to them. Nevertheless, here are a few tutorials and questions from struggling authors about how to replicate these effects: bevel -------- http://stackoverflow.com/questions/6474168/how-do-i-make-corners-angled-like-this-using-css http://stackoverflow.com/questions/10349867/how-do-i-bevel-the-corners-of-an-element http://stackoverflow.com/questions/14093619/make-cut-off-corners-with-a-border http://stackoverflow.com/questions/8854457/css-only-cross-browser-clipped-corners http://stackoverflow.com/questions/9300692/how-to-make-a-rounded-corner-rectangle-with-a-cut-corner-using-css http://stackoverflow.com/questions/2767150/how-to-give-transparent-hexagon-angle-at-the-last-li-only http://stackoverflow.com/questions/8986545/css3-one-of-the-div-corners-should-inwards http://stackoverflow.com/questions/7059597/slanted-corner-on-css-box http://stackoverflow.com/questions/14418309/clipping-or-chamfering-corners-of-image-to-see-background http://stackoverflow.com/questions/7324722/cut-corners-using-css http://stackoverflow.com/questions/13545192/create-border-with-two-cut-off-corners http://stackoverflow.com/questions/10196072/css-border-shape-how-to-cut-off-rectangle-right-upper-corner http://stackoverflow.com/questions/11791947/styling-a-box-shadowed-element-with-cutoff http://stackoverflow.com/questions/15148421/div-background-shadow-to-fit-custom-css-shape http://stackoverflow.com/questions/13144470/css-cut-corner-on-all-four-edges http://www.affiliates4u.com/forums/programming/43659-css-corner-cut-offs.html http://www.red-team-design.com/css3-tabs-with-beveled-corners http://www.wahnbriefe.net/web-design/css-cut-off-corners http://inovex.ca/index.php/how-to-cut-corners-without-cutting-corners/ http://clubmate.fi/css-beveled-corners/ scoop -------- http://stackoverflow.com/questions/12447865/create-concave-corners-in-css http://stackoverflow.com/questions/11033615/inset-border-radius-with-css3 http://stackoverflow.com/questions/4012085/is-there-any-way-to-invert-a-rounded-corner-in-css http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-create-pure-css3-ticket-like-tags/ http://www.local-pc-guy.com/web-dev/border-radius-inset-or-inverted-rounded-corners http://www.sitepoint.com/forums/showthread.php?659794-inverse-rounded-corners https://forrst.com/posts/Inverted_Rounded_Corner_CSS-ubU http://forums.phpfreaks.com/topic/251857-css-inverted-round-corners/ http://www.talkgraphics.com/showthread.php?37778-Inverted-Rounded-Corner-Rectangles-(Incut-Rectangles) http://www.webreference.com/programming/css_borders/index.html http://rajudasa.blogspot.gr/2009/10/rounded-corner-box-model-and.html notch -------- http://stackoverflow.com/questions/9997393/css-clip-corners http://stackoverflow.com/questions/12683284/how-to-make-rounded-corner-cut-out-using-css http://forums.mozillazine.org/viewtopic.php?f=25&t=2647553 Multiple ------------ http://jquery.malsup.com/corner/ http://www.cssplay.co.uk/boxes/krazy.html http://battletech.hopto.org/html_tutorials/rounded_css_borders/more_styles.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0078.html Also, read the comments here: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ The response by the community on twitter to the app I posted today proves even more how badly this is needed. If the above aren’t enough, I can find more. Especially for `bevel` the number of examples is overwhelming. Not to mention the degenerate use cases of triangles, hexagons, rhombii etc it could solve and the use cases all these wouldn’t solve completely, but would make much easier (e.g. folded corner effects, tucked corners etc). No matter how much we believe this should be done with border-image, the reality is authors don’t want to use images (vector or not) if they can avoid it and will do all kinds of crazy hacks to avoid images, as demonstrated by several of the links above. Lea Verou W3C developer relations http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou On Mar 24, 2013, at 21:14, L. David Baron wrote: > http://dev.w3.org/csswg/css4-background/#border-corner-shape appears > to me to be an example of a feature that's addressing a problem that > we don't have -- or at least that we don't have enough to be worth > adding such a feature. I think it should be removed. > > In particular, if there were demand for the bevel | curve | notch > values, we'd be seeing authors using the equivalents of such values > on significant numbers of Web sites. So before agreeing to accept > this new feature, I'd like to see examples of Web sites that are > doing what these values would do. Not something similar to what > these values would do, but exactly what these values would do, or at > least close enough that the author wouldn't care about the > difference. > > -David > > -- > 𝄞 L. David Baron http://dbaron.org/ 𝄂 > 𝄢 Mozilla http://www.mozilla.org/ 𝄂 >
Received on Sunday, 24 March 2013 21:14:30 UTC