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.
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
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.
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.
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.