Dzone icon Reddit icon
Facebook icon RSS Icon Borrow my code


Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, Digital Point, and other progressive Q/A sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Frame Effects for Image Presentation

Submitted by: Tegrat on 2012-12-08 14:18:03

Member Site:

When I saw that Cd& had changed the way some of the pictures on his site get displayed I asked him to show me how that was done. He showed me and then told me I should experiment with it. This is the result of the experiments.

First the easy one Cd& showed me.


Next, I thought why not add a little color to the frame. Easy same HTML and all that I did to the CSS was to change background-color:rgb(255,255,255); to background-color:rgb(0,255,255);


So, now I wanted to make it look like it was matted. It took a little different CSS, in the same kind of wrapper.


It was getting cool now so how about Double Matted? That gets a little more complicated. I needed an extra layer, and I have to screw around with the margin on the left side. Crap! I need more code, but at least the same wrapper works.

Double Matted

Now I want a wooden frame. I find that CSS3 has border-image... too cool. When I look for the docs; not fully supported cross-browser. :( Crap! Double Crap!

A little more work and playing and I find a really easy answer... just tack the pic to a wooden background. I don't even need to put a class on the image, and I can still use the same wrapper


Now I have it mastered. I already know to do round pics so let's try it in a frame. Just the same frame with a round pic.

Round Frame

Maybe with a round outer frame?

Round Frame In And Out

There are probably more things a better developer than me can come up with, but at least I got you started.

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE

Not a member of COBOLdinosaur yet? FREE registration takes less than a minute