5 способов оформления изображений

[lena1]

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo-->Тень<!--sizec--></span><!--/sizec-->

You must be registered for see images attach

HTML:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img class="shadow" src="sample.jpg" width="575" height="335" alt="" /><!--c2--></div><!--ec2-->

CSS:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->img.shadow{
&nbsp;&nbsp;background: url(shadow-1000x1000.gif) no-repeat right bottom;
&nbsp;&nbsp;padding: 5px 10px 10px 5px
}<!--c2--></div><!--ec2-->

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo-->Двойная Рамка<!--sizec--></span><!--/sizec-->

You must be registered for see images attach

HTML:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img class="double-border" src="sample.jpg" width="575" height="335" alt="" /><!--c2--></div><!--ec2-->

CSS:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->img.double-border{
&nbsp;&nbsp;border: 5px solid #ddd;
&nbsp;&nbsp;padding: 5px; /*Размер внутренней рамки*/
&nbsp;&nbsp;background: #fff; /*Цвет внутренней рамки*/
}<!--c2--></div><!--ec2-->

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo-->Декоративная Рамка<!--sizec--></span><!--/sizec-->

You must be registered for see images attach

HTML:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div class="frame-block">
&nbsp;&nbsp;<span> </span>
&nbsp;&nbsp;<img src="sample.jpg" width="575" height="335" alt="" />
</div><!--c2--></div><!--ec2-->

CSS:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.frame-block{
&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;width: 575px;
&nbsp;&nbsp;height:335px
}
.frame-block span {
&nbsp;&nbsp;background: url(frame.png) no-repeat center top;
&nbsp;&nbsp;width: 575px;
&nbsp;&nbsp;height:335px;
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;position: absolute
}<!--c2--></div><!--ec2-->

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo-->Водяной Знак<!--sizec--></span><!--/sizec-->

You must be registered for see images attach

HTML:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div class="transp-block">
&nbsp;&nbsp;<img class="transparent" src="sample.jpg" width="575" height="335" alt="" />
</div><!--c2--></div><!--ec2-->

CSS:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.transp-block{
&nbsp;&nbsp;background: #000 url(watermark.jpg) no-repeat;
&nbsp;&nbsp;width: 575px;
&nbsp;&nbsp;height: 335px
}
img.transparent{
&nbsp;&nbsp;filter:alpha(opacity=75);
&nbsp;&nbsp;opacity:0.75
}<!--c2--></div><!--ec2-->

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo-->Название Изображения<!--sizec--></span><!--/sizec-->

You must be registered for see images attach

HTML:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div class="img-desc">
&nbsp;&nbsp;<img src="sample.jpg" width="575" height="335" alt="" />
&nbsp;&nbsp;<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div><!--c2--></div><!--ec2-->

CSS:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.img-desc{
&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;width: 575px;
&nbsp;&nbsp;height:335px
}
.img-desc cite{
&nbsp;&nbsp;background: #111;
&nbsp;&nbsp;filter:alpha(opacity=55);
&nbsp;&nbsp;opacity:0.55;
&nbsp;&nbsp;color: #fff;
&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;bottom: 0;
&nbsp;&nbsp;left: 0;
&nbsp;&nbsp;width: 555px;
&nbsp;&nbsp;padding: 10px;
&nbsp;&nbsp;border-top: 1px solid #999
}<!--c2--></div><!--ec2-->