Creating Beveled Images with CSS

Key Takeaways

• There are four different techniques for creating beveled images with CSS, each offering varying levels of browser support. All methods are based on the same principle of overlaying black and white borders on an image and blending them with opacity.
• The first technique uses generated content on the image and works only in Opera. The second technique uses generated content on a wrapper element, offering wider browser support. The third method utilizes shadows instead of borders and is supported only in Firefox 3.5 or later. The fourth approach is the most cross-browser compatible, but requires more HTML modification.
• Beveled images can enhance the visual appeal of a web design by adding depth and a sense of realism. This effect can be achieved by manipulating the border properties of the image or element. Additional CSS3 properties like box-shadow and border-image can be used to create more complex and realistic bevel effects.

Recently, I wanted a simple CSS method for adding a beveled effect to images. It’s easy enough to create a sense of depth with normal outset borders (below left), but I was after an effect that would actually look like part of the image, as though it were a bevel on the image itself (below right).

In the end I found four different ways of doing it, each with different levels of support: from the cleanest approach that only worked in one browser, to the most robust that works in everything back to IE6.

All of them work on the same core principal; black borders for shade and white borders for highlighting are overlaid on top of an image, and then blended with some form of opacity. In each case, browsers without support for that technique will simply show the image as normal.

Technique 1: Using Generated Content on the Image (Demo)

• Pros: Ultra-clean technique requires no additional markup
• Cons: Only works in Opera

With this first technique we create a pseudo-element using :after, then style it to be perfectly overlaid on top of the image. Then we add borders to the overlaid element, and use RGBA to define each border color: the top and left borders are rgba(255,255,255,0.4), white with 40% opacity; and the bottom and right borders are rgba(0,0,0,0.4), black with 40% opacity:

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

<img src="/static/imghwm/default1.png" data-src="stormtroopers.jpg" class="lazy" alt="A legion of Lego Stormtroopers, standing in formation.">

This technique only works in Opera because no other browser supports generated content on multimedia replacement elements like and

The above is the detailed content of Creating Beveled Images with CSS. For more information, please follow other related articles on the PHP Chinese website!