Link to home
Create AccountLog in
Avatar of baadayakazi
baadayakazi

asked on

Adding shadow and border automatically to images with styles

I'm working on a website, trying to get the images inserted by the client to automatically have a border with a shadow. I'm not great at working with styles, but I was able to do this initially by applying a class to an image, and then defining that class to show a border with a background image. I would actually like to get the images to automatically receive the border/shadow combination when they insert images, rather than me having to manually change it each time.

This link has an example of where the problem is: http://www.africaexchange.org/getinvolved.html

The client is updating the website with Contribute, and I'm using Dreamweaver.
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Hello,

If you know that all images inside a paragraph will need the border/shadow then you could do this:

p img {
style here
}

or

p div img {}


Also, may I suggest that you use css3 shadows instead of the background image? They're not supported in IE8 and below but will be supported in IE9.

img {
-moz-box-shadow:1px 1px 5px #a7a7a7;
-webkit-box-shadow:1px 1px 5px #a7a7a7;
box-shadow:1px 1px 5px #a7a7a7;
border:1px solid #a9a9a9;
padding:4px
}
Avatar of baadayakazi
baadayakazi

ASKER

How can I make it to show up on the whole page, and not just a specific paragraph?
Simply use the style suggested by Steggs: for any image in your page.
Instead of :
p img {
style...
}

Use:
img {
style...
}
I'm able to transfer some of the elements to the img style, but not all. I'm having to use a DIV to make it show up correctly. Is there a way I can combine these?

img {
      background-color: #fff;
      border: 1px solid #a9a9a9;
      display: block;
      margin: -5px 5px 5px -5px;
      padding: 4px;
      position: relative;
      
      
      
      
div.img-dec-shadow {
      background: url('../images/page_elements/shadow.gif') no-repeat bottom right;
      clear: right;
      float: right;
      padding: 0;
      position: relative;
      margin: 10;
      
      
There's a sample of what it looks like here: http://www.macfundi.com/imagetest/imagetest.html

The source files are here: http://www.macfundi.com/imagetest/imagetest_files.zip
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
That gives me most of the properties, except for the image shadow (which is as an image background)
In IE8 and below right? Think about 'browser enrichment'. Is the shadow really that necessary to have an extra div around each img?
This will primarily be used in Firefox in Safari. I'd really like to keep the shadow in there. Is there another way to do it without the div?
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Works perfect. Thanks!