Better “CSS3 ticket-like tags”

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

  • 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.

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

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

        • 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 🙂

  • You’re the boss of gradient magic!

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

    • 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.

      • 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”.

    • 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.

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

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

      • 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.

        • 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.

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

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

  • Valduc

    IE10?  Did I sleep a year or two?

  • 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? 

  • 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?

    • Thanks!

      rel=”tag” is a microformat:
      It has semantic meaning and thus is preferable over a class (although a class is slightly faster).

      • Florian

        Thank you very much! 🙂

  • 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()

  • Pingback: All the way up remix()

  • Pingback: click()

  • Pingback: Anna University Notes()

  • Pingback: Daftar Agen Bola Terpercaya()

  • Pingback: Term Life Insurance()

  • Pingback: Facebook Live()

  • Pingback: anabolic supplements store()

  • Pingback:

  • Pingback: Dragon Ball Super Episode 46 English Sub()

  • Pingback: bespoke furniture essex()

  • Pingback: SOURCE()

  • Pingback: best steroid for weight loss()

  • Pingback: life insurance claim lawyer attorney law firm()

  • Pingback: Google()

  • Pingback: Fenster und Turen()

  • Pingback: plovdiv()

  • Pingback: iPhone repair()

  • Pingback: military boots for desert deployments()

  • Pingback: e-mentoring()

  • Pingback: SEO services in Lahore()

  • Pingback: Convert here for free()

  • Pingback: Download()

  • Pingback: Convert your video files here()

  • Pingback: create an app()

  • Pingback: Play Games Free Online()

  • Pingback: book of ra free game()

  • Pingback: Divorce Law Firm for Men()

  • Pingback: Google()

  • Pingback: satta matka()

  • Pingback: home page()

  • Pingback: Lava building products()

  • Pingback: usmc combat techniques()

  • Pingback: About- AtlantaPiano()

  • Pingback: youtubemp3download3- Youtube to mp3 converter()

  • Pingback: computer repair omaha()

  • Pingback: Pinganillo()

  • Pingback: como fazer retrospectiva()

  • Pingback: èíôî()

  • Pingback: Funny Videos()

  • Pingback: SEO services in Lahore()

  • Pingback: personalised fans()

  • Pingback: cork coasters()

  • Pingback: Jual Solarcell 50wp 80 wp 100 wp 200wp()

  • Pingback: Outdoor wood fired oven mobile Pizza Party()

  • Pingback: Cash for cars()

  • Pingback: 受注管理システム()

  • Pingback: here()

  • Pingback: free legitimate work at home jobs()

  • Pingback: Turen()

  • Pingback: Fenster und Turen()

  • Pingback: SATTA MATKA()

  • Pingback: live in care()