Nephilim
Member
Hi all,
Is there any easy way of controlling main container (place where text and images takes place) transparency and shadow effect?
To be more exact, I would like to add gentle shadow below main container so it appears that is hovering above the background.
After that I would also like to know how to make main container semi-transparent.
Is there perhaps some simple css script for this?
Please help if you know the answers...
vfxdude
admin
Shadow:
#container {
-moz-box-shadow: 2px 2px 7px rgba(153, 153, 153, 0.6);
-webkit-box-shadow: 2px 2px 7px rgba(153, 153, 153, 0.6);
box-shadow: 2px 2px 7px rgba(153, 153, 153, 0.6);
}For the transparency rgba can be used like this:
background: rgba(255, 255, 255, 0.6);
but it doesn't work in IE, but google it, there are cross browser solutions (maybe the best is to use a transparent image as background).
Nephilim
Member
Hi :)
Many thanks!
That worked but it gave me shadow effect only to the right and bottom side of container when really I need to have it on the left side as well :s
I have tried playing with the code and various values to no effect :(
Any further hints on how to achieve shadow effect on all sides of container?
Many thanks in advance if you can help
Nephilim
Member
Ignore my previous post - I have figured it out :)
Here is code for dark yet subtle shadow for your main container (for all sides) :
#container {
-moz-box-shadow: 0px 0px 9px 4px rgba(2, 2, 2, 0.3);
-webkit-box-shadow: 0px 0px 9px 4px rgba(2, 2, 2, 0.3);
box-shadow: 0px 0px 9px 4px rgba(2, 2, 2, 0.3);
}
Effect of this can be seen at: http://www.thecliffsoncape.com/html/
You must log in to post.