В этом уроке мы покажем, как создать почтовую рамку из изображения, используя свойство изображения рамки. Если хотите узнать об этом свойстве больше, можете почитать о его технических подробностях. Зачем это может понадобиться? Обычно на конверте наклеена более чем одна марка. Если нам нужно изобразить это на веб-странице, у нас есть два варианта: переделать изображения в почтовые марки с помощью пакетной обработки в программе PhotoShop или использовать код CSS для создания рамки. Мы предпочитаем последний способ, так как он предоставляет веб-разработчику гораздо больше гибкости. 

Для начала нужно создать рамку. В этом случае нам потребуется изображение небольшой части каждой стороны. Это можно сделать разными способами, мы же используем холст с простой маской четырех половин круга, по одному на каждый край, чтобы создать 24-битное изображение в формате png с маской прозрачности. После этого добавим направляющие, чтобы определить, где разрезать изображение на стороны и углы, как показано в технических подробностях по создания рамки с помощью свойства изображения рамки.

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

Ссылка для скачивания исходного изображения

Можно еще сильнее уменьшить размер получившегося файла изображения в формате png с помощью обработки в программе Fireworks.

Исходное изображение до применения свойства изображения рамки

Теперь применим этот файл изображения в формате png как изображение рамки:

.stamp {
        width: 200px;
        height: 148px;
        border-image: url(stamp-border.png) 8;
        border-width: 8px;
}

Так как у всех сторон одинаковые измерения, их можно сократить. Если применить код выше, то все стороны будут по умолчанию растянуты, а нам нужно, чтобы узор на каждой стороне повторялся целое число раз. Весь код CSS для этого будет следующим:

.stamp {
        width: 200px;
        height: 148px;
        border-image: url(stamp-border.png) 8 round;
        border-width: 8px;
        border-style: solid;
}

Некоторым версиям браузеров, например старым версиям браузера Firefox, нужно указать отдельные свойства ширины рамки и стиля рамки, даже если в свойстве изображения рамки они уже определены.

Теперь можно применить этот класс ко всем изображениям, которым хочется придать вид почтовой марки, как показано ниже:

Печати созданы из чудесных кистей для создания почтовых марок для программы Photoshop, собранных Spoon Graphics.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание трехмерных очков с использованием режимов наложения CSS
• Создание наклонного меню с использованием только CSS
• Создание улучшенных диаграмм с помощью режимов наложения и SVG