61–70 of 76 posts
Earlier quoted context omitted.
In IE7 you'd just have a box without the triangle, no? Isn't that graceful degradation?
Nope, you don't have a box at all (at least on this webpage). Nor the left-side box. It looks awful on IE7 actually, the footer also degrades un-gracefully.
Earlier quoted context omitted.
In IE7 you'd just have a box without the triangle, no? Isn't that graceful degradation?
Nope, you don't have a box at all (at least on this webpage). Nor the left-side box. It looks awful on IE7 actually, the footer also degrades un-gracefully.
Earlier quoted context omitted.
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.
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.
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.
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.
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.
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.
Earlier quoted context omitted.
I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?
Take a look at this: http://jtauber.github.com/articles/css-hexagon.html
I'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.
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.
Here's a method I use for getting box-shadows on the arrow http://tinkerbin.com/cRhPGwmh
Earlier 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 think the browser inconsistencies are as frustrating as they are because doing seemingly "simple" things in CSS requires using advanced CSS features in boundary-pushing ways (this wonderful arrow box app is a perfect example). Browser support has to be EXCELLENT before certain simple layout things are even possible. Imagine a CSS that supported things like "vertical-align: center". That's a CSS that wouldn't NEED to have its boundaries pushed to the limits and the rough edges of browsers wouldn't rankle nearly so much.
It never ceases to amaze me how quickly people jump to defend CSS as if any criticisms imply that the author thinks we'd be better off back in the days of deeply nested tables. But the sad fact of the matter is that some things really were easier and more dependable (and in some cases, WAY more so) with tables.