Mit einem einfachen CSS-Trick lassen sich Rahmen, etwa um Boxen, in zwei verschiedenen Farben darstellen. Das Ergebnis sind optisch sehr ansprechende Boxen. Um es etwas genauer zu veranschaulichen ist hier ein Bild des zweifarbigen Rahmens, mit sehr kräftigen Farben. Die Grafik der Beispiel-Box besitzt zuerst einen weißen Rahmen, gefolgt von einem schwarzen Rahmen.
Optisch etwas ansprechender sieht die Box dann mit den folgenden Farben aus.
CSS-Code für den zweifarbige Rahmen Der Code für die HTML-Seiten sieht für das Beispiel wie folgt aus: <div class="block2"><div class="block"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div></div>
<div class="block2"><div class="block"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div></div>
In die style.css müssen die folgenden Zeilen eingefügt werden: .block2 {margin:1px;padding:1px;border:1px solid #dadada;width:212px;} .block {padding-left:5px;padding-right:5px;border:1px solid #ffffff;background:#f3f3f3; width:200px;} Hier mss natürlich die Breite für das eigene Design angepasst werden.
.block2 {margin:1px;padding:1px;border:1px solid #dadada;width:212px;} .block {padding-left:5px;padding-right:5px;border:1px solid #ffffff;background:#f3f3f3; width:200px;}
Fertig! Viel Spaß mit dem Experimentieren an diesem kleinen CSS-Codeschnipsel.
admin
