Чтобы представить фотографии в лучшем виде, у вас вполне может появиться желание украсить их более сложными рамками, чем те, что были рассмотрены в настоящей главе. Совместное использование рамок и фоновых изображений позволяет добиться потрясающих визуальных эффектов – и все это с помощью CSS. Опять же это избавит вас от необходимости обработки изображений в Photoshop для создания рамок.

Решение
На рис. 3.16 представлена фотография, которая может быть использована в качестве элемента страницы или быть частью фотоальбома. Самый простой метод создания двойной рамки состоит в задании фонового цвета и внутреннего отступа для изображения. В этом случае цвет фона послужит первой рамкой, а собственно рамка – второй:
chapter03/doubleborder.css (фрагмент)
img.doubleborder {
border: 1px solid #333;
padding: 5px;
background-color: #EEEEEE;
}

Рис. 3.16. Простая двойная рамка, созданная исключительно средствами CSS (DEMO)

С помощью фонового изображения можно добиться более сложных эффектов. В следующем примере CSS-кода используется заполнение области под фотографией небольшим мозаичным изображением для создания эффекта, показанного на рис. 3.17:
chapter03/doubleborder-bg.css (фрагмент)
img.doubleborder {
border: 5px solid #8E787B;
padding: 20px;
background-image: url(doubleborder-bg.gif);
}

Рис. 3.17. Создание двойной рамки с помощью фонового изображения (DEMO)

Обсуждение
Для достижения описанных выше эффектов использовались внутренние отступы для изображения, создающие пустое пространство между ним и рамкой. Пустое пространство будет заполнено цветом фона или фоновым изображением, и таким образом можно создавать привлекательные рамки без использования вложенных элементов.