I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution which can allow you use a pattern as a background for the containing block.
The following markup is pretty similar with Joshua Hibbert’s solution. There’s nothing to change or to improve here. At first sight you may think there’s some extra markup in there but we’ll actually need everything below in order to be able to create four corners using CSS pseudo-elements.
[class*='tucked-corners-'] advanced selector will select only the elements that have the string
tucked-corners- anywhere within the
class attribute value.
As you already know, IE9 doesn’t support CSS3 gradients but it does supports the
box-shadow property. This caused the situation below:
My “workaround” was to use the following IE9 CSS hack to hide the pseudos shadows. So, unfortunately you will not see any tucked corner on IE9.
With pros and cons, this is an alternative to keep in mind when you’re using tucked corners boxes for your web designs. The solution I presented you in this article will allow you to use this effect even when you’re using a pattern as background for the containing block in which our boxes live.
Also, regarding the idea behind this article, I got used to the fact that sometimes, in unusual moments, random CSS tricks pop up into my mind. Nevertheless, I like to think that I’m not the only one to whom things like that happens :)
- Gene Locklin’s tucked corners experiment.
- Single element tucked corners experiment by Joshua Hibbert.
The gradient stops for the four tucked corners are
315deg as the
bottom left, bottom right, top right, top left.
Since version 16.0, Firefox supports a lot of unprefixed CSS3 properties, including gradients. The thing is that at a point, their gradient algorithm has changed as the
-moz- prefixed and unprefixed declarations for the gradient background deliver different results.
My temporary solution is to remove the unprefixed gradient declaration, I’ll come back on this matter. Meanwhile, do you have any thoughts? :)
CSS3 patterned buttons
CSS diagonal borders still not rendering properly on Firefox