4 ms·
This is the way to do it, until the graphics guy wants the box to have a drop shadow. The pseudo elements' shadow is square, so your options are either to hope
by oe 14y ago
This is the way to do it, until the graphics guy wants the box to have a drop shadow. The pseudo elements' shadow is square, so your options are either to hope that nobody notices that the arrow doesn't have a shadow (like in this example), or to use an image for the arrow.
- kapowaz 14y agoThe gathered troops here were all cooing at this demo until the drop shadow was noticed as absent from the arrow. A real shame (although obviously the box-shadow being bounded by the rectangle makes it impossible to do this way). Maybe it's time to propose a mask-shadow property?
- cfontes 14y agoThis made me to the sky and back to hell in one second. I need to do exactly this in a google maps infobox, BUT with the dawn shadow... :( back to images I guess.
- mcsheffrey 14y agoHere's a method I use for getting box-shadows on the arrow http://tinkerbin.com/cRhPGwmh http://tinkerbin.com/cRhPGwmh
- cfontes 14y agoThanks, but I cannot see the shadow in it.
- shawnc 14y agoYou know, not having a shadow on the Arrow (if arrow is on bottom) kind looks like it's popping off the page then, at a slight angle. I don't mind it - tho obviously not for every use.
- bgarbiak 14y agoHere's a quick hack for a CSS arrow that casts a shadow. http://jsfiddle.net/BKtnn/1/ http://jsfiddle.net/BKtnn/1/ Adding border is a bit problematic but I'm sure solution could be found, just a question of few more minutes. Also, it should be doable in IE with filters.
- oe 14y agoYes, the designer in this project naturally wanted both a border and a box shadow. I don't know how to accomplish that in CSS without using additional elements. I'm currently using strategy #1, hoping that nobody notices :)
- pbhjpbhj 14y agoAs in the elsewhere linked CSS Hexagon tutorial (see last comment on http://jtauber.github.com/articles/css-hexagon.html http://jtauber.github.com/articles/css-hexagon.html) it's noted that there's a hexagon character. Well there are also triangle characters - which you could apply a [or multiple] shadow[s] to.
- btipling 14y agoThis solution doesn't work. This has a overlapping shadow issue right around where the arrow pops out of the box. It doesn't look as obvious on that tiny shadow you have, on wider shadows it is glaringly obvious and looks terrible.
- golden_apples 14y agoThat looks surprisingly good for me in Firefox, but from my experiments making these tricks work in production, browser standardization is a long way from the point where we can do this at arbitrary sizes in the real world. The problem, more than anything, is the way these css-only triangles get aliased. Since they're a side-effect of rendering borders, they never get properly anti-aliased the way fonts and shape edges do, and as a result the edges end up jagged at certain sizes and color combinations.
- lnanek 14y agoThis sort of thing used to happen a lot at an Android app company I worked for. It would be easier and cleaner to implement something like a button background in XML, but it wouldn't look nearly as good as a button produced using real graphics. It wasn't just looks either, they were less usable in that case. If a button doesn't look 3D due to being limited to a simple linear gradient or something then users are less likely to click it, and we did have user testing reports of people mistaking the biggest buttons that we wanted people to click most for section titles. So even if a shadow can be pulled off, what else is missing that a raster graphics solution would include. ;/