Seitenrahmen mit Farben und border-style

Beispiele und Tipps

Seitenrahmen mit verschiedenen Farben

Ganz ohne Grafiken lassen sich Seitenrahmen auch mit ineinander verschachtelten div in verschiedenen Farben und mit verschiedenen Stilen für die Ränder der div erstellen.

Hier erstmal nur mit Farben.

Der Quelltext für so einen Rahmen ist so klein, daß er auch in einen Baustein des Onlineverkaufsformulars oder des Turbo Lister passt. Deshalb ist hier der CSS style direkt zu jedem div hinzugefügt.

<div style="background: #6989BA; padding: 6px ;margin: 10px 30px ;">
<div style="background: #CBD79D; padding: 25px;">
<div style="background: #E1A9A8; padding: 10px ;">
<div style="background: #B3AFDA; padding: 7px ;">
<div style="background: #95BDCE; padding: 16px ;">
<div style="background: #EFEFEF; padding: 20px ;color: #00005F;">

<p>Text und Bilder</p>

</div> </div> </div> </div> </div> </div>

Dieser Quelltext hat 430 Zeichen - bis zu 1000 passen in einen Baustein.

Mit padding wird der Abstand zum nächsten div bestimmt.
Mit margin erhält der äußere div einen Abstand nach oben und unten (10px) und zu den Seiten (30px)
Mit color: [Farbnummer] wird im inneren div die Schriftfarbe des Textes festgelegt.

Wenn weniger oder mehr Rahmen benutzt werden darauf achten nicht nur den Beginn
<div id="rahmen4"> sondern auch das Ende des HTML-tags für den Rahmen zu entfernen (</div>)bzw. hinzuzufügen.

Die gewünschten Farben einfach austauschen.
Um ansprechende Farbkombinationen auszuprobieren solltet ihr einen Farbwähler benutzen. Einen sehr guten (kostenlosen findet ihr bei pk-world - mit ihm lassen sich auch Helligkeit und Sättigung der Farben verändern.

Harmonische Farbkombinationen kann man online bei WebMart anzeigen lassen - oder umfangreicher (auf englisch) bei wellstyled.com

Seitenrahmen mit Farbverlauf

So einen Rahmen stellt man zumeist mit Grafiken in einer Tabelle her - dieser ist aber auch mit verschachtelten div ohne Grafik erstellt.

Den Farbverlauf muß man aber nicht von Hand ausprobieren - Farben und Quelltext kann man mit diesem Generator von isdntek erstellen.

Für so einen metallic Effekt die mittlere Farbe (MAIN color) auf weiß oder eine sehr helle Farbe stellen - top und bottom color auf eine dunkle (am besten die gleiche). Dann die Anzahl der Farbverlaufsstreifen ( Number of shades) eventuell verändern.

Über der Vorschau kann man noch ergänzen: die Textfarbe (Text color), die Hintergrundfarbe des Textfeldes (Background color), den Abstand des Textes vom Rahmen (Space around text) und die Breite der einzelnen Farbstreifen (Stripe Thickness - hier 2).

Nach Klick auf "Apply" ist der Quelltext fertig zum kopieren.

Varianten

Den Quelltext des Generators kann man auch für weitere Experimente benutzen. Für diesen Doppelrahmen war z.B. folgendes notwendig:

• der innere div vor dem <!-- start page content -->, der Blindtext und eins der schließenden div (</div> - wichtig !!!) wurde gelöscht. An diese Stelle der gleiche Rahmen mit Streifenbreite 1 noch einmal dazwischen kopiert.

• im allerersten div das padding: 2px ersetzt durch padding:30px 50px; und eine Kontrastfarbe für den Hintergrund eingefügt.

Man kann auch den inneren Teil des Rahmens (samt gleicher Anzahl schließender div) kopieren und vor den schließenden div des äußeren Rahmens noch einmal anfügen - dann erhält man verschiedene Abschnitte.

Seitenrahmen mit border-style

Dieser Rahmen besteht aus einer wilden Mischung der verfügbaren Rahmenstile ;-)

Als Format kann ein Rahmen jedem div so zugewiesen werden:

<div style="border: 8px solid #b9c3d4">

In dieser kurzen Schreibweise sind drei erforderliche Werte enthalten:

• border-width: 8px - die Dicke des Randes
• border-style: solid - der Rahmenstil
• border-color:#b9c3d4 - die Farbe des Rahmens

Achtung: nur solid, dashed und double werden ziemlich gleich in allen Browsern angezeigt.
alle anderen Stile sehen teilweise sehr unterschiedlich aus.
Eine Übersicht über die Darstellung in verschiedenen Browsern.

Diese Unterschiede können zu einem völlig anderen Gesamteindruck führen - auch wenn man dies in Kauf nimmt sollte man zu dunkle oder zu helle Farben vermeiden.


 

Ein Rahmen nur mit mehreren Bordern - sie wirken zwar verschieden - aber bilden dennoch in beiden Browsern einen klaren Seitenrahmen.

(links Firefox - rechts Internet Explorer - am schönsten in Opera/ unten)

<div style="background: #FFFFFF; padding: 5px; margin: 20px;border: 15px ridge #333399">
<div style="padding: 5px; border: 13px ridge #3B9682">
<div style="padding: 5px; border: 11px ridge #FFDB49">
<div style="padding: 5px; border: 9px ridge #FFA64D">
<div style="background: #FFFFF2; padding: 10px; border: 7px ridge #FF3151; font-family :'lucida sans', Arial, sans-serif,;color: #00009F;">

<p align="center">Text und Bilder</p>

</div> </div> </div> </div></div>

Mix von Farbflächen und Border

Farbrahmen können durch entsprechende border abgegrenzt und betont werden wie hier

<div style="background: #43D0D0; padding: 26px ;margin: 20px ; border: 4px outset #74DCDC">
<div style="background: #279B9B; padding: 6px; border: 2px solid #000000">
<div style="background: #2B2BAB; padding: 14px ;border: 2px solid #EFEFEF">
<div style="background: #279B9B; padding: 6px ;border: 2px solid #EFEFEF">
<div style="background: #EFEFEF; padding: 15px ; border: 3px inset #43D0D0;color: #00009F;">

<p align="center">Text und Bilder</p>

</div> </div> </div> </div></div>

... oder Farbrahmen und border bilden einen phantasievollen Mix

<div style="margin:10px 50px ">
<div style="border: 4px solid #000000; padding: 2px; background:#8F8F8F;" >
<div style="border: 10px dotted #3F3F3F; padding: 0px; background:#FFFFFF;">
<div style="border: 8px dashed #0080FF; padding: 2px; background:#0070C0;">
<div style="border: 6px double #00009F; padding: 5px; background:#00E090;">
<div style="border: 4px inset #FF1F00; padding: 2px; background:#FF1F00;">
<div style="border: 2px outset #FFBF00; padding: 5px; background:#FFFF00;">
<div style="border: 4px dashed #00C0FF; padding: 5px; background:#00C070;">
<div style="border: 10px double #008030; padding: 12px; background:#00C0FF;">
<div style="border: 4px ridge #0000FF; padding: 15px; background:#FFFFFF;">

<p>Text und Bilder</p>

</div></div></div></div></div></div></div></div> </div></div>

Es gibt unendlich viel Kombinationsmöglichkeiten
Das was ihr euch nach diesen Tipps zusammenstellt wird ein ganz individueller und unverwechselbarer Seitenrahmen.
Viel Erfolg beim experimentieren

Statistik
heute: 221 
online: 1