Eine Box mit transparentem Rahmen

Ein interessante Gestaltungsmöglichkeit ist die Ausstattung einer Box mit einem transparentem Rahmen. Besonders bei dahinterliegenden Bilden erhält dies ein harmonisches Aussehen.

Die Bewerkstelligung ist recht einfach:

<div id="aussen">
<div id="innen">
Hier im Block mit transparentem Rahmen steht der Inhalt.
</div></div>

Wir brauchen also zwei DIVs, das erste für den äußeren Rahmen, das zweite für den Content. Nun noch das css:

#aussen{
position:absolute;
top:50px;
left:50px;
width:180px;
height:300px;
border:3px solid black;
}

#innen{
position:relative;
margin:6px;
padding:10px;
height:268px;
background-color:black;
color:white;
text-align:center;
}

Die Position muss natürlich individuell angepasst werden.

Das Ergebnis könnt ihr hier sehen »

Box mit css3-Styles

Nun fügen wir noch ein paar css3-Styles hinzu: Runde Ecken und transparenten Hintergrund:

#aussenrahmen2{
position:absolute;
top:1050px;
left:150px;
width:180px;
height:300px;
border:3px solid black;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#innenrahmen2{
position:relative;
margin:6px;
padding:10px;
height:268px;
background-color:black;
background: rgba(0, 0, 0, .8);
color:white;
text-align:center;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

« zurück