Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS3 Experiment with WordPress TagCloud
- -----------------------------------------
- In action: http://tinyurl.com/4gfxqyz or http://vimeo.com/19345457
- -----------------------------------------
- Requirements: A Webkit browser (Safari, Chrome etc)
- -----------------------------------------
- By Christopher Anderton - Deluxive State AB
- http://www.facebook.com/deluxive
- -----------------------------------------
- Generic style for TwentyTen WordPress. You may tweak the CSS for your theme (or TwentyTen for that matter).
- .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);
- }
Add Comment
Please, Sign In to add comment