Разделы

Создание паспарту

Метки:

изображение

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

Рис. 1

Рис. 1. Пример паспарту

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

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

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

Пример 1. Простой способ создания паспарту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Паспарту</title>
  <style type="text/css">
   IMG.passe-partout {
    padding: 30px; /* Ширина паспарту */
    background: #f0f0f0; /* Цвет фона  паспарту */
    border: 2px solid #666; /* Параметры рамки */ 
   }
  </style>
 </head>
 <body>
  <p><img src="girl.jpg" width="200" height="293" alt="Девочка с муфтой" class="passe-partout"></p>
 </body>
</html>

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

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

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

В том случае, когда рамка вокруг картинки должна быть обязательна, придется воспользоваться другим способом создания паспарту. При этом изображение помещается внутрь контейнера <DIV>, и все желаемые стилевые атрибуты добавляются для селектора DIV. Но здесь имеется одна особенность, <DIV> это блочный элемент и по умолчанию занимает всю доступную ширину, поэтому придется пойти на хитрость и принудительно установить желаемый размер. Он складывается из ширины картинки, полей слева и справа и удвоенной толщины границы. Высота зависит от контента, так что в нашем случае достаточно добавить поля сверху и снизу через атрибут padding, как показано в примере 2.

Пример 2. Усложенный способ создания паспарту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Паспарту</title>
  <style type="text/css">
   .passe-partout {
    padding: 40px 0; /* Размер паспарту по горизонтали и вертикали */
    background: #f0f0f0; /* Цвет фона паспарту */
    border: 2px solid #800000; /* Параметры рамки */
    text-align: center; /* Выравнивание по центру */
    width: 284px; /* Ширина блока */
   }
   .passe-partout IMG {
    border: 2px solid #666; /* Рамка вокруг изображения */
   }
  </style>
 </head>
 <body>
   <div class="passe-partout"><img src="siberia.jpg" width="200" height="231" alt="Полярник"></div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Паспарту с рамкой вокруг фотографии

Неудобство приведенного метода очевидно. При большом количестве изображений разной ширины придется принудительно устанавливать значение width для каждой картинки. Также учтите, что паспарту сохраняет свою блочность и любой текст возле нашего блока будет начинаться с новой строки. Чтобы создать обтекание картинки текстом к стилю класса passe-partout следует добавить float: left.

Разделы

Термины

Создание паспарту

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

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

Отправить комментарий