воскресенье, декабря 07, 2008

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

Продолжаю серию статей о том, как оформить простейшие элементы на сайте с помощью 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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

|