(Stand: 23.12.24, 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 1 | Punkt 2 |
Punkt 3 | Punkt 4 |
Punkt 5 | Punkt 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 1 | Punkt 2 |
Punkt 3 | Punkt 4 |
Punkt 5 | Punkt 6 |
[an error occurred while processing this directive] [an error occurred while processing this directive]
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt