Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hey y'all!
Does anybody know how I could go about creating a div element with an all-around inner shadow as in the example shown here:
http://www.webfairy.ca/dev/fr/images/innershadow.jpg
(Making this the old-fashioned way using tables would be a breeze, but I'd rather do it the right way if it's even possible.)
Obviously, the height of the box must expand along with the content.
Any clues or tips to point me in the right direction would be greatly appreciated!
Thanks!
-fairy -
There's a quick way of doing it, series of boxes enclosing other boxes with a border from darker to lighter colors to simulate the inner shadow. Any other ideas?
-
Hey Envisean,
Thanx for the tip, but I have NO idea what you mean. ;-/
I don't suppose you have a live example of that technique?
what do you mean by a boxes? divs ?
thanks! -
you will need three nested containers like so
<div style="background: transparent url(top.gif) no-repeat; background-postition: top left">
<div style="background: transparent url(bottom.gif) no-repeat; background-position: bottom left">
<div style="background: transparent url(faux_column.gif) repeat-y">
</div>
</div>
</div>
this is assuming that the box is fixed in width and must expand vertically. If the box need not expand you can simply use a single image background. If the box needs to expand in both directions you will need at least 6 nested containers (divs) -
<div style="padding: 1px; background: #333;">
<div style="padding: 1px; background: #555;">
<div style="padding: 1px; background; #777;">
<div style="padding: 1px; background: #999;">
<div style="padding: 1px; background: #bbb;">
content in here
</div>
</div>
</div>
</div>
</div>
It looks ugly, but it's a quick easy way to do it. -
I get it now! Thanks a million guys!
-
Hey Jack,
I think I figured it out. (I don't think I ever could've come up with this solution on my own, but I think it's clever.
See my example here: http://www.webfairy.ca/tests/fr/innershadow.html
Does it make sense that I had to nest an extra div in there so I could add padding to the box containing the text? I wasn't able to pad the one with the faux column without having text overflow.
Either way, this works great, but I was wondering if there was a way to save on a div.
Thanks again for your help and time. I really appreciate it! ;-) -
you should be able to do something like
width: 690px;
padding: 0 10px;
for the faux_column box. You might want to keep the extra container though, since padding and fixed width/height will cause problems with explorer under quirks mode.
this is the basic "sliding doors" technique. You can see that it's easy to modify it to use with tabs/buttons, and anything in general that needs to expand in one direction.
if the item you are creating does not need to expand too far, you can combine the faux_column and the bottom or top into one container. This will result in one large image and one small image. The upside is that you only need 2 containers, but at a max height it will no longer work.
envi's solution propably works just as well for this situation, but you will need images for more complex effects. -
- CommentAuthordiscoverweb
- CommentTimeMar 15th 2011
CSS Style coud be like as follows
.innerShadow_css
{
-moz-box-shadow:inset 0 0 11px #000000;
-webkit-box-shadow:inset 0 0 11px #000000;
box-shadow:inset 0 0 11px #000000;
}
CSS INNER SHADOW WITH EXAMPLE @ Checkout here
1 to 9 of 9