В этом уроке мы рассмотрим несколько CSS техник для оригинального оформления картинок на сайте. Изображения, используемые в примерах, можно скачать отсюда. 1. Эффект рамки для изображения. Пример здесь. HTML <div class="frame-block"> <span>&nbsp;</span> <img src="sample.jpg" alt="" /> </div> CSS .frame-block { position: relative; display: block; height:335px; width: 575px; } .frame-block span { background: url(frame.png) no-repeat center top; height:335px; width: 575px; display: block; position: absolute; } 2. Водяной знак на изображении. Пример здесь. HTML <div class="transp-block"> <img class="transparent" src="sample.jpg" alt="" /> </div> CSS .transp-block { background: #000 url(watermar.jpg) no-repeat; width: 575px; height: 335px; } img.transparent { filter:alpha(opacity=75); opacity:.75; } В данном случае в качестве водяного знака использовалось следующее изображение. 3. Подпись к изображению. Пример здесь. HTML <div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Подпись к изображению</cite> </div> CSS .img-desc { position: relative; display: block; height:335px; width: 575px; } .img-desc cite { background: #111; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: 0; left: 0; width: 555px; padding: 10px; border-top: 1px solid #999; } Надеюсь, эти способы оформления картинок пригодятся Вам в дизайне Вашего сайта!