I posted a Sass mixin for doing this here: https://gist.github.com/2645575
CSS arrow please
41–50 of 76 posts
Re: CSS arrow please
#42This 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.
Here's a quick hack for a CSS arrow that casts a shadow. 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.
Yes, 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 :)
Re: CSS arrow please
#43Browser support? Any idea if this works in IE7/8?
Re: CSS arrow please
#44Browser support? Any idea if this works in IE7/8?
No IE7/8 support because it doesn't do CSS generated content or the :before and :after pseudo-elements.
Re: CSS arrow please
#45I've also just converted to LessCSS mixin. Free for your use. (I added a 6th argument so that you can change the class name that gets generated). Clickable: https://gist.github.com/2644661 .arrowgasm(@position: top, @size : "4px", @background-color : #88b7d5, @border-width: "2px", @border-color : #c2e1f5, @arrowClass : "arrow_box"){ (~".@{arrowClass}") { position: relative; background: @background-color; border: @siz…
You might also want to consider explicitly setting the box-sizing to content-box. I know that is the default, but if someone attempted to use this and had already adjusted the box-sizing to something else it would not work.
Re: CSS arrow please
#46Earlier quoted context omitted.
Here's a quick hack for a CSS arrow that casts a shadow. 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.
Yes, 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 :)
As in the elsewhere linked CSS Hexagon tutorial (see last comment on 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.
Re: CSS arrow please
#47Earlier quoted context omitted.
css, sass and scss rocks. all those ideas should have their place in css3 or later.
Check out stylus, it's pretty neat too: http://learnboost.github.com/stylus/docs/js.html My favorite features: - auto-insert vendor prefixes, even IE filters (no need for css3 'mixins', which are most of the mixins the avg dev will need) - can even rasterize linear-gradient backgrounds and serve as image for more pre-css3 browser support. This one I haven't tested but it sounds awesome Edit: paragraph formatting
Yeah I actually prefer stylus to sass personally, sass is just more popular (and rails default) and less magical for people that don't work with css as often.
My favorite feature actually is that it can grab properties out of parents, as demonstrated here: https://gist.github.com/2563746
Re: CSS arrow please
#48For those who enjoy sass: =triangle($direction: up, $size: 10px, $color: #000) width: 0 height: 0 @if $direction == up border-left: $size solid transparent border-right: $size solid transparent border-bottom: $size solid $color @else if $direction == down border-left: $size solid transparent border-right: $size solid transparent border-top: $size solid $color @else if $direction == left border-top: $size solid transp…
While that's cool, it's not quite what the OP achieves. Using this mixin will turn whatever you apply it to into a solid-color triangle with the passed-in options. The triangle will need to be its own element. OP adds two triangles to whatever it is applied to, one for the border color, another to cover it up with the background color. And it doesn't require any additional elements... it just adds these to whatever y…
You're totally right. I have a mixin that makes a bubble like that too, but it's built from a few different mixins that each build on each other and I didn't want to post a buttload of code in a comment. You can see an example of how mine looks if you hit this page (http://roots.carrotbeta.com/docs/) and scroll down to the UI section
Re: CSS arrow please
#49Earlier quoted context omitted.
This and other utility and howto sites are very helpful, agreed. BTW, to hone your CSS skills, try dropping into Firebug or Chrome's developer tools and just playing around -- very easy way to learn and get CSS stuff done. The CSS panel lets you change rules and values and see the effects immediately. I know in Chrome I use the up/down arrows on a value to slide objects and spacing around on the screen regularly. The…
Yup, I suck at CSS too. I still think there's something fundamentally wrong with it, but that's probably more a marker on my own ignorance than anything. Anyway, I do have fun playing around with the FF style tools. It is quite cool and informative.
I personally don't have an issue with CSS. The issue for me is the inconsistent implementations across browsers. That has been my real pain point, and it continues to keep me away from really learning CSS.
Re: CSS arrow please
#50Thank you sir! This might come in handy sometimes.