Рамки, тени, кнопки, плашки 1 февраля 2008

<style type="text/css">

/* Стили для данного примера. */
.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;
}
/*****************************/

/* Чтобы исправить поведение курсора и hover в IE. */
.framed a
{
cursor: pointer;
//cursor: hand;
}
.framed a:hover
{
background-color: transparent;
}

/* Для компенсации отрицательного значения margin-bottom в IE. */
.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;
/* Отступы от границ кнопки. Нижний больше на 2px, которые занимает тень. */
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;
/* Общие ширина и высота изображения. Можно указать с запасом. */
width: 800px;
height: 400px;
background: url('framed.png') 0 0 no-repeat;
/* IE 7 уже умеет показывать png, поэтому используем хак, который он не понимает. */
-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;
}

/* Демонстрируем смену оформления у кнопки. В данном случае на hover. */
.framed a:hover .t *
, .framed a:hover .b *
{
top: -200px;
}
</style>
<div class="example">
    <ul class="framed horizontal">
        <li>
            <a href="../../etc/png-1/" class="f">
                <ins class="t l"><ins></ins></ins><ins class="t r"><ins></ins></ins>
                <ins class="c">Про PNG. Часть первая</ins>
                <ins class="b l"><ins></ins></ins><ins class="b r"><ins></ins></ins>
            </a>
        </li>
        <li>
            <a href="../../etc/png-2/" class="f">
                <ins class="t l"><ins></ins></ins><ins class="t r"><ins></ins></ins>
                <ins class="c">Про PNG. Часть вторая</ins>
                <ins class="b l"><ins></ins></ins><ins class="b r"><ins></ins></ins>
            </a>
        </li>
    </ul>
</div>