css / images
css / images
Dudley Storey
Updated 2014-04-09
Estimated reading time: 3 minutes
When creating image framing effects most designers opt for one of two choices: create the result entirely in Photoshop, or draw HTML “boxes inside boxes” that are then manipulated with CSS. In a previous article I demonstrated how to create complex framing effects by using border-image; in this article, I’ll approach the more subtle art of matting.
“Matting”, as referenced in the art framing industry, is the separation of artwork from its frame by a series of mounts. These mounts are often made from cardboard in different colors and textures. The goal of this article to recreate that visual effect on a web page without adding any elements around an image; the only markup will be:
<img class="mat" src="chinese-princess.jpg" alt="Photograph of a Chinese princess reclining on a wooden bench">