Mit Profitipps Webseiten gestalten

1 5

Schön einfach: So nutzen Sie Standard-Button-Elemente für Links.

Tipp 1: Einfache Link-Buttons

So erzeugen Sie einfache und verlinkbare Button-Elemente.

Wenn Sie in Ihren Seiten-Quelltexten einen klickbaren Link benötigen, stellt sich die Frage, wie Sie den Link optisch darstellen. Sind Sie dann auch noch an ein bestimmtes Layout gebunden, sind oftmals komplexe Formatierungen für eine angemessene Darstellung von Buttons oder Schaltflächen nötig. Zwar können Ihnen hierbei die vielseitigen CSS-Formatierungen helfen, oftmals genügt es aber auch, eine einfache Standard-Schaltfläche für den Benutzer darzustellen.

Diese Schaltflächen ist man von den Windows-Anwendungen her gewohnt und diese passen sich in der Regel auch in alle Layouts optimal ein. Hier gilt es nun, mit einem verblüffend einfachen Kniff die in der Regel nötige JavaScript-Funktionalität über ein OnClick-Ereignis zu umgehen. Immer mehr Anwender sperren nämlich bewusst und aus gutem Grund das Java-Scripting auf Ihren PC-Systemen. Aus diesem Grund können solche Anweisungen dann auch nicht mehr ausgeführt werden.

In unserem Fall benutzen Sie das Standard HTML-Objekt <button> in einem anderen Kontext. Es wird einfach in ein HTML-Linkobjekt eingebettet und somit komplett als aktiver Link genutzt. Sie müssen dem Button-Element nur noch das Attribut type="button" und einen Beschriftungstext im Attribut value="Text" mitgeben. Das sieht nun wie folgt aus:

<a href="pfadangabe.html"><button type="button"
value="Alle anzeigen">Alle anzeigen</button></a></b>

Der Browser interpretiert das Button-Element als klickbare Grafik und verzichtet auf komplexe Formatierungen. Mit einfachsten Mitteln entstehen so anspruchsvolle und vor allem bekannte Buttons in Ihren HTML-Seiten.

2 5

Schöner Schein: So legen Sie einfache transparente Informationsbereiche mit DIV-Objekten an.

Tipp 2: Transparente Hinweisfenster

Generieren Sie einfache und transparente Hinweisfenster.

Wenn Sie auf Ihren Webseiten bestimmte Eingabefelder, Infobereiche oder Gruppen von Informationen verwenden, so wäre es wünschenswert, wenn Sie dem Seitenbesucher zusätzliche Informationen zu diesen Objekten anbieten oder einblenden. Normale Textbereiche überfrachten wegen der Textmenge schnell die Seite und das Layout.

Schön wäre ein Weg, zusätzliche Informationsfenster oder Textbereiche mit einem Klick auf einen Link oder Icon temporär einzublenden. Frei gestaltbare Textbereiche sind mit HTML und CSS schnell generiert. Auch eine absolute Positionierung dieser Bereiche ist nicht schwer. Meist ist solch ein Textfenster bzw. -bereich aber immer im Weg und überdeckt andere Formularbereiche oder Eingabefelder.

Um diesen störenden Effekt zu umgehen, arbeiten Sie hier mit Transparenz. Sie erzeugen einen Textbereich über ein DIV-Element und weisen diesem eine Transparenz zu. Damit darf das Informationsfeld auch Informationen überdecken, sorgt es doch mit seiner Transparenz für einen durchscheinenden Effekt und zeigt weiterhin die darunter liegenden Informationen und Objekte an. Die folgende Quelltextzeile steuert den Ein-/Ausblendeffekt:

<a href="#" onClick="Anzeigen("%80%9A%divopa%"%80%98)">Hinweisfenster
öffnen</a></div>

Ein kleines Script Anzeigen() steuert das Ein-/Ausblenden des DIV-Bereichs. Eine zusätzliche CSS-Klasse für den Textbereich als DIV-Objekt steuert die Formatanweisungen für die Anzeige. Dar darstellbare Informationsbereich wird dabei im Quelltext mit dem Attribut "display:none" vorerst ausgeblendet. Die absoluten Positionsangaben in der CSS-Klasse legen den exakten Anzeigebereich fest.

3 5

Farbaktiv: Eine effektvolle und visuelle UI-Steuerung erzeugen Sie mit CSS3-Selektoren.

Tipp 3: Eingabefelder automatisch hervorheben

Nutzen Sie die neuen Stylesheet-Selektoren für Eingabefelder.

Sobald Sie in Ihren Webseiten Informations- und Eingabefelder benutzen, wäre eine komfortable UI-Steuerung bzw. spezielle Layoutfunktion für den Seitenbesucher von großem Vorteil. In Formularen gibt es oftmals viele Eingabefelder. Es ist sehr hilfreich, wenn man das jeweils aktuelle Eingabefeld in irgendeiner Weise dem Benutzer kenntlich macht.

Mit den neuen Selektoren aus dem CSS-3 Standard schaffen Sie dies mit wenigen Programmzeilen. Einige der neuen Funktionen im CSS3-Standard sind so genannte Selektoren, die Attribute und Funktionen in bestimmten Abhängigkeiten steuern oder aktivieren. Einer dieser Selektoren ist die Funktion :focus, die auf Benutzeraktionen reagiert. Wann immer ein Objekt den Eingabe-/Selektionsfokus erhält, wird dieser Selektor ausgeführt und aktiviert.

Sie nutzen dies für ein Eingabefeld, dessen Hintergrundfarbe beim Erhalt des Eingabefokus auf grün wechselt und damit dieses Feld visuell als aktiv kennzeichnet. Eine einfache CSS-Formatierungsanweisung zeigt die Hauptfunktion:

#ok input:focus { background-color:lime}

Sie wenden diesen Selektor nun auf ein Eingabefeld an und immer dann, wenn dieses Eingabefeld den Fokus erhält, färbt es sich automatisch grün. Beim Verlassen des Feldes wird der Urzustand auch wieder hergestellt. Mit dieser Methode erzielen Sie beachtliche UI-Steuerungen mit visuellen Effekten.

4 5

Mit Profitipps Webseiten gestalten

Tipp 4: Farbverläufe und Schatten einsetzen

Benutzen Sie die neuen CSS3-Methoden zu einer ansehlichen Grafikgestaltung ohne lange Ladezeiten.

Bislang schmücken sich viele Internetseiten mit haufenweise Grafiken, um damit auch Funktionen darzustellen. Rahmen, Buttons, Schaltflächen und auch aufwändige Farbverläufe mussten Sie bislang über Grafikdateien verwirklichen. Das Ergebnis ist oftmals mehr als beeindruckend, die Ladezeiten der Grafikobjekte jedoch beinahe unerträglich.

Mit dem neuen Standard CSS3 lassen sich nun auch beeindruckende Grafikeffekte mit äußerst geringem Aufwand erzeugen. Als Beispiel erzeugen Sie einen News-Teaserblock mit Überschrift, Spiegelungen und Farbverläufen. Die Dateigröße im direkten Vergleich mit einer Grafiklösung liegt mindestens um den Faktor 100 niedriger. Die Textanweisungen der CSS-Formate belegen nur wenige Bytes.

Für das Beispiel benötigen Sie drei CSS-Formatblöcke, die zum einem den Textkopf bilden, den Infoblock mit einem gespiegelten Farbverlauf ausstatten und die Überschrift mit dem Objekt <h3> formatieren. Sie erzeugen dafür auch noch zwei verschachtelte <div>-Objekte, die die Überschrift und den Infoblock darstellen. Der ausschlaggebende Quelltext sieht dann wie folgt aus:

<div class="css-block">
<h3>CSS3 - Farbverläufe nutzen</h3>
<div class="css-block-inner">
<p>Text...</p>
</div>
</div>

Das Ergebnis dieser Anweisung erzeugt ein imposantes Webobjekt, um News und Informationen darzustellen. Der Farbverlauf wird vom Browser korrekt dargestellt. Alle aktuellen Browser-Varianten können derzeit schon einen Großteil der CSS3-Anweisungen korrekt umsetzen.

5 5

Mit Profitipps Webseiten gestalten

Tipp 5: Farben und 3D-Formen

So erzeugen Sie beachtliche Grafikobjekte mit CSS3-Formen, ohne zuvor Grafikprogramme bemühen zu müssen.

Eine bislang wenig bekannte Funktionalität der CSS-Formate ist die Gestaltung von Formen. Diese statten Sie auch mit Farbverläufen aus. Damit lassen sich sehr interessante Objekte erzeugen, die bislang aufwändig mit Grafikprogrammen gestaltet und als Bildobjekt eingesetzt werden mussten. Ein solches klassisches Objekt ist die Schaltfläche an sich. Durch die rechteckige Form und einen Farbverlauf sind der grafischen Gestaltung keinerlei Grenzen gesetzt.

Das vorgestellte Beispiel erzeugt eine Überschriftenleiste mit einem leichten 3D-Effekt und einem Farbverlauf. Entsprechend angepasst, verwenden Sie dieses Objekt auch als Schaltfläche und erzeugen damit eine Navigationsleiste. Sie verwenden zwei CSS-Formatobjekte, die den Textcontainer und die Überschrift mit dem Objekt <h1> entsprechend formatieren. Die folgenden Quelltextzeilen bilden dabei den Kern der Webseite:

<div id="container">
<h1>CSS3 - Shapes</h1>
Text...
</div>

Die CSS3-Form box erzeugt dabei ein Rechteck mit einem leichten Schattenwurf. Somit entsteht der Eindruck eines schwebenden Objektes. Dabei sind die Parameter für Farbe, Farbverlauf, Form und Größe völlig frei wählbar.