Студия
создания сайтов
Работаем с 2009 года
ap@ap-web.ruandrew59rus (342)  204 - 48 - 69 (912)  884 - 80 - 87

Делаем вокруг изображения паспарту, состоящее из рамки и цветной области.

Как украсить изображения на страницах своего сайт путем простейшего border было рассказано в прошлый раз.

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


паспартуПаспарту (оригинально по-франзуски: passe par tout ) называется картонная рамка для фотографии или рисунка с отверстием внутри.
Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной.
Конечно, на веб-страницах сайта нет нужды полностью имитировать подобную рамку, поэтому паспарту в случае интернет-дизайна мы будем называть цветную прямоугольную область вокруг изображения.

На рисунке Вы видите фотографию с изображением паспарту.
Путем несложного кода нечто подобное будет и на ваших страницах.

Существует несколько способов получить желаемый результат, способы различаются подходом и, естественно, кодом. Разберем поподробнее:

Применение padding и background

Самый быстрый метод получения результата состоит в добавлении к селектору IMG стилевых свойств padding и background.
Свойство padding задаёт пространство вокруг картинки, а свойство background заполняет это пространство желаемым цветом.

В примере ниже показано, как использовать эти стилевые атрибуты совместно с тегом <img>.

в стилях сайта добавляем div passepartout

.passepartout

{
padding: 30px; /* Ширина паспарту */
background: #f0f0f0; /* Цвет фона паспарту */
border: 2px solid #666; /* Параметры рамки */
}

в коде страницы добавлям div или class к вашему изображению

<div="passepartout"><img src="/images/ваша картинка.jpg"></div>
или
<img src="/images/ваша картинка.jpg" alt="альт картинки" class="passe-partout">

В описанном выше примере вокруг фотографии добавляется паспарту серого цвета (редактируется цветом фона паспарту), а вокруг него устанавливается рамка толщиной два пиксела (редактируется параметром рамки).

Плюсом приведенного метода является простота реализации, а также тот момент, что кроме тега <img> не требуется вводить дополнительные элементы.
Достаточно только для изображения указать введенный нами класс passepartout и вокруг картинки автоматически появится паспарту.
Из минусов - это то, что нельзя добавить рамку вокруг самого изображения.

Использование width

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

При этом изображение помещается внутрь тега <figure>, и все желаемые стилевые свойства добавляются для него.

Но здесь имеется одна особенность, чтобы браузеры корректно отображали паспарту,<figure> следует установить строчно-блочным элементом, как показано в примере ниже.

Браузер IE до версии 9.0 не понимает новые теги HTML5, поэтому для него добавляется скрипт, чтобы пример работал в старых версиях IE.

в стилях сайта добавляем

.passepartout {
padding: 40px; /* Размер паспарту */
background: #f0f0f0; /* Цвет фона паспарту */
border: 2px solid #800000; /* Параметры рамки */
display: inline-block; /* Строчно-блочный элемент */
margin: 0; /* Убираем отступы */ }

.passepartout img {
border: 2px solid #666; /* Рамка вокруг изображения */
}

фильтр для IE

<!--[if lt IE 9]>
<script>document.createElement('figure');</script>
<![endif]-->

код для вставки в страницу

<figure class="passepartout">
<img src="images/ваша картинка.jpg" width="200" height="231" alt="альт картинки">
</figure>

Вот собственно и всё.

браузер, интернет, сайт

Отправьте заявку и мы с Вами свяжемся

Отправляя заявку Вы соглашаетесь на обработку своих персональных данных (подробнее)

Ваше имя* 
N телефона* 

Студия AP-Web
Наши контакты :

  • 614109, Россия, Пермь,
    ул. 5-я Каховская, д. 10-А, оф. 220
  • ap@ap-web.ruandrew59rus
  • +7 (342)  204 - 48 - 69 +7 (912)  884 - 80 - 87