Manch einer, der durch diese oder andere Internetseiten gesurft ist, wird sich vielleicht einmal gefragt haben, wie bestimmte Effekte erzielt wurden. Ich denke da vor allem an die Hyperlink-Effekte, die auf allen Seiten von www.webmatze.de zu bewundern sind.
Wie schafft man es zum Beispiel, das ein Link nicht unterstrichen ist, oder das sich dessen Farbe ändert, wenn man mit der Maus darüber fährt? Die Antwort ist ganz einfach, nämlich CSS "Cascading Style Sheets". In diesem kurzen Artikel werde ich zeigen, wie man solche Effekte schnell und simpel umsetzen kann.
Links ohne Unterstreichnung
Dies ist eigentlich ganz einfach zu realisieren. Wenn man sich mal den Quellcode einer Seite, die diesen Effekt benutzt, näher betrachtet, so wird man folgende Zeilen im oberen Teil des HTML-Codes finden:
Wenn man diese Zeilen zwischen die <HEAD> Tags einer Seite kopiert, dann werden alle Links auf der Seite ohne Unterstreichung angezeigt.
Allerdings sollte man damit vorsichtig umgehen, denn normalerweise wird unterstrichener Text vom Benutzer als Link interpretiert. Wenn solch ein Link auf einmal nicht mehr unterstrichen ist, wird der Benutzer wahrscheinlich Schwierigkeiten haben, den Link als solchen zu erkennen. Umgehen könnte man dieses Problem zum Beispiel, indem man dem Link eine andere Farbe gibt.
Text-Links mit Rollover Effekt
Dies ist ein besonders beliebter Effekt und er wird deshalb auch auf sehr vielen Seiten eingesetzt. Dazu einfach wieder den folgenden Code zwischen die <HEAD> Tags einer Seite kopieren!
Ist dies geschehen, wird der Link beim überfahren mit der Maus seine Farbe ändern. In diesem Fall wird er die Farbe Rot einnehmen. Natürlich kann man die Farbe Rot in jede beliebige Farbe ändern.
Einfach ein wenig mit dem Code rumspielen. Es gibt noch eine Vielzahl weiterer Dinge, die man mit CSS anstellen kann. Mehr dazu aber in einen anderen Artikel.
1 thought on “Kleine Style Tricks – große Wirkung”