Better “CSS3 ticket-like tags”

Posted on 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.

  • mstalfoort

    sweet, nicely done

  • http://www.xanthir.com/id/ Tab Atkins

    Ooh, quite nice.

    Someday we’ll have border-radius-style that’ll let us do that type of corners natively, and then you can do the punch-out with a simple radial-gradient background on the tag itself, eliminating the background-color dependency entirely.

    • http://leaverou.me Lea Verou

      No you wouldn’t, cause you’d still need to do the shadow of the hole. But yeah, negative border-radius would help. :)

      • http://xanthir.com Tab Atkins

        The hole’s shadow would be another radial-gradient on a lower background layer.

        • http://leaverou.me Lea Verou

          That’s what I meant when I said “compromise”. The shadow currently is on top of the green, not on top of the white. If you do it like that, it would be over the tag’s background. It would look similar, but not exactly the same.
          I guess you could do the exact same effect with 3 gradients, but that kinda violates DRY, so I’d prefer to compromise.

  • Pingback: CSS3 Ticket-like Tags | PixelPerfect

  • Ian Yates

    Nice, scalable solution Lea! 1-0 :)

  • http://floatboth.com MyFreeWeb

    You’re the boss of gradient magic!

    Funny how your site, which is about web coding, advertises drag-and-drop wordpress-something building :D

    • http://leaverou.me Lea Verou

      Oops, does it? I don’t control which ads come exactly, I just saw that AdPacks in general are decent and unobtrusive, so I accepted to include them.

      • http://floatboth.com MyFreeWeb

        Yeah, I like The Deck/Fusion/Carbon/BuySellAds ads.
        These networks don’t track me (like Google does) yet their “targeting” is much more accurate :-)

  • Pingback: Some links for light reading (18/8/11) | Max Design

  • Fabian

    “although using CSS gradients limits browser support a bit (IE10, Firefox 3.6+, Chrome, Safari 5.1)” – what you’re actually saying is: “although using CSS gradients limits browser support dramatically, as around 45-50% of all internet users worldwide won’t be able to see them”.

    • http://leaverou.me Lea Verou

      Even so, it’s not like they see something broken. The fallback without gradients is quite acceptable imo.

      • Fabian

        Well, for me this result is not acceptable. And I’m not talking about IE7 or IE6 here.

        • http://leaverou.me Lea Verou

          Then don’t use it. That’s why I listed browser support information in the article, so that people can decide for themselves.

    • http://twitter.com/gkatsanos George Katsanos

      almost all of the examples posted here follow the same philosophy. They sometimes are functional only in 1 (one) browser.

      • http://leaverou.me Lea Verou

        You are fundamentally missing the point, both in your comment here and in your pissy June blog post.

        Most of the techniques posted here or in other similar blogs, are not meant to be used in production as-is. They’re meant to be combined with some fallback strategy, unless someone is satisfied with the way they naturally degrade (or they just don’t care). This is left to the reader to decide. Sometimes I do mention ideas for potential fallbacks, sometimes I do not. Proper fallback strategies is knowledge most readers in my target group have anyway, so it would just be boring for them if I discussed fallbacks extensively.

        The objective of this blog is about presenting new experimental techniques, or improvements over existing techniques that I come up with (if it’s something I found elsewhere, it’s always explicitly mentioned). It’s the job of other media to take the new techniques posted by me and others researching CSS/JS and use them in a tutorial along with proper fallbacks. And of course, when I myself write articles for these media, I do mention fallback strategies, because the target group and the purpose of the article, are very different. 

        To cut a long story short, if it bothers you that much that my techniques don’t always work in every browser and that I don’t extensively mention fallbacks, then you’re probably not in my target group. Which is not a bad thing, not everything is for everyone. :)

        • Dries

          I’m very happy with your cutting edge CSS examples Lea. Using not fully supported CSS is also what motivates browser builders to support the specifications better in the next version.

        • http://leaverou.me Lea Verou

          Exactly. Also, browser manufacturers need people using cutting edge stuff & finding bugs, so that they can have a correct implementation ready for when a feature starts getting widespread usage. If everyone sticked to whatever IE8 supports, new specs & implementations of new features would be moving at a very slow pace (if at all), since they need developer feedback to advance.

  • http://playtechnica.com Rg Enzon

    I love it, nice work. Thought that it was Photoshopped, lol.

  • http://www.inktspatten.nl Calliope den Ouden

    Thank you for coding and sharing, very pretty and zen use of code. <3

  • Valduc

    IE10?  Did I sleep a year or two?

  • http://www.designsreview.com/ website feedback

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post

  • Mistero Z

    What is this 4 shit? 

    • http://leaverou.me Lea Verou

      Huh?

  • Alejandro Abarca R

    Amazing! Very nice work out.

  • Florian

    Very nice tutorial, you are a genius! :) But could you expain why you used the rel attribute for marking those tags and not a class?

    • http://leaverou.me Lea Verou

      Thanks!

      rel=”tag” is a microformat: http://microformats.org/wiki/rel-tag
      It has semantic meaning and thus is preferable over a class (although a class is slightly faster).

      • Florian

        Thank you very much! :)

  • http://blogfreakz.com/ Blog Freakz

    Nice you have stumbled an awesome tutorials really cool this will be useful for like a movie template kind of design

  • Pingback: Border radius inset or inverted rounded corners