CSS3 Category Decoration For Links

This is a recipe for people interested in create a visual decoration for category links using css3 properties.

I could not test if it degrades gracefuly, but it works fine in more recent browsers.

Working but with a few problems

<?php if (!defined('PmWiki')) exit();

/*  Copyright 2012 Carlos A. Bonamigo ([email protected])
    This file is a recipe for PmWiki; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published
    by the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.  See pmwiki.php for full details.
*/

SDV($CategoryDecoration,'

span.categorylink{
	margin:0 auto;
	padding:0;
	list-style:none;
	font-family: helvetica, arial, "sans serif";
}


.categorylink a{
	float:left;
	height:23px;
	line-height:23px;
	position:relative;
	font-weight: bold;
	font-size: 11px;
	line-height: 25px;
	text-transform: uppercase;
	color: rgba(0,0,0, 0.6);		
}

.categorylink a{
	margin: 0 12px 0 12px;
	padding:0 10px 0 18px;
	background:#0089e0;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;
	-moz-border-radius-topleft:2px;	
	-webkit-border-top-left-radius:2px;	
	border-top-left-radius:2px;
	-moz-border-radius-bottomleft:2px;		
	-webkit-border-bottom-left-radius:2px;	
	border-bottom-left-radius:2px;
	background: -moz-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 95%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #77A423), color-stop(0.6, #93C436), color-stop(0.97, #AAD15D), color-stop(0.99, #D4ED99));
	background: -o-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 98%);
	background: -ms-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 98%);
	border: 1px solid #81A340;
	border-bottom: 1px solid #53652C;
	border-left: none;
	-webkit-text-shadow: 0px 1px 0px rgba(255,255,255, 0.3); 	
	-moz-text-shadow: 0px 1px 0px rgba(255,255,255, 0.3); 
	text-shadow: 0px 1px 0px rgba(255,255,255, 0.3);
}


.categorylink a:before{
	content:"";
	float:left;
	position:absolute;
	top:2px;
	left: -9px;
	width:17px;
	height:17px;	
	background-color: #1a82f7;
	background: -webkit-linear-gradient(left bottom, #77A423, #93C436 60%, #AAD15D 99%);
	background: -moz-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 98%);
	background: -o-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 98%);
	background: -ms-linear-gradient(bottom, #77A423, #93C436 60%, #AAD15D 96%, #D4ED99 98%);
	-webkit-transform:rotate(-45deg);    
	-moz-transform:rotate(-45deg);   
	-ms-transform:rotate(-45deg);   
	-o-transform:rotate(-45deg);
	z-index: -2;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #81A340;
	border-left: 1px solid #53652C;
	-webkit-box-shadow: inset 0px 0px 1px 0px rgba(255,255,255, 0.4); 
	-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4); 
	box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);	
}


.categorylink a:after{
	content:"";
	position:absolute;
	top: 8px;
	left:1px;
	float:left;
	width:6px;
	height:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	background:#dcdcdc;
	border: 1px solid #708c3b;
	border-bottom: 1px solid #53652C;
	-webkit-box-shadow: 0px -1px 0px rgba(0,0,0, 0.1);
	-moz-box-shadow: 0px -1px 0px rgba(0,0,0, 0.1); 
	box-shadow: 0px -1px 0px rgba(0,0,0, 0.1);
}
');

$LinkCategoryFmt = "<span class='categorylink'><a href='\$LinkUrl'>\$LinkText</a></span>";

Markup('categorydecoration','directives',
    "/\\(:catdeco:\\)/e","CategoryDecoration()");

function CategoryDecoration(){
global $CategoryDecoration, $HTMLStylesFmt;
$HTMLStylesFmt['categorydecoration']=$CategoryDecoration;
}

Credit for the css3 rules goes to Mr. Rasmus, nice work.

The category links are floated so text between "tags" won't work.

The css is a bit extense, but the effect is so cool.

I changed the selectors a bit to adapt it to PmWiki needs.

I hope you enjoy it.