Guest User

CSS3 Experiment with WordPress TagCloud

a guest
Jan 30th, 2011
424
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. CSS3 Experiment with WordPress TagCloud
  2. -----------------------------------------
  3. In action: http://tinyurl.com/4gfxqyz or http://vimeo.com/19345457
  4. -----------------------------------------
  5. Requirements: A Webkit browser (Safari, Chrome etc)
  6. -----------------------------------------
  7. By Christopher Anderton - Deluxive State AB
  8. http://www.facebook.com/deluxive
  9. -----------------------------------------
  10. Generic style for TwentyTen WordPress. You may tweak the CSS for your theme (or TwentyTen for that matter).
  11.  
  12. .widget_tag_cloud {
  13.     padding: 10px;
  14.     overflow: hidden;
  15.     background-color: transparent;
  16.     clear: both;
  17.     font-size: 1em;
  18. }
  19.  
  20. .widget_tag_cloud a:link {
  21.     font-size: 1em!important;
  22.     border-radius: 8px 8px 8px 8px;
  23.     -moz-border-radius: 8px 8px 8px 8px;
  24.     -webkit-border-radius: 8px 8px 8px 8px;
  25.     background: #fcfeff none repeat scroll 0 0;
  26.     display: block;
  27.     font-weight: bold;
  28.     height: 14px;
  29.     line-height: 14px;
  30.     margin: 3px;
  31.     padding: 3px 5px 3px 5px;
  32.     text-decoration: none;
  33.     float: left;
  34.     text-transform: uppercase;
  35.     color: black;
  36.     box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  37.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  38.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  39.     transition: color .25s linear;
  40.     -webkit-transition: all 1s ease-in-out;
  41.     -moz-transition: all 1s ease-in-out;
  42.     -o-transition: all 1s ease-in-out;
  43.     transition: all 1s ease-in-out;
  44.     opacity: 1;
  45. }
  46.  
  47. .widget_tag_cloud a:hover {
  48.     border-radius: 8px 8px 8px 8px;
  49.     -moz-border-radius: 8px 8px 8px 8px;
  50.     -webkit-border-radius: 8px 8px 8px 8px;
  51.     background: #435c43 none repeat scroll 0 0;
  52.     display: block;
  53.     font-weight: bold;
  54.     height: 14px;
  55.     line-height: 14px;
  56.     margin: 3px;
  57.     padding: 3px 5px 3px 5px;
  58.     text-decoration: none;
  59.     float: left;
  60.     text-transform: uppercase;
  61.     color: white;
  62.     opacity: 1;
  63.     -webkit-transform: rotate(720deg) scale(2,2);
  64.     -moz-transform: rotate(720deg) scale(2,2);
  65.     -o-transform: rotate(720deg) scale(2,2);
  66.     transform: rotate(720deg) scale(2,2);
  67.     box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  68.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  69.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1);
  70. }
RAW Paste Data