[an error occurred while processing this directive]

Ganz schön bunt

Laden Sie jetzt stimmige Farbwelten für Ihre Webseiten herunter - kostenlos

Hier klicken und mehr erfahren

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 08.03.21, Adresse: http://www.grammiweb.de/html/html089.shtml)

 

Tabellen mit 3D-Effekt

Tabellen wirken schnell langweilig und können ein mühsam erarbeitetes Seitenlayout nachhaltig stören. Dank CSS ist es jedoch ganz einfach, sie mit einem kleinen dreidimensionalen Effekt auszupeppen.

Hierzu ein Beispiel:

Punkt 1Punkt 2
Punkt 3Punkt 4
Punkt 5Punkt 6

Der Quellcode hierzu:

<table style="border: 4px inset #BCD3B6">
<tr><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td></tr>
</table>

Der Quellcode ist schnell erklärt: Es wird eine Tabelle erstellt und via CSS mit einem Rand ("border: ") von 4 Pixel Breite ("4px") und einer nach hinten ausgerichteten Ausstellung ("inset") in grüner Farbe ("#BCD3B6") versehen. Statt dieses Farbwertes kann natürlich auch jeder beliebige andere verwendet werden.

Sollte der Lichteinfall aus der entgegen gesetzten Ecke erwünscht sein, kommt statt der inset-Anweisung outset zum Einsatz:

Punkt 1Punkt 2
Punkt 3Punkt 4
Punkt 5Punkt 6


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 08.03.2021
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt