Text Resizer Text Resizer
February 7th, 2012
You're browsing: Scriptmatico.Com » CSS » Simulando una Nube de etiquetas con CSS

Simulando una Nube de etiquetas con CSS

Posted on may 01 in CSSby PrintText Resizer Text Resizer

CSS-Tagcloud Una simple técnica para simular mediante CSS, los tradicionales estilos que solemos ver con nuestros Tags. Algo que será útil, para resaltar ciertos enlaces o categorías por nuestra cuenta, o para aquellos que no necesariamente se encuentren utilizando WordPress y desean dar algún estilo similar en sus web.

La idea original web-spirit

Aqui les pongo el codigo html y css para usar esto.

PLAIN TEXT
CSS:
  1. #tagcloud{ background: #303030;  font-family:Tahoma,Verdana,sans-serif;  padding:10px 5px 10px 5px;}
  2. .tag1{ font-size:1em; color:#555555; line-height:1em; }
  3. .tag2{ font-size:1.2em; color:#606060; line-height:1em; }
  4. .tag3{ font-size:1.4em; color:#808080; line-height:1em; }
  5. #tagcloud a{ text-decoration:none; }
  6. #tagcloud a:hover{ text-decoration:underline; }

PLAIN TEXT
HTML:
  1. <div id="tagcloud">
  2. <a href="#"  class="tag1">Almacenamiento</a>
  3. <a href="#"  class="tag3">Capturas Web</a>
  4. <a href="#"  class="tag2">Color</a>
  5. <a href="#" class="tag1">CSS</a>
  6. <a href="#"  class="tag2">diseno</a>
  7. <a href="#"  class="tag3">diseno Web</a>
  8. .....etc etc etc
  9. </div>

con eso nos quedaria algo asi:

Ahora otro ejemplo:

PLAIN TEXT
CSS:
  1. #tagcloud2{ background:#000000; font-family:arial,Verdana,sans-serif; width:200px; text-align:center; }
  2. #tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
  3. #tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
  4. #tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }
  5. #tagcloud2 a{ text-decoration:none; }
  6. #tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

PLAIN TEXT
HTML:
  1. <div id="tagcloud2">
  2. <a href="#"  class="tag1">Almacenamiento</a>
  3. <a href="#"  class="tag3">Capturas Web</a>
  4. <a href="#"  class="tag2">Color</a>
  5. <a href="#" class="tag1">CSS</a>
  6. <a href="#"  class="tag2">diseno</a>
  7. <a href="#"  class="tag3">diseno Web</a>
  8. .....etc etc etc
  9. </div>

El resultado:

Y un ultimo ejemplo:

PLAIN TEXT
CSS:
  1. #tagcloud3{ width:180px;    font-family:arial,Verdana,sans-serif; padding:10px; background:#303030; }
  2. #tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
  3. #tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
  4. #tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }
  5. #tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
  6. #tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }

PLAIN TEXT
HTML:
  1. <div id="tagcloud3">
  2. <a href="#"  class="tag1">Almacenamiento</a>
  3. <a href="#"  class="tag3">Capturas Web</a>
  4. <a href="#"  class="tag2">Color</a>
  5. <a href="#" class="tag1">CSS</a>
  6. <a href="#"  class="tag2">diseno</a>
  7. <a href="#"  class="tag3">diseno Web</a>
  8. .....etc etc etc
  9. </div>

y el ultimo resultado:

Post to Twitter

No related posts.


About

Entry Details: This entry was posted on Jueves, mayo 1st, 2008 at 15:19, by admin, and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Print This!

Leave a Reply

You must be logged in to post a comment.

Back to Top