Diese Links bestehen einmal au Großbuchstaben, das andere mal aus Kleinbuchstaben. CSS machts möglich!

Mit der text-transfrom Eigenschaft von CSS können Sie definieren, das ein Text nur in Groß-, Kleinbuchstaben angezeigt wird. Zudem können sie den Anfangsbuchstabe eines Textes in Groß-, oder Kleinbuchstaben anzeigen.
Diese Eigenschaft ist natürlich auch anwendbar auf Linktexte.

<style type="text/css">
a:link { color: black; text-transform: lowercase}
a:visited { color: black; text-transform: lowercase }
a:active { color: black; text-transform: lowercase }
a:hover { color: darkblue; text-transform: uppercase; font-weight: bold; }
</style>


Der Code ist für den ersten Link. Im normalen Zustand soll der Text die schwarz sein. text-transform: lowercase bedeutet, das dieser Text in Kleinbuchstaben angezeigt wird. Genauso verhält es sich im aktiven, und besuchten Zustand. Im Hover-Zustand wird der Text dunkelblau ausgegeben. text-transform: uppercase bedeutet, das der Text in Großbuchstaben angezeigt wird.
Bei dem zweiten Link wird nur der Hover-Zustand verändert.

a:hover { color: darkblue; text-transform: capitalize;}


text-transform: capitalize;
gibt an, das der erste Buchstabe des Textes groß geschrieben werden soll. Den ganzen Effekt können Sie natürlich auch als Klasse definieren, damit Sie sich die einzelnen Links aussuchen können, welche mit diesem Effekt "ausgestattet" werden.
Dabei müssen Sie lediglich eine Klasse definieren.

<style type="text/css">
.up:link { color: black; text-transform: lowercase}
.up:visited { color: black; text-transform: lowercase }
.up:active { color: black; text-transform: lowercase }
.up:hover { color: darkblue; text-transform: uppercase; font-weight: bold; }
</style>


Jetzt muss nur noch auf die Klasse verwiesen werden, dabei müssen Sie das class-Attribut des Linkes wie folgt verändern:

<a href="http://www.devmag.net" class="up">devmag.net</a>

(tf)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: