[an error occurred while processing this directive]

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Formulare ganz einfach erstellen

Onlineformulare mit wenigen Mausklicks einfach und bequem selbst gemacht

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 08.03.21, 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>


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