Etikett : code

För cirka ett år sedan så arbetade jag med en WordPress baserad blogg åt en kund. Fastnade lite på etikettmolnets utseende i sidmenyn. Satt och experimenterade lite förstrött tills jag fick fram något som såg lite småkul ut. För demo, kolla in filmen nedan.

Standard CSS för WordPress. Du kanske måste byta namn på klasserna för att få det att passa ihop med ditt tema. Fungerar givetvis att implementera till vad som helst.

.widget_tag_cloud {
	padding: 10px;
	overflow: hidden;
	background-color: transparent;
	clear: both;
	font-size: 1em;
}

.widget_tag_cloud a:link {
	font-size: 1em!important;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	background: #fcfeff none repeat scroll 0 0;
	display: block;
	font-weight: bold;
	height: 14px;
	line-height: 14px;
	margin: 3px;
	padding: 3px 5px 3px 5px;
	text-decoration: none;
	float: left;
	text-transform: uppercase;
	color: black;
	box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
	transition: color .25s linear;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	opacity: 1;
}

.widget_tag_cloud a:hover {
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	background: #435c43 none repeat scroll 0 0;
	display: block;
	font-weight: bold;
	height: 14px;
	line-height: 14px;
	margin: 3px;
	padding: 3px 5px 3px 5px;
	text-decoration: none;
	float: left;
	text-transform: uppercase;
	color: white;
	opacity: 1;
	-webkit-transform: rotate(720deg) scale(2,2);
	-moz-transform: rotate(720deg) scale(2,2);
	-o-transform: rotate(720deg) scale(2,2);
	transform: rotate(720deg) scale(2,2);
	box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
}