Advertisement
HTML/CSS

Quick Tip: Create Pure CSS3 Ticket-Like Tags

by

Tags are a familiar feature of many Web 2.0 services, websites and especially blogs. During this tutorial we're going to use CSS3 to create ticket-like tags, without relying on any images.

Here's a quick breakdown of the process:

  • Create the HTML markup.
  • Style the main tags.
  • Style the four corners of the tag.
  • Style the link.
  • Add and style a punched hole in the tag.

Step 1: HTML Header Markup

Let's start by first adding the markup inside the head of our document. We've added two style sheets: "tut.css" and "tickets.css"; You can remove the former whenever you want to implement your own work, but we'll use it in the demo. The style sheet "tickets.css" contains all the styles that will format our tooltips. Here's our document head markup:

    <meta charset="utf-8">
    <title>Pure CSS3 Ticket-like Tags</title>
    <link rel="stylesheet" href="styles/tut.css" />
    <link rel="stylesheet" href="styles/tickets.css" />

Step 2: HTML Tags Markup

Now we need to add the markup for the tags. We've used a division for each tag with class attribute ticket which we'll use to style the tags. Then we have a span with class attribute circle. Finally, you'll see a link with text for the tags. Here's the tags markup (I added four tags as a sample, but you can add as many as you wish):

    <div class="ticket"><span class="circle"></span><a href="#">CSS3</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">HTML5</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">Design</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">Development</a></div>

Step 3: CSS Main Tag

Let's start by styling the main tags div (.ticket). Here we set font styles, set position to relative so that we can absolute position elements inside it (notice it has !important because without this we can't achieve the results we want), background color, floating to left which you can also set to right, then finally some padding and margins for spacing.

.ticket {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 7px 3px;
    margin: 0 5px 5px 0;
}

Our tags should look like this.


Step 4: CSS Top Corners

Now we style the top two corners to make it look like a cutout quarter of a circle. To create this we are going to use pseudo elements after and before. Both pseudo elements have the same styling, the only difference being that after is positioned left whereas before is positioned right.

Start by setting the content value to nothing, position absolute, z-index to 100 or any large positive value, set its position from top, left or right, and zero. Set the border-bottom style and left or right, then finally we set border-radius to 20px (bottom right corner for after and bottom left for before.

To learn more about creating shapes using CSS borders styles you can view this
guide.

.ticket:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 20px 0;
    -webkit-border-radius: 0 0 20px 0;
    border-radius: 0 0 20px 0;
}

.ticket:before {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 0 20px;
    -webkit-border-radius: 0 0 0 20px;
    border-radius: 0 0 0 20px;
}

Our tags should look like this.


Step 5: CSS Links Within our Tags

Within the links we can now create the effect of stitching by utilizing borders and outlines. We style the links with a dashed 1px outline with 40% transparent white color, set the borders with 30% transparent black color, padding to make the stitching look more realistic on the edges, no text decoration, set text color to 50% transparent white (so that we don't have to change the text color every time we change the background color of the tags) and set white space to nowrap. Finally, we set the hover state text color to 50% transparent black.

.ticket a {
    outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}

.ticket a:hover {color: rgba(0,0,0,0.5);}

Our tags should look now like this. Notice that both the cutout corners lie on top of the stitching.


Step 6: CSS Bottom Corners

For the bottom corners we're also going to use pseudo elements after and before but this time within the link. The styling of these two corners is obviously similar to the top corners, we just change the position and border to match their position.

.ticket a:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    bottom: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 0 20px 0 0;
    -webkit-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;
}

.ticket a:before {
    content: "";
    position: absolute !important;
    z-index: 1000;
    bottom: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    border-radius: 20px 0 0 0;
}

Our tags should now look like this.


Step 7: CSS Adding The Punched Hole

In the HTML markup we've already added an empty span element with the class name circle and it's mainly used to create our punched hole effect. We'll use borders and border-radius again to create circles with zero height and width values. We'll set their position to absolute, z-index to a large positive number, 50% from top, 8px from left with a box shadow to make it look more realistic, and finally a top margin of -5px to align it perfectly to the center.

.ticket .circle {
    position: absolute !important;
    z-index: 100;
    border: 5px #fff solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-top: -5px;
    width: 0;
    height: 0;
    top: 50%;
    left: 8px;
    -moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
}

Our tags should look be complete!


Conclusion

My approach for creating these tickets does have a problem. The four corners and the punched hole don't change color if the background color is altered. In other words, they aren't transparent and you need to change their color each time you change the background color.

As for browser compatibility this has been tested to work on Firefox 4.5+, Chrome 13, Opera 11 and IE9.

Your final result should look like the image above. For your end result to look exactly like our demo you should use the styles inside "tut.css", but feel free to add your own adjustments.

I hope that you have all learned some techniques from this CSS tutorial! Share your thoughts below :)

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Complete Websites
    Build a Dynamic Dashboard With ChartJSChartjs retina
    Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. Best of all, it's easy for designers to get up and running. We'll be focusing on the pieces of the library that get you up and running with beautiful and functional charts fast. We will build a mobile-friendly dashboard from start to finish.Read More…