Оригинал сообщения
Комментарии: [показать]

Продолжаю серию статей о том, как оформить простейшие элементы на сайте с помощью CSS. Напомню ссылки на прошлые статьи:

• Оформление внешних ссылок с помощью CSS


• Способы верстки блока с закругленными краями


• Как сделать красивую кнопку с помощью CSS


• Способы оформления цитат с помощью CSS

Сегодня я расскажу вам о 5 простых и эффективных способах оформления изображений с помощью CSS.

[500x136]

Где заказать классические кухни? Мебельная компания “Аммати” предлагает широкий выбор кухонной мебели и готовые дизайнерские решения!

Хотите изменить дизайн интерьера к Новому Году? Обращатейсь в компанию DECORIT!

Воронеж Интернет Новости.

Internex - студия создания сайтов. Качественные сайты, раскрутка за низкие цены!

Красивые темы для nokia 8600 Luna. Большая база картинок, игр и рингтонов для телефонов нокия на http://ntema.ru.

1. Изображение с тенью

Для этого потребуется всего пару строчек кода и одна дополнительная картинка (тень). Пример.

HTML:

<img class="shadow" src="sample.jpg" alt="" />

CSS:

img.shadow {

 background: url(shadow-1000x1000.gif) no-repeat right bottom;

 padding: 5px 10px 10px 5px;

}

Изображение с двойным обрамлением

Еще один очень простой, но очень хороший способ придать изображению эффектность. Пример.

HTML:

<img class="double-border" src="sample.jpg" alt="" />

CSS:

img.double-border {

  border: 5px solid #ddd;

  padding: 5px; /*ширина внутренней границы*/

  background: #fff; /*цвет внутренней границы*/

}

Изображение в рамке

Очень красивый эффект, особенно если сделать красивую рамку :) Пару строчек кода и получаем вот такой пример.

HTML:

<img src="frame.png" class="frame-block" alt="" />

CSS:

.frame-block {

  background: url(sample.jpg) no-repeat center top;

  height:335px;

  width: 575px;

  display: block;

}

Изображение с защитным слоем (watermark)

Чтобы создать визуальный эффект (исходная картинка не изменится) изображения с защитным слоем, можно использовать пример, описанный выше. Или попробовать второй способ:

HTML:

<div class="transp-block">

<img class="transparent" src="sample.jpg" alt="" />

</div>

CSS:

.transp-block {

  background: #000 url(watermark.jpg) no-repeat;

  width: 575px;

  height: 335px;

}

img.transparent {

  filter:alpha(opacity=75);

  opacity:0.75;

}

Пример.

А чтобы действительно наложить на картинку копирайт, можно воспользовать этим ресурсом.

Изображение с подписью

Подписанное изображение лучше воспринимается визуально. Поэтому рассмотрим как сделать вот такой пример.

HTML:

<div class="img-desc">

<img src="sample.jpg" alt="" />

<cite>Salone del mobile Milano, April 2008 - Peeta</cite>

</div>

CSS:

.img-desc {

  position: relative;

  height:335px;

  width: 575px;

}

.img-desc cite {

  background: #111;

  filter:alpha(opacity=55);

  opacity:0.55;

  color: #fff;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 555px;

  padding: 10px;

  border-top: 1px solid #999;

}

Знаете другие интересные способы? Делитесь :)

Tnx to www.sohtanaka.com

[показать]LIci WP - WordPress crossposting plugin