Webseiten erstellen

Hier erfährst du wie du schnell und unkompliziert eine Webseite erstellen kannst

CSS Button Tricks

Updated on by Mathias Karstädt

Jeder der schon Formulare in HTML erstellt hat, wird sich bestimmt schon einmal die Frage gestellt haben, ob es nicht eine Möglichkeit gibt, um den Buttons ein anderes Aussehen zu geben.

Standard Button

Standardmäßig haben die Buttons ein graues langweiliges Äußeres. Je nach Betriebssystem und Browser können diese zwar etwas unterschiedlich aussehen, aber sie könnten dennoch viel individueller aussehen, wenn man nur weiß wie.



HTML Code:

Farbiger Button

Doch wie man leicht erkennen kann, will so ein Button nicht wirklich in das Design der Seite passen. Er sticht förmlich heraus und sieht wie ein Fremdkörper aus. Warum passen wir nicht einfach die Farbe an? Okay!
Mehr lesenCSS Button Tricks

Der kleine Pfeil mal anders

Updated on by Mathias Karstädt

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.

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

Mehr lesenDer kleine Pfeil mal anders

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