Nov 22
Liquid PNG 8 Round Corners
HTML
<div id="wrapperDiv" class="wrapper">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="top-center"><div class="hack-ie6"></div></div>
<div id="bodyCenterDiv" class="body-center">
<div class="contents">contents right here</div>
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="bottom-center"><div class="hack-ie6"></div></div>
</div>
Stylesheet
.wrapper {
width: 500px;
margin: 10px auto;
}
.wrapper .top-left, .wrapper .top-center, .wrapper .top-right,
.wrapper .bottom-left, .wrapper .bottom-center, .wrapper .bottom-right {
background: transparent url(../images/png8.png) left top scroll no-repeat;
overflow: hidden;
}
.wrapper .top-left {
width: 15px;
height: 46px;
background-position: left top;
float: left;
}
.wrapper .top-center {
height: 46px;
background-position: -15px top;
_float: left;
}
.wrapper .top-right {
width: 15px;
height: 46px;
background-position: right top;
float: right;
}
.wrapper .body-center {
width: 496px;
background-color: #fff;
border-left: 2px solid #333;
border-right: 2px solid #333;
}
.wrapper .bottom-left {
width: 15px;
height: 31px;
background-position: left -46px;
float: left;
}
.wrapper .bottom-center {
height: 31px;
background-position: -15px -46px;
_float: left;
}
.wrapper .bottom-right {
width: 15px;
height: 31px;
background-position: right -46px;
float: right;
}
*html .wrapper .hack-ie6 {
width: 100%;
overflow: hidden;
}
Liquid PNG 24 Round Corners with Outer Shadows
HTML
<div id="wrapperDiv" class="wrapper">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="top-center"><div class="hack-ie6"></div></div>
<div class="body-left">
<div class="body-right">
<div id="bodyLeftDiv" class="body-left-hack-ie6"></div>
<div id="bodyRightDiv" class="body-right-hack-ie6"></div>
<div id="bodyCenterDiv" class="body-center">
<div class="contents">contents right here</div>
</div>
</div>
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="bottom-center"><div class="hack-ie6"></div></div>
</div>
Stylesheet
.wrapper {
width: 500px;
margin: 10px auto;
}
.wrapper .top-left {
width: 40px;
height: 40px;
background: transparent url(../images/top-left-png24.png) left top scroll no-repeat;
float: left;
}
.wrapper .top-center {
height: 40px;
background: transparent url(../images/top-center-png24.png) left top scroll repeat-x;
_float: left;
overflow: hidden;
}
.wrapper .top-right {
width: 40px;
height: 40px;
background: transparent url(../images/top-right-png24.png) left top scroll no-repeat;
float: right;
}
.wrapper .body-left {
width: 100%;
background: transparent url(../images/body-left-png24.png) left top scroll repeat-y;
}
.wrapper .body-center {
background-color: #e9f2f5;
margin: 0 40px;
}
.wrapper .body-right {
width: 100%;
background: transparent url(../images/body-right-png24.png) 100% top scroll repeat-y;
}
.wrapper .bottom-left {
width: 40px;
height: 40px;
background: transparent url(../images/bottom-left-png24.png) left top scroll no-repeat;
float: left;
}
.wrapper .bottom-center {
height: 40px;
background: transparent url(../images/bottom-center-png24.png) left top scroll repeat-x;
_float: left;
overflow: hidden;
}
.wrapper .bottom-right {
width: 40px;
height: 40px;
background: transparent url(../images/bottom-right-png24.png) left top scroll no-repeat;
float: right;
}
Stylesheet For IE 6
*html .wrapper .hack-ie6 {
width: 100%;
}
*html .wrapper .top-left {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-left-png24.png', sizingMethod='image');
}
*html .wrapper .top-center {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-center-png24.png', sizingMethod='scale');
}
*html .wrapper .top-right {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-right-png24.png', sizingMethod='image');
}
*html .wrapper .body-left, *html .wrapper .body-right {
background: none;
}
*html .wrapper .body-center {
width: expression(document.getElementById('wrapperDiv').offsetWidth - document.getElementById('bodyLeftDiv').offsetWidth - document.getElementById('bodyRightDiv').offsetWidth + "px");
margin: 0 40px
}
*html .wrapper .body-left-hack-ie6 {
width: 40px;
height: expression(document.getElementById('bodyCenterDiv').offsetHeight + "px");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-left-png24.png', sizingMethod='scale');
margin: 0 -40px 0 0
float:left
}
*html .wrapper .body-right-hack-ie6 {
width: 40px;
height: expression(document.getElementById('bodyCenterDiv').offsetHeight + "px");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-right-png24.png', sizingMethod='scale');
margin: 0 0 0 -40px
float:right
}
*html .wrapper .bottom-left {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-left-png24.png', sizingMethod='image');
}
*html .wrapper .bottom-center {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-center-png24.png', sizingMethod='scale');
}
*html .wrapper .bottom-right {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-right-png24.png', sizingMethod='image');
}
Related Posts
