CSS Tagcloud - Simulando Tags con CSS
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; }
Estructura
HTML:
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; }
Estructura
HTML:
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; }
Estructura
HTML:
Nube de tags con CSS — Freak Group said,
Wrote on April 30, 2008 @ 22:54
[...] eso es todo, Nikko nos ofrece una gran variedad de estilos para nuestra nube de tags, y si con esos ejemplos no nos [...]