Quick Tip: Create Pure CSS3 Ticket-Like Tags

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.

1
2	.ticket .circle {
3	position: absolute !important;
4	z-index: 100;
5	border: 5px #fff solid;
6	-moz-border-radius: 10px;
7	-webkit-border-radius: 10px;
8	border-radius: 10px;
9	margin-top: -5px;
10	width: 0;
11	height: 0;
12	top: 50%;
13	left: 8px;
14	-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
15	0 1px 0 rgba(255,255,255,0.3);
16	-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
17	0 1px 0 rgba(255,255,255,0.3);
18	box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
19	0 1px 0 rgba(255,255,255,0.3);
20	}

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 :)