Tag Styles

by Eric

HTML

<script src="http://fonts.googleapis.com/css?family=Ruda:400,700|Ubuntu:400,700,400italic,700italic|Ubuntu+Mono:400,700,400italic,700italic"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
CSS (not quite right in every browser, try chrome): <br />
<div class="tag">electronics</div>

<br /><br />

Canvas (even works with retina):<br />
<canvas class="tag-canvas" data-tag="electronics">electronics</canvas>
<canvas class="tag-canvas" data-tag="jquery">jquery</canvas>
<canvas class="tag-canvas" data-tag="markdown">markdown</canvas>

CSS

*, *:before, *:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body
{
    background: #c4bbac;
    color: #5e5a53;
    
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
}

.tag
{
    display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	*display: inline;
    
    position: relative;
    color: #dfdfdf;
     
    padding: 4px 8px;
    margin-left: 12px;
    
    background: #427476;
    box-shadow: inset 0 1px 0 #204150, inset 0 -1px 0 #204150, inset -1px 0 0 #204150, inset 0 2px rgba(255, 255, 255, .1);
    /* box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; */
    
    /*border: 1px solid #204150; */
    
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    /*
    -webkit-border-radius: 6px;
    border-radius: 6px;*/

    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}

.tag:hover
{
    background: #477e80;
    
    cursor: pointer;
    cursor: hand;
}

.tag:before
{
    content: '';
    
	width:  21px; /* equal to height */
	height: 21px; /* equal to height */
    
	background: inherit;
    box-shadow: inset 0 0 0 1.41421356px #204150, inset 2.828427px 2.828427px rgba(255, 255, 255, .1); /* Weird values because of scale */
    
	border-bottom-left-radius: 30%;
    /*-webkit-border-radius: 30%;
    border-radius: 30%;*/
    
	position: absolute;
    top: 0;
    left: -11.5px; /* equal to height/2 */
    
    z-index: -1;
    
    -webkit-transform: rotate(45deg) scale(.70710678);
}


.tag-canvas
{
    cursor: pointer;
    cursor: hand;
}

.no-canvas .tag-canvas
{
    color: #dfdfdf;
    background: #427476;
    border: 1px solid #204150;
}

.no-canvas .tag-canvas:hover
{
    background: #477e80;
}

JavaScript

$('.tag-canvas').each(function(index, element) {
    generateTag(element, {
        tagName: $(element).attr('data-tag'),
    });
});

$('.tag-canvas').on({
    'mouseenter touchstart': function () {
        generateTag(this, {
            tagName: $(this).attr('data-tag'),
            tagBackgroundColor: '#477e80',
        });
    },
    'mouseleave touchend': function () {
        generateTag(this, {
            tagName: $(this).attr('data-tag'),
        });
    }
});

function generateTag(element, options) {
    
    var defaults = {
        tagBackgroundColor: '#427476',
        tagStrokeColor: '#204150',
        tagFontColor: '#dfdfdf',
        tagFontSize: 12,
        
        tagName: 'tag',
        
        rectPaddingX: 8,
        rectPaddingY: 4,
    };
    // if options not defined then empty
    var options = options || {};
    // merge
    options = $.extend({}, defaults, options);
    
    
    var context = element.getContext('2d');
    //context.scale(2, 2);
    
    
    // Clear the canvas to redraw
    // Store the current transformation matrix
    context.save();
    
    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, element.width, element.height);
    
    // Restore the transform
    context.restore();



    
    context.font = options.tagFontSize + 'px Ubuntu';
    
    var tagNameDim = context.measureText(options.tagName)
    var rectX = 10.5;
    var rectY = .5;
    var rectWidth = tagNameDim.width + (options.rectPaddingX*2);
    var rectHeight = options.tagFontSize + (options.rectPaddingY*2);
    var cornerRadius = 4;
    
    // React to high pixel density (retina) screens
    var hdCanvasWidth = rectX + rectWidth + 1;
    var hdCanvasHeight = rectY + rectHeight + .5;
    /* * /
    $(element).attr({
        'width': hdCanvasWidth * window.devicePixelRatio,
        'height': hdCanvasHeight * window.devicePixelRatio
    });
    /* */
    
    // finally query...