Mehrere / mehrfarbige “border” (Rahmen) mit CSS

Embossed HTML Element aus Twitters Bootstrap mit Border und inset Shadow

Es kann öfters einmal nützlich sein, einem HTML-Element mehr als nur einen Rahmen zu geben, respektive dem Element einen mehrfarbigen Rahmen zuzuweisen. Als Beispiel: Man möchte, dass das Element so wirkt, als sei es in die Seite “eingedrückt” (embossed). Ich hatte mir vor ein paar Tagen Gedanken dazu gemacht, weil ich einen Rahmen nur im oberen Teil des Elements brauchte, der eigentlich durchgängig grau ist und 5px dick. Eigentlich… Ganz Links, fast schon unauffällig, sollten die ersten 5px der Linie gelb sein.CSS Border mit zwei Farben So gesehen also einen zweifarbigen Border. Lösbar wäre es über die neue “border-image” Definition gewesen, würde aber bedeuten, man müsste wieder ein Bildchen mehr übertragen. Man hätte auch einen “Fake-Border” mit zwei Divs (weiter unten beschrieben) erstellen können, das wollte ich aber vermeiden. Man sollte immer versuchen, das Font-End als Schichtenmodell zu behandeln. Neben “Unobtrusive JavaScript” also auch immer “Unobtrusive CSS” verwenden, somit sind Präsentationsänderungen unabhängig von der Struktur. Ein Artikel bleib ein Artikel. Die Lösung sollte ab IE8 lauffähig sein. Hier nun drei gute Lösungen für doppelte oder mehrfarbige Rahmen mit CSS(3):

Pseudo-Element

Mein Liebling. Mit dem Pseudo-Element “:before” ist es möglich, einen zwei- oder mehrfarbigen Rahmen anzulegen. Im Beispiel (http://jsfiddle.net/672LA/) habe ich das Umgesetzt, was ich oben als Eingangsproblem beschrieben habe; grauer, 5px dicker Rahmen, die ersten 5px der in der Länge gelb. So haben wir also einen zweifarbigen Border mit reinen CSS Mitteln.

#myDualColorBorder {
border-top: 5px solid #eaeaea;
position: relative;
}
#myDualColorBorder:before {
position: absolute;
top: -5px;
display: block;
content: '';
border-top: 5px solid #ffd300;
width: 5px;
}
view raw dualcolor_border.css hosted with ❤ by GitHub

Es ist aber auch einfach möglich, einen doppelten Rahmen anzulegen, zum Beispiel für den Anfangs erwähnten embossed Effekt. Dann einfach nur das Verschieben durch “top: -5px;” entfernen und die width auf 100% setzen. Soll der Rahmen an allen Seiten sein, wird noch ein “height: 100%;” benötigt. Hier ein Beispiel: http://jsfiddle.net/ftvJN/. Dort ist aber nur ein Rahmen oben, weswegen keine Höhendefinition beim Pseudo-Element zu finden ist.

All these nice things!

Outline

#myDoubleborder {
border: 2px solid green;
outline: 2px solid red;
}
view raw outline_border.css hosted with ❤ by GitHub

Führt zu folgendem Ergebnis: http://jsfiddle.net/qFGeN/1/. Bitte beachten, dass es bei Outline mit äußeren Schatten in CSS zu unerwünschtem Verhalten kommen kann. Die Outline legt sich teilweise um den äußeren Schatten und nicht um das Element.

Box-Shadow

Ein doppelter Rahmen mit der neuen Box-Shadow Angabe sollte der Outline-Variante vorgezogen werden. Es führt zum gleichen Ergebnis (http://jsfiddle.net/hZGa7/3/), die Outline-Angabe wird, wie oben erwähnt, nicht unbedingt von jedem Browser gleich behandelt, bzw. wie gewünscht gerendert.

#myDoubleShadowBorder {
border: 2px solid green;
box-shadow: inset 0px 0px 0px 2px red;
}
view raw shadow_border.css hosted with ❤ by GitHub

Der Box-Shadow eignet sich hervorragend für einen Eindrückeffekt. Früher wurde dieser Effekt häufig durch eine Grafik als background-image erzielt. Durch zwei Rahmen um ein Element, mit geschickter Farbabstufung, wurde dieser Effekt dank Photoshop anstelle reinem CSS erreicht. Meiner Meinung nach kommt der Effekt noch besser, wenn der Schatten nach innen einen leichten Verlauf hat. Das Ergebnis des folgendes Codes könnt ihr hier ansehen: http://jsfiddle.net/aPv9X/

#myEmbossedElement {
background-color: #eee;
border: 2px solid #eee;
border-radius: 5px;
box-shadow: inset 1px 1px 5px 1px #ddd;
}
view raw embossed_border.css hosted with ❤ by GitHub

Es gibt aber noch weitere Möglichkeiten, die ich nur eingeschränkt empfehlen kann. Variante Eins sollte nur bei wirklich grafisch aufwendigen Rahmen benutzt werden und Variante Zwei ist für diejenigen, die immer noch einen völlig veralteten Browser unterstützen (müssen). Variante Drei wird in den wenigsten Fällen von Nutzen sein, sei aber trotzdem erwähnt.

Border-Image

Zur Border-Image Definition kann man in Normans Blog die Grundlagen nachlesen. Das war gleich der erste Eintrag in Google, von daher gehe ich darauf hier nicht weiter ein, sollte reichen… 😉

Div

Diese Variante (http://jsfiddle.net/R5adG/) sollte sogar im IE6 laufen, überprüft habe ich es aber nicht. Ich würde sie nur empfehlen, wenn man keine der oben beschriebenen Möglichkeiten nutzen kann. Es ist immer sinnvoll, das Markup größtmöglich vom Styling zu trennen und unnötige Divs sollte man sowieso vermeiden.

Border-Style

Zum Abschluss sei noch die Variante zu nennen, die im ersten Moment als logisch erscheint. Es ist mit dem “border-style” durchaus auch möglich einen doppelten Rahmen oder einen Embossed-Effekt zu erzielen, aber die Flexibilität hält sich stark in Grenzen.

Zunächst das Beispiel: http://jsfiddle.net/FM3fF/, dann der Code

div {
width: 200px;
height: 100px;
margin: 30px auto;
}
#doubleBorder {
border-style: double;
}
#insetBorder {
border-style: inset;
}

One thought on “Mehrere / mehrfarbige “border” (Rahmen) mit CSS

  1. Romy

    Muahaha, der Zwerg ist grandios!
    Okay, nun muss ich echt mich mal wieder mehr mit CSS und JS auseinandersetzen.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>