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.
Ver Demo - Descarga de ejemplos - Idea Original web-spirit
Estilo 1
CSS:
#tagcloud{ background: #303030; font-family:Tahoma,Verdana,sans-serif; padding:10px 5px 10px 5px;}
.tag1{ font-size:1em; color:#555555; line-height:1em; }
.tag2{ font-size:1.2em; color:#606060; line-height:1em; }
.tag3{ font-size:1.4em; color:#808080; line-height:1em; }
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
.tag1{ font-size:1em; color:#555555; line-height:1em; }
.tag2{ font-size:1.2em; color:#606060; line-height:1em; }
.tag3{ font-size:1.4em; color:#808080; line-height:1em; }
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
Estructura
HTML:
<div id="tagcloud">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
Estilo 2
CSS:
#tagcloud2{ background:#000000; font-family:arial,Verdana,sans-serif; width:200px; text-align:center; }
#tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
#tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
#tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }
#tagcloud2 a{ text-decoration:none; }
#tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }
#tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
#tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
#tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }
#tagcloud2 a{ text-decoration:none; }
#tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }
Estructura
HTML:
<div id="tagcloud2">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
Estilo 3
CSS:
#tagcloud3{ width:180px; font-family:arial,Verdana,sans-serif; padding:10px; background:#303030; }
#tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
#tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
#tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }
#tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }
#tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
#tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
#tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }
#tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }
Estructura
HTML:
<div id="tagcloud3">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>
Loading ...
Nube de tags con CSS — Freak Group
30-04-2008
Permalink
[...] eso es todo, Nikko nos ofrece una gran variedad de estilos para nuestra nube de tags, y si con esos ejemplos no nos [...]