Frames, shadows, buttons, plates

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	Make a design element with an intricate frame and custom sizes using as few tags and files as possible.

In order to reduce the number of tags used you should prepare the right image. It’s an easy procedure—just take a look at framed.png. In the sample the width of button corners is 11 pixels and the height is 10 pixels. If want to alter the sizes, replace or span the previous values in your styles.

This approach doesn’t work in strict and transitional modes for IE 6 or lower.

How it looks in the browser

<style type="text/css">

/* Styles for this sample */
.example
{
position: relative;
width: 100%;
padding: 20px;
background: url('../png_in_ie/grid-10.gif') 100% 100%;
overflow: hidden;
}
.horizontal
, .horizontal ul
{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
.horizontal:after
, .horizontal ul:after
{
content: '';
display: block;
clear: left;
}
.horizontal li
{
float: left;
margin: 0 1em 0.5em 0;
padding: 0;
}
/*****************************/

/* Fixing IE cursor and hover behaviour */
.framed a
{
cursor: pointer;
//cursor: hand;
}
.framed a:hover
{
background-color: transparent;
}

/* Balancing IE negative margin-bottom value */
.framed.horizontal
{
//padding-bottom: 10px;
}

.framed .f
{
position: relative;
z-index: 1;
display: block;
float: left;
min-height: 10px;
//height: 10px;
color: #000000;
}
.framed .c
{
position: relative;
z-index: 2;
display: block;
margin: 0 0 -10px 0;
/* Padding around button; bottom padding 2 px meant for shadow */
padding: 2px 15px 4px 15px;
}
.framed .t
, .framed .b
{
position: absolute;
z-index: 1;
top: 0;
//top: auto;
bottom: 0;
left: 0;
right: 11px;
overflow: hidden;
//width: 100%;
//height: 100%;
}
.framed .b
{
top: auto;
bottom: -10px;
height: 10px;
}
.framed .r
{
left: auto;
//left: -11px;
right: 0;
//margin-left: 100%;
width: 11px;
}
.framed .t *
, .framed .b *
{
position: absolute;
top: 0;
left: 0;
/* Total image width and height; extra size possible */
width: 800px;
height: 400px;
background: url('framed.png') 0 0 no-repeat;
/* IE 7 is capable of viewing png, so hack it elsehow */
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=framed.png,sizingMethod=crop);
}
.framed .t *
{
margin-top: -10px;
}
.framed .l *
{
//width: 100%;
margin-left: -11px;
}

/* Creating button hover effect */
.framed a:hover .t *
, .framed a:hover .b *
{
top: -200px;
}
</style>
<div class="example">
    <ul class="framed horizontal">
        <li>
            ../../etc/png-1/" class="f">
                <ins class="t l"><ins></ins></ins><ins class="t r"><ins></ins></ins>
                <ins class="c">About PNG. Part One</ins>
                <ins class="b l"><ins></ins></ins><ins class="b r"><ins></ins></ins>
            </a>
        </li>
        <li>
            ../../etc/png-2/" class="f">
                <ins class="t l"><ins></ins></ins><ins class="t r"><ins></ins></ins>
                <ins class="c">About PNG. Part Two</ins>
                <ins class="b l"><ins></ins></ins><ins class="b r"><ins></ins></ins>
            </a>
        </li>
    </ul>
</div>

Order a design...