Tabellen mit abgerundeten Ecken

Die Tabellen können jede beliebige Breite und Höhe haben, nur die Breite und Höhe des abgerundeten Randes bleibt.
In den Ecken befinden sich jeweils 4 Bilder mit einem viertel Kreis.
Die Breite und Höhe der Tabelle, kann man mit einem transparenten Gif erzwingen.
Die Tabellenzellen an den Seiten haben jeweils die Hintergrundfarbe der Eckbilder.Damit die Schrift in der Mitte einen Abstand zum Rand bekommen kann, wurde eine zweite Tabelle in die mittlerle Zelle eingefügt, welche ein cellpadding von 9 Pixel erhielt. Außerdem wurde die mittlere Zelle vertikal und horizontal mittig ausgerichtet.

 
 

Ecken-Bilder in Photoshop
Man erstellt sich ein neues Bild in beispielsweise 40 Pixel x 40 Pixel und zieht sich anschließend 2 Hilfslinien vertikal und horizontal jeweils genau in die Mitte (Lupe). Man erstellt sich auf einer neuen transparenten Ebene eine kreisförmige Auswahl und füllt diese mit Farbe. Ein Kreis als Linie läßt sich mit der Funktion Bearbeiten / Kontur füllen erstellen. Auswahl/ alles auswählen, dann Ebene an Auswahl ausrichten, horizontal und vertikal jeweils mittig. Anschließend zieht man eine rechteckige Auswahl von der Mitte in die linke, obere Ecke auf. Nun kopiert man diesen Viertelkreis, fügt ihn in ein neues Bild ein und speichert ihn als transparentes Gif ab, Datei / für Web speichern. Nachem man das Bild um 45 Grad gedreht hat, speichert man es wieder genauso ab. Letzteres noch 2 mal wiederholen und fertig ist das.



Hier weitere Beispiele:
abgebrannte Ecken :::: Menue Textfeld

 


Auch hier haben wir wieder die viertel Kreis- Bilder in den Ecken und die transprarenten Gifs in den Seitenzellen. Außerdem wurde den Seitenzellen jeweils noch ein Hintergrundbild zugewiesen, welches eine Breite von 15 Pixel hat. Es hat außen jeweils einen grünen Pixel.
Diesen Trick hab ich auch auf der Coruma Seite angewendet.

Zur Startseite
 


zurück

Copyright ©
Ein weiterer Web Design Tip von Pastor Pixel

H T T P : / / W W W . P A S T O R P I X E L . D E