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.??????????
Can you add shadow below image?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Can you add shadow below image?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Can you add shadow below image?
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.
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?
So do a background image and position it below the icon doc?
How do I position a background image like that?
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.
All the best from the United Kingdom.
Re: Can you add shadow below image?
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?
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.
All the best from the United Kingdom.
Re: Can you add shadow below image?
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.
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?
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.
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.
All the best from the United Kingdom.