Creating an Image Frame

Yesterday I answered a question on the ASP.NET forums on how to create a 'frame' around an image. I answered it with some code from the new Beer House I wrote last fall. In the book I show how to add a drop-shadow around an image using CSS. The code I suggested is the following HTML:

<

div

class

="AlbumShadow"

><

img

...

/></

a

></

div

>

The CSS looks like this:

.AlbumShadow

{

float

:

left;

margin

-

top

:

8px;

margin

-

left

:

20px;

background

:

#aaa;

}

.AlbumShadow

img

{

margin

: -4px 4px 4px

-4px;

display

:

block;

position

:

relative;

padding

:

4px;

border

-

left

:

1px solid #ccc;

border

-

top

:

1px solid #ccc;

border

-

right

:

1px solid #888;

border

-

bottom

:

1px solid #888;

background

:

#fcfcfc;

}

It creates the following effect:

I thought I would put together a little sample site to demonstrate just adding a border around an image. I know you can set the image border attribute, or define a border style rule. But I like wrapping an image in a div for the background because it gives me the flexibility to move the background in relation to the image, thus allowing me to create an effect like a drop shadow.

The shadow effect here is made by setting the margin of the interior image to be shifted on the background image. Using the negative value for the top and left move the image up and to the left from being centered in the background div element.

I created a small sample site to demonstrate this effect with a centered image. In this example though I set the padding of the background to 7 pixels all around. This means anything inside the div will be centered 7 pixels inside the boundary of the div.

.PhotoFrame

{

margin

:

5px;

background-color

:

#000;

padding

:

7px;

width

:

125px;

text-align

:

center;

}

The HTML looks like this, just an image inside a div with the PhotoFrame style rule applied:

<

div

class

="PhotoFrame"

>

<

img

src

="Liberty-Bell-125.jpg"

/></

div

>

The effect looks like this:

One thing you should note, if you do not specify a width in the style rule applied to the containing div element, it will span the entire width of its containing element. In the Beer House application the shadow div is within a table cell with a width applied. In the example above I applied the width to the PhotoFrame style rule.

The next challenge is to go beyond just using a colored background and utilizing an image to get even more dramatic effect. Stay tuned for another post on doing that very soon!

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel