Freitag, Januar 13, 2012

Sidebox als Grundlage einer Rounded Corner Box


Das Original konnte ich nur noch unter
http://web.archive.org/web/20100322232607/http://www.vertexwerks.com/tests/sidebox/
finden.

The XHTML:
<div class="sidebox">
    <div class="boxhead">
        <h2>Test Headline</h2>
    </div>
    <div class="boxbody">
        This is a short sample paragraph.</br>
        And another one.
    </div>
</div>

The CSS:

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
background: url(sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

Keine Kommentare: