(Stand: 23.12.24, Adresse: http://www.grammiweb.de/html/html094.shtml)
3D-Boxen ohne Grafiken
Dreidimensionale Elemente können Webseiten auflockern und gerade textlastige Inhalte besser lesbar machen. Um eine räumliche Darstellung zu erreichen, werden häufig Grafiken verwendet, was den Nachteil hat, dass die Ladezeit erhöht wird und die Anzeigeflexibilität sinkt.
Mit ein wenig CSS ist die einfache Darstellung in 3D kein Problem mehr. Dazu werden die anzuzeigenden Inhalte einfach in einen Container verfrachtet, dem eine Hintergrundfarbe zugeordnet wird. Weiterhin wird dieser Container von einem (in einer dunkleren Farbe gehaltenen) Rahmen mit einem Pixel Breite umfasst. Die Breite wird an zwei Stellen (in der Regel rechts und unten) auf einen individuellen Wert erhöht, was dann den dreidimensionalen Effekt ergibt.
Ein Beispiel
So schnell erhält man 3D-Boxen
Der Quellcode:
<html><head>
<style type="text/css">
#hinweisbox {
padding:5px;
border:1px solid #C5D8C0;
background-color: #E9EFE7;
border-right: 2px solid #B0B7AF;
border-bottom: 2px solid #B0B7AF;
}
</style>
</head><body>
<p><div id="hinweisbox">
So schnell erhält man 3D-Boxen
</div></p>
</body></html>
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt