Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Spezielle Formen

Schluss mit den langweiligen Ecken !

Webdesign lebt von ungewöhnlichen Dingen. Form und Farbe sollten sich dem Geschmack des Webmaster unterwerfen und nicht Einschränkungen des HTML. Leider gibt es keinen Tag für individuelle geformte Menüs oder Buttons... und doch: mit einem kleinen Griff in die Trickkiste ist eben das kein Problem.

Um einer Tabelle das gewisse Etwas zu verleihen verwenden wir einen Kniff, den alte Hasen gern einsetzen: transparente GIFs. Das sind Bilder, die mit einer Farbpalette von 16 oder weniger Farben auskommen und daher sehr klein sind. Eine Farbe dient als "Transparenzfarbe". Die Stellen der Grafik, welche so gefärbt sind, werden später im Browser durchsichtig.

Und wir wenden einen weiteren "Trick" an. Denn tatsächlich bestehen unsere Tabellen nicht aus "einer" Tabelle sondern aus mehreren Tabellen, die ineinander liegen und verschiedene Schichten darstellen.

Der Quelltext:  Wenden wir uns zuerst den Tabellen zu, um das Prinzip zu verstehen <table style="background-image: url('textur.gif')" border="0" cellspacing="0" cellpadding="0" bgcolor="darkblue" height="100" width="100"><tr><td> Da haben wir zunächst die erste Schicht: das ist quasi die Grundierung. Sie besteht aus einer Farbschicht und/oder einer Textur. Wir geben dieser Tabelle eine feste Höhe und Breite - nämlich die unseres gewünschten Objekts. Gleichzeitig wählen wir über das Attribut "bgColor" eine Hintergrundfarbe als Grundierung. Möchten wir zusätzlich dem Objekt eine schicke Textur verpassen, kommen wir mit etwas CSS weiter. CSS ist eine Ergänzung zu HTML und kann über das Attribut "style" eingebaut werden. Hier verwenden wir "background-image" um die Textur zu laden. <table style="background-image: url('blende.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center 50%" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center"> Nach der Grundierung folgt die zweite Schicht: eine Blende. Diese gibt dem Objekt seine Form indem es die Bereiche der Grundierung abdeckt, welche nicht zum Objekt gehören. Bei einem Kreis wären das beispielsweise die Ecken der Tabelle. Das GIF welches als Blende fungiert laden wir über "background-image" als "Hintergrundbild" der Tabelle. Mit "background-position: center 50%" sorgen wir dafür, dass unser Kreis mittig fixiert ist. Die weiteren Anweisungen dienen lediglich der "Kosmetik", bitte nehmen sie diese so zur Kenntnis. Sie sind für uns hier weiter nicht von Bedeutung. <h2>Schluss mit den <h1>langweiligen <h2>Ecken ! Nachdem wir soviel Aufwand getrieben haben: die dritte "Schicht". Wir platzieren den tatsächlichen Inhalt der Tabelle. </td></tr></table> </td></tr></table>

Fassen wir kurz zusammen: wir erzeugen also mit Hilfe von Tabellen mehrere Schichten: eine Grundierung, darüber eine Blende um die unerwünschten Ecken abzudecken und darüber den eigentlichen Inhalt.

Formen erzeugen: Bildbearbeitung

Transparente GIFs können sie mit jedem guten Grafikprogramm wie "Gimp", "Paintshop", "PhotoPaint", "PhotoImpact" und Co. erzeugen.

Beispiel: Texturen

Beispiel: Blenden

Texturen werden als Kacheln erzeugt: das heißt, als kleine Ausschnitte die, wenn sie aneinander gelegt werden ein komplettes Bild erzeugen. Möglichst so, dass die Übergänge zwischen den einzelnen Kacheln verschwinden. Wählen sie um Speicherplatz zu sparen den Ausschnitt so groß wie nötig und so klein wie möglich und reduzieren sie die Anzahl der Farben soweit es geht. Die Hintergrundfarbe der Textur wählen sie als Transparenzfarbe und speichern die Datei als GIF.

Um eine Blende zu erzeugen gehen sie etwas anders vor: wählen sie ein leeres Dokument gefüllt mit der Hintergrundfarbe oder einem Ausschnitt der Hintergrundgrafik ihrer HTML-Seite in der Größe des Objekts. Jetzt schneiden sie die Konturen heraus und färben den Bereich des Objekts mit der Transparenzfarbe. Abschließend können sie mit einem einfachen Trick Lichteffekte auf das Objekt übertragen: wählen sie dazu eine helle Farbe und zeichnen sie einen hellen Strich mit weichem Rand an der Stelle der Reflektion. Speichern sie die Datei als GIF und sie sind fertig.

Auf diese Weise lassen sich beliebig geformte Objekte erzeugen...
Damit sind wir natürlich noch nicht am Ende: denn es gibt noch raffiniertere Varianten, welche noch bessere Ergebnisse liefern. Jedoch soll das für diese kurze Einführung erst einmal genug sein und ich hoffe ihnen das Grundprinzip damit herüber gebracht zu haben. Bei Fragen stehe ich ihnen gern via Mail zur Verfügung.

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: