Can you add shadow below image?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Can you add shadow below image?

Post by simonmlewis »

Example of what I am after
Example of what I am after
shadow.jpg (10.52 KiB) Viewed 8239 times
I can do shadow below things, and behind text, which is how I did the shadow behind these icons, but could the shadow (done here in graphic form, below the balls), be done in CSS?

So the width and colour and thickness can all be tweaked.??????????
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Can you add shadow below image?

Post by requinix »

Not sure if you can background-image an image (or else use a container) but that would be the most versatile way. Make sure the main image is transparent, background image centered on the bottom.

If the image can be cropped correctly so that it doesn't overlap with the shadow, like your examples do, then a bottom border as an image would work too.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can you add shadow below image?

Post by simonmlewis »

So do a background image and position it below the icon doc?
How do I position a background image like that?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Can you add shadow below image?

Post by requinix »

You don't position it "below". It's a background image so it goes in the background. It appears behind the icon. You create a shadow image of the size you want, then use CSS to set it as the background image and more CSS to position it center-bottom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can you add shadow below image?

Post by simonmlewis »

Sure but to get it dead right, how do you position and image pixel perfect?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Can you add shadow below image?

Post by requinix »

You can't. "Pixel perfect" is the bane of web design so stop thinking that way.

If the icon is positioned in its image correctly and the shadow is positioned in its image correctly then the end result will look the way you want it to.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can you add shadow below image?

Post by simonmlewis »

The icon has a line height set.
The DIV in which it sits, has a 50% border radius with the same width and height as the icon.
The DIV sits inside another DIV, that has a H3 below it. So I guess I have to place the image in the containing div, at the 'bottom centre'. And just play with the image position (within it's white space) to get it correct.

Shame there is no CSS way to do it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply