CSS

Kleine Style Tricks – große Wirkung

Updated on by Mathias Karstädt

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:

Mehr lesenKleine Style Tricks – große Wirkung

CSS Auswahlliste mit Checkboxen

Updated on by Mathias Karstädt

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

Updated on by Mathias Karstädt

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:

Background

Einbinden kann man dies über eine Style Sheet Anweisung:

Inhalt

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

Mehr lesenDie Desktop-Farben nutzen

CSS Formular Design – Textfelder

Updated on by Mathias Karstädt

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:

Mehr lesenCSS Formular Design – Textfelder

Back to Top