Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

CSS3 Experiment with WordPress TagCloud

By: a guest on Jan 30th, 2011  |  syntax: CSS  |  size: 2.22 KB  |  hits: 291  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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. }
create a new version of this paste RAW Paste Data