This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
Today I stumbled upon this tutorial, which from the screenshot, looked very interesting. So, I read on, and to my horror I noticed the author suggesting some questionable practices, the worst of which was using 3 HTML elements for every tag, including nonsense markup like <span class="circle"></span>.
So, I thought I’d take a chance at trying to recreate this effect without any extra markup. And it turned out to be quite easy, although using CSS gradients limits browser support a bit (IE10, Firefox 3.6+, Chrome, Safari 5.1).
They have the same disadvantage as the originals: They depend on the background color. However, unlike the originals, they come at less code, they’re scalable without changing a million values (as shown in the “bigger” section) and of course, no extra markup.
You can see the results in the fiddle below:
Disclaimer: webdesign tuts+ occasionally has some nice tutorials. I didn’t write this post to attack them in any way.
This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
Lea Verou | Sciencx (2011-08-15T00:00:00+00:00) Better “CSS3 ticket-like tags”. Retrieved from https://www.scien.cx/2011/08/15/better-css3-ticket-like-tags/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.