Why this site looks better in Firefox
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, and other help 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 coboldinosaur.com 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.

Dzone icon Reddit icon Facebook icon RSS Icon


Frame Effects for Image Presentation

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

Member Site: http://tegrat.uphero.com

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.

Big Drink

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:white; to background-color:aqua;

Big Drink

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

Big Drink

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
Big Drink

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

Big Drink

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
Big Drink

Maybe with a round outer frame?

Round Frame In And Out
Big Drink

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
Want to talk about this page? Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE