Оформление изображений при помощи CSS

В этом уроке мы рассмотрим несколько 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;

}

Надеюсь, эти способы оформления картинок пригодятся Вам в дизайне Вашего сайта!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Сергей Патин
Урок создан: 3 Апреля 2009
Просмотров: 73187
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^