Frame Effects for Image Presentation

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

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.

Simple

The HTML:
    <div class="wrapper">
<span>Simple<br /></span>
<img class="simple" src="../images/bigdrink.jpg" />
</div>
The CSS:
    .wrapper {
                width:540px; 
                margin:auto;
                text-align:center;
                padding:5px;
              }
    img.simple  {
                    border:1px solid black; 
                    padding:8px;
                    background-color:white;
                    box-shadow:1px 1px 1px 1px;
                    border-radius:10px;

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;

Colored

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

Matted

    img.matted    {
                        border:15px inset green; 
                        background-color:aqua;
                        box-shadow:1px 1px 1px 3px;
                    }

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

HTML:
    <div class="wrapper">
    <span><br />Double Matted<br /></span>
    <div class="outer" id="outerDbl">
    <img class="dblmatted" src="../images/bigdrink.jpg" />
    </div>
    </div>
CSS:
    .outer { 
            border:20px inset dodgerblue;
            padding:0;
            width:524px;
            box-shadow:1px 1px 1px 3px;
         }
    #outerDbl    {
                     margin-left:-13px;
                 }
    img.dblmatted   {
                            border:10px inset white; 
                            background-color:aqua;
                            box-shadow:1px 1px 1px 3px;
                        }

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

Frame

HTML:
      <div class="wrapper">
<span><br />Frame<br /></span>
<div class="outerFrm">
<img src="../images/bigdrink.jpg" />
</div>
</div>
CSS:
    .outerFrm   { 
                    background-image:url(../images/wood096.jpg); 
                    border-radius:10px;
                    padding:10px 0 10px 0;
                    box-shadow:1px 1px 3px 3px purple;
                 }

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

HTML:
    <div class="wrapper">
<span><br />Round Frame<br /></span>
<div class="outerFrm">
<img class="round" src="../images/bigdrink.jpg" />
</div>
</div>
CSS:
    img.round   {
                    border-radius:50%;
                 }

Maybe with a round outer frame?

Round Frame In And Out

HTML:
    <div class="wrapper">
<span><br />Round Frame In And Out<br /></span>
<div class="outerFrm">
<img class="round" src="../images/bigdrink.jpg" />
</div>
</div>
CSS:
    .outerFrm   { 
                    background-image:url(http://localhost/COBOLdinosaur/images/wood096.jpg); 
                    border-radius:50%;
                    padding:15px;
                    box-shadow:1px 1px 3px 3px purple;
                 }

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