I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Cyclist In MongoliaMongolian Manpostage-markPostmark

Turn Images Into Postage Stamps With CSS3 border-image

css / borders

Estimated reading time: 1 minute, 45 seconds

A border design for a postage stamp in PhotoShop, magnified 5 times
(link to the original file)

There are many online articles on border-image, but I’ve found that few of them are terribly practical. Following up on my technical explanation of the property, I’ll try to reverse that that trend by showing how to create a postage stamp from a simple image with border-image.

Why would we do such a thing? Well, there is usually more than one stamp on an envelope. If we want to present those on a web page, we have two choices: transform the images into postage stamps by using some kind of batch process in PhotoShop, or use CSS to add a border. I’d argue that the latter gives the web developer much more flexibility.

First, we need to make our border. In this case, we need a representation of a small section of each side. There are many ways we could create this, but I’ll use a  30 × 30 pixel canvas with a simple mask of four half circles, one at each edge, to create a 24-bit PNG with an alpha mask. I’ll then add guides to determine where to slice the image into its sides and corners, as I showed in the previous article.

(You could make the resulting file size of the PNG even smaller by processing it through Fireworks).

Now we’ll apply the PNG as a border-image:

.stamp { width: 200px; height: 148px; border-image: url(stamp-border.png) 8; border-width: 8px; }
Photograph of a Mongalian man
Original image, before application of border

Because each side has the exact same dimension, I can shortcut them. You’ll find that each side is stretched by default; instead, we want the pattern for each side to be repeated in complete iterations. The full code would be:

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

(Oddly, Firefox requires both a separate border-width and a border-style, even though the width has already been declared and the style is determined by the image).

Now I can apply the class to any image that I want to give the appearance of a postage stamp, as shown in the result at the top of this article. Explore the code for this example on CodePen

I’ve also used some PNGs created from the wonderful postage mark PhotoShop brushes collated by Spoon Graphics.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.