CSS Tagcloud (Schlagwortwolke)

Passend zum Tutorial − PHP und MySQL Tagcloud (Schlagwortwolke) − zeigt dieser Artikel, wie die erstellte Tagcloud in CSS gestaltet werden kann. Durch die Benutzung von Style-Klassen können die Schlagwörter nun nicht nur durch ihre Schriftgröße unterschieden werden, sondern auch durch Schriftfarbe, Schriftart, Hintergrundfarbe etc.

Dieser Artikel baut auf dem Tutorial PHP und MySQL Tagcloud (Schlagwortwolke) auf.

XHTML Markup

Die XHTML Struktur bleibt die gleiche, wie die im vorherigen Artikel. Um die Tagcloud anschaulicher zu machen, habe ich nun meine aktuellen Tags für die Tagcloud verwendet. Das PHP Script liefert dann folgendes:

<div id="tagcloud">
<a href="/tag-suche/bildwechsel" class="tag1">bildwechsel</a> 
<a href="/tag-suche/css" class="tag3">css</a> 
<a href="/tag-suche/hover" class="tag2">hover</a> 
<a href="/tag-suche/liste" class="tag1">liste</a> 
<a href="/tag-suche/mouseover" class="tag2">mouseover</a> 
<a href="/tag-suche/navigation" class="tag1">navigation</a> 
<a href="/tag-suche/newsflash" class="tag1">newsflash</a> 
<a href="/tag-suche/newsteaser" class="tag1">newsteaser</a> 
<a href="/tag-suche/ohne-javascript" class="tag2">ohne-javascript</a> 
<a href="/tag-suche/pagination" class="tag1">pagination</a> 
<a href="/tag-suche/popup-effekt" class="tag1">popup-effekt</a> 
<a href="/tag-suche/seitennummerierung" class="tag1">seitennummerierung</a> 
<a href="/tag-suche/seitenzahl" class="tag1">seitenzahl</a> 
<a href="/tag-suche/webdesign" class="tag3">webdesign</a> 
</div>

Tagcloud Beispiel 1

Für eine 3-stufige Tagcloud, also eine Tagcloud, in der drei Style-Klassen verwendet werden, kann das CSS wie folgt aussehen:

#tagcloud{ background: #303030; 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; }

Die Tagcloud sieht so aus:

Tagcloud Beispiel 2

Eine weitere 3-stufige Lösung wäre zum Beispiel durch folgendes CSS möglich:

#tagcloud{ background:#000000; width:200px; text-align:center; }

.tag1{ font-size:0.6em; color:#505050; }
.tag2{ font-size:0.9em; color:#808080; }
.tag3{ font-size:1.5em; color:#E0E0E0; }

#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

Die Tagcloud sieht nun so aus:

Tagcloud Beispiel 3

Wenn die Variable $TagSortierung = 2 gesetzt wird, werden die Tags nach ihrer Anzahl abwärts und alphabetisch sortiert. Mit dem folgenden CSS lässt sich die Tagcloud in einer etwas anderen Form gestalten:

#tagcloud{ width:180px;	padding:10px; background:#303030; }

.tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
.tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
.tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }

#tagcloud a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud a:hover{ text-decoration:none; background-color:#fff; color:#000; }

Die Tagcloud sieht dann so aus:

Der Fantasie sind mal wieder keine Grenzen gesetzt. Viel Spaß beim Gestalten der eigenen Tagcloud!

Weitere Tutorial-Artikel

• AdBlocker erkennen und Fallback nutzen
• Wetter auf eigener Website mit Google Weather API
• HTML Formulare effektiv gestalten
• RSS Feed auslesen mit PHP
• PHP und MySQL Tagcloud (Schlagwortwolke)
• CSS Pagination (Seitennummerierung)
• CSS Newsteaser
• CSS Navigation mit Liste
• CSS Bildwechsel

Sebastian Gollus

Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medien­wissen­schaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medien­wissen­schaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.

Die neuesten Artikel