There have been some great resources on creating tag-style elements with CSS, I want to take them a step further and show you how to create a tag-style element that can handle a gradient or background-image, without degrading on the arrow portion. I’m using Orman Clark’s Tagtastic Tag Cloud as a sample.

The problem

With the traditional method, you draw the base of your tag using an HTML element, with the arrow and circle coming from pseudo-elements. It works well enough for a basic solution, but as soon as you get into shading and gradients, the method fails because the arrow portion can only handle a solid color (which obviously wont match well with any gradient or shading). Take a look at how the usual example works:

The Solution

To create a tag that maintains a fluid gradient, we’ll create an inverted arrow, and cover that portion of the tag with it. The concept is simple. Take a look at the diagram below, and then we'll break it down in CSS.

Tag Element

.cloud .tag a {
	font: bold 11px/22px 'Lucida Grande', Arial, Sans-serif;
	text-decoration: none;
	margin: 1px;
	display: block;
	text-decoration: none;
	background: #fecd62;
	color: #a97837;
	padding: 0 11px 0 22px;
	background: #fcc65e;
	background: -webkit-gradient(linear, left top, left bottom, from(#fede82), to(#fcc65e));
	background: -moz-linear-gradient(top,  #fede82,  #fcc65e);
	text-shadow: 0 1px 0 rgba(255,255,255,0.65);
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset, 0 -1px 0 0 #eebd55, 0 1px 0 0 #daa03b, 1px 0 0 0 #e2af47;
	-moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset, 0 -1px 0 0 #eebd55, 0 1px 0 0 #daa03b, 1px 0 0 0 #e2af47;
	box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset, 0 -1px 0 0 #eebd55, 0 1px 0 0 #daa03b, 1px 0 0 0 #e2af47;
}

Tag Arrow

.cloud .tag:before {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-color: #FFF transparent;
	border-width: 12px 12px 12px 0;
	border-style: solid;
}

Tag Circle

.cloud .tag a:after {
	content: '';
	height: 6px;
	width: 6px;
	background: #FFF;
	position: absolute;
	top: 50%;
	left: 8px;
	margin: -3px 0 0 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 0 1px #e8af4d inset, 0 1px 2px 0 rgba(0,0,0,0.25) inset;
	-moz-box-shadow: 0 0 0 1px #e8af4d inset, 0 1px 2px 0 rgba(0,0,0,0.25) inset;
	box-shadow: 0 0 0 1px #e8af4d inset, 0 1px 2px 0 rgba(0,0,0,0.25) inset;
}

There you have it, a tag that maintains a gradient by masking the tag. This technique of course could be used to create all sorts of CSS masks, and may even save the world from alien invasion. Booyah.

ViewDownload

?