Container mit Schatten

von: Werner Zenk

So erstellen Sie einen Rahmen mit Schatteneffekt.

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an
der Küste des Semantik ...

Quelltext:

<style type="text/css">
.container{
 border-left: solid 1px #e6e8d3;
 border-right: solid 2px #c9cab8;
 border-top: solid 1px #e6e8d3;
 border-bottom: solid 2px #c9cab8;
 color: #6b6e4b;
 background-color: #f8f9f3;
 padding: 10px;
}
</style>

<div class="container">Weit hinten, hinter den Wortbergen ...</div>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der
Küste des Semantik ...

Quelltext:

<style type="text/css">
.container2{
 border-left: solid 1px #c6c6ff;
 border-top: solid 1px #c6c6ff;
 border-right: solid 2px #bbbbff;
 border-bottom: solid 2px #bbbbff;
 color: #5959ff;
 background-color: #f4f4ff;
 padding: 10px;
}
</style>

<div class="container2">Weit hinten, hinter den Wortbergen ...</div>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der
Küste des Semantik ...

Quelltext:

<style type="text/css">
.container3{
 border-left: solid 2px #cb9898;
 border-top: solid 2px #cb9898;
 border-right: solid 1px #d9b3b3;
 border-bottom: solid 1px #d9b3b3;
 color: #b65858;
 background-color: #f8efef;
 padding: 10px;
}
</style>

<div class="container3">Weit hinten, hinter den Wortbergen ...</div>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der
Küste des Semantik ...

Quelltext:

<style type="text/css">
.container4{
 border-left: solid 2px #ffd700;
 border-top: solid 2px #ffd700;
 border-right: solid 1px #ffec82;
 border-bottom: solid 1px #ffec82;
 color: #ceaf00;
 background-color: #fffce6;
 padding: 10px;
}
</style>

<div class="container4">Weit hinten, hinter den Wortbergen ...</div>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Fabian: Kann man das auch so machen, dass der Rahemn der darum ist so wie ein richtiger Schatten ein wenig versetzt ist (nicht ganz oben anfängt sondern ein paar Pixel darunter) Ansonsten sehr schön Nadine: Klasse Idee und vorallem ganz einfach anzuwenden!
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Spacer GIF

Gratis-Webfonts von Google - Webfonts mit Textschatten. Mit den Google Web Fonts haben Sie die Möglichkeit eine ganze Reihe von Schriften auf Ihrer Webseite zu nutzen, ohne dass Sie diese auf den Server hochladen müssen.

Strukturen

Seitenrand

Tabellenbild 6

Bildformat PNG

Symbolische Links - Kennzeichnen Sie Links mit Symbolen. Die Besucher erkennen sofort, was Ihnen beim anklicken des jeweiligen Links erwartet.

Bildschirmfoto erstellen

Tabellenbild 5

Blindtext - Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte …

Zeilenlinien im Text - Zeilenlinien als Hintergrundbild eines Textes einfügen.

Tabellenbild 2

Tabellen mit Rundungen

Hintergrundbild in Position

Stil …mehr