CSS3 bietet eine riesige Auswahl an Möglichkeiten um eine Website zu gestalten und zu individualisieren.

Um den Standard Rollover Effekt ein wenig aufzumotzen, bietet CSS3 die 3D Rollover Effekte an.

An unserem kleinen Beispiel seht ihr den 3D Rollover Effekt in Aktion (mit der Maus auf unseren Nerd zeigen):

Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: 3D Nerd
Leider wird der Effekt aktuell noch nicht von allen Browsern unterstützt, hier eine Auswahl von 3D fähigen (aktuellste Version vorausgesetzt):

- Safari
- Chrome
- Firefox in der Aurora Version

Ist euer Browser nicht im Stande die Effekte darzustellen, werdet ihr den standard Rollover Effekt sehen.

Die Rotation wird in dem Beispiel hauptsächlich durch die CSS3 Funktion “rotateY” realisiert.
In unserem Beispiel sieht man, dass der Rotationsbefehl für die einzelnen Browser noch angepasst werden muss:

.logos:hover .cube, .logos:focus .cube {
 -webkit-transform:  rotateY(360deg); 
 -moz-transform:     rotateY(360deg); 
 -ms-transform:      rotateY(360deg); 
 -o-transform:       rotateY(360deg); 
 transform:          rotateY(360deg); 
}

Die Größe des animierten Objekts hängt von der CSS3 Eigenschaft “perspective” ab, sie legt fest wie groß der Abstand zwischen Animation und Bildschirm sein soll. Bei 800px liegt das Bild quasi 800 Pixel hinter eurem Bildschirm.

.logos {
 -webkit-perspective:  800px; 
 -moz-perspective:     800px; 
 -ms-perspective:      800px; 
 -o-perspective:       800px; 
 perspective:          800px; 
}

Folgendes Video gibt einen guten Einblick in die Funktionsweise von 3D Rollover, welche Einstellungsmöglichkeiten es gibt und was man noch beachten muss:

Wenn ihr im Detail wissen wollt, wie die ganzen 3D Transformationen mit CSS3 funktionieren, empfehlen wir euch diesen Link:

http://24ways.org/2010/intro-to-css-3d-transforms

Möchte man seine Texte für die Suchmaschine optimieren, dann ist das Keyword einer der wichtigsten Faktoren.

Nicht nur die Wahl des Keywords selbst spielt dabei eine große Rolle, auch das Auftreten des Keywords im gesamten Text ist für Google Interessant. Tritt es zu häufig auf, denkt Google, es handle sich um eine Spam-Seite. Tritt es dagegen zu selten auf, wird es als nicht relevant bewertet.

Weniger ist an dieser Stelle oftmals mehr. Wir empfehlen euch eine Keyworddichte von ca. 3-5%.

Doch wie ermittelt man die Keyworddichte? Ein Tool, dass das Zählen für euch übernimmt, ist die Firefox Erweiterung KGen.

Damit das Add-On euch die prozentuale Verteilung der Keywords anzeigen kann, müsst ihr noch ein paar kleine Einstellungen ändern:

1) Ihr öffnet KGen und geht oben im Reiter auf Optionen.

2) Dort wählt ihr Wörter sortieren nach Wiederholung aus..

3) ..und setzt ein Häkchen unter Other bei dem Punkt “Show repeat and weight in precents”

Seit ihr nun auf einer Seite und wollt dort die Keyworddichte ermitteln, dann müsst ihr nur KGen aufrufen und auf “Schlüsselwörter suchen!” klicken.

Wir finden, KGen ist eine sinnvolle Alternativen zu den ganzen Keyword-Webseiten, da man nicht immer die URL kopieren und einfügen muss.

Die Chrome-Version von KGen ist bisher leider nicht so ausgereift. Kennt ihr noch andere Alternativen?

Links:

Firefox Add-On KGen