Der kleine Pfeil mal anders

Ihr habt Euch vielleicht schon einmal gefragt, warum auf manchen anderen Seiten euer Cursor anders aussieht, als er standardmäßig eingestellt ist? Dieser Effekt wird durch CSS (Cascading Style Sheets) ermöglicht und in diesem Artikel erkläre ich, wie Ihr diesen Effekt auf euren Seiten einbinden könnt.

Im Voraus ist zu sagen, dass derzeit nur wenige Browser diesen CSS-Effekt unterstützen. Allen voran der neue Opera 5.02 und Netscape 4.75. Wie der MSIE 5.5 unterstützt auch der neue Netscape 6 Browser diesen Effekt, jedoch nicht mit dem Funktionsumfang wie der MSIE.

Den Cursor auf der ganzen Seite ändern

Dafür gibt es zwei Möglichkeiten:

1. Man legt die Cursor-Art im Tag fest.

  1.  
  2. <body style="cursor: cusorart"...>
  3. </body>

2. Der Befehl wird zwischen den Tags eingefügt.

  1.  
  2. <style type="text/css">
  3. body {
  4. cursor: cursorart;
  5. }
  6. </style>
  7.  

Mehr lesenDer kleine Pfeil mal anders

Kleine Style Tricks – große Wirkung

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:

  1.  
  2. <style type="text/css">
  3. a {
  4. text-decoration:none;
  5. }
  6. </style>
  7.  

Mehr lesenKleine Style Tricks – große Wirkung

CSS Auswahlliste mit Checkboxen

Normale Listen wie die folgende kennt wahrscheinlich jeder.

Sie lassen sich leicht mit HTML erstellen und machen es in Formularen möglich, einen oder auch mehrere der enthaltenen Listenpunkte auszuwählen. Die Liste setzt sich aus dem select Tag und mehreren option Tags zusammen. Das Attribut size gibt an, wie viele der Listenpunkte angezeigt werden sollen. multiple macht es möglich, gleichzeitig mehrere der Listenpunkte auszuwählen.
Mehr lesenCSS Auswahlliste mit Checkboxen

Die Desktop-Farben nutzen

Die Cascading Style Sheets Version 2 erlaubt es, das Design der Webseiten an die Desktopfarben des Surfers anzupassen. So lassen sich Seiten erzeugen, die auf jedem Computer anders aussehen können. Ein Interessanter Effekt, der von den aktuellen Browsern von Netscape und Microsoft unterstüzt wird.

Alles was man dazu braucht, sind eine Reihe von Farb-Kennworten. Jedes einzelne Kennwort steht für eine Farbe des Desktops. Möchte man also die Farbe des Desktop-Hintergrundes in die eigene Seite einbauen, so verwendet man folgendes Kennwort:

  1.  
  2. Background
  3.  

Einbinden kann man dies über eine Style Sheet Anweisung:

  1.  
  2. <div style="background-color: Background">Inhalt</div>
  3.  

Im Zusammenspiel mit Tabellen entsteht so schnell der Eindruck einer normalen Windows-Umgebung.

Mehr lesenDie Desktop-Farben nutzen

CSS Formular Design – Textfelder

Eines der wichtigsten Elemente in Webseiten sind mit Sicherheit Formulare. Sie helfen dem Benutzer mit der Seite zu interagieren, indem er Daten eingeben und diese an den Server zur Verarbeitung senden kann. Formulare werden also überall dort eingesetzt, wo Eingaben vom Benutzer notwendig sind.

Jedoch sehen die normalen Formularelemente, so wie sie von HTML bereitgestellt werden, recht unspektakulär aus. Im Folgenden möchte ich ein paar Tipps und Tricks zeigen, wie man Formulare ansprechender und schöner gestalten kann. Alles was dazu benötigt wird sind ein paar Kenntnisse in HTML und CSS (Cascading Style Sheets).

Textfelder anpassen

Die wohl am häufigsten verwendeten Elemente in Formularen sind einfache Textfelder. Sie dienen zur Eingabe von Text und sehen standardmäßig wie folgt aus:

  1.  
  2. <input type="text" name="textfeld"/>
  3.  

Mehr lesenCSS Formular Design – Textfelder

Back to Top