5 способов как оформить изображение. Блог для вебмастеров

Веб дизайн, CSS, SEO, юзабилити. Уроки веб-мастерства

5 способов как оформить изображение

7 Декабрь 2008 просмотров 3,783 комментариев 10

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

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

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

Хотите изменить дизайн интерьера к Новому Году? Обращатейсь в компанию 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

Комментариев 10 »

]]>WebMast пишет: ]]>

Красивые варианты.. Обязательно попользуюсь! Спасибо.. P.S: Последний вариант. Я думал так долго надо делать, легче сделать картинкой. Оказывается не так уж и трудно..

Цитировать

# 7 Декабрь 2008 at 19:48
]]>Anton пишет: ]]>

Интересная статья, особенно понравилось первый и последний вариант.

Цитировать

# 8 Декабрь 2008 at 8:46
]]>Делитант пишет: ]]>

А если нет возможности редактировать CSS-файл, можно сделать что-то похожее?

Цитировать

# 9 Декабрь 2008 at 12:33
]]>Сергей пишет: ]]>

Впечатлил последний вариант, обязательно попробую…….

Цитировать

# 9 Декабрь 2008 at 12:48
]]>Dizer пишет: ]]>

Очень хорошие варианты! Премного благодарен!

Цитировать

# 9 Декабрь 2008 at 14:00
]]>SelenIT пишет: ]]>

Спасибо за познавательные и красивые примеры!Правда, я уж было размечтался увидеть последний пример примерно таким… :)
<style type="text/css">
img {
display: block;
position: relative;
}
img:after {
content: attr(longdesc);
background: #111;
opacity:0.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
border-top: 1px solid #999;
}
</style>
<img src="http://www.sohtanaka.com/web-design/examples/drop-shadow/sample.jpg" alt="" longdesc="Salone del mobile Milano, April 2008 – Peeta">
Но получилось это лишь в Опере 9+. И, похоже, она в этом даже слегка погорячилась (по стандарту у элемента IMG нет контента, а стало быть, некуда ставить и :after)…

Цитировать

# 9 Декабрь 2008 at 16:05
]]>Автор пишет: ]]>

Редактируйте прямо в коде страницы, а то что относится к стилям обрамляйте тегом <style type="text/css">стили тут...</style>

Цитировать

# 9 Декабрь 2008 at 23:49
]]>Олег пишет: ]]>

Спасибо за варианты! Мне это очень помогло!

Цитировать

# 15 Декабрь 2008 at 17:52
]]>Vladimir пишет: ]]>

За последний пример отдельное спасибо!

Цитировать

# 21 Февраль 2009 at 3:49
]]>Denis пишет: ]]>

Во давно искал, терь у меня на блогах будут красивые изображение, сенкс!

Цитировать

# 22 Август 2009 at 0:47