Purpose of this tutorial
To put a nice, subtle shadow just below a DIV. This shadow fades out to the background and is alpha transparent.
What you need to know
HTML and CSS
Note
While this generally works on any website, it doesn’t work too well with my themes, other than Google+ theme. I suggest you use that theme to properly see this.
Example
Code
.box_example {
margin:auto;
background:#fff;
border:1px solid #aaa;
width:100px;
height:100px;
border:1px solid #666;
position:relative;
}
.box_example:after{
content:”shadow”;
position:absolute;
z-index:-1;
bottom:2px;
left:7px;
right:7px;
box-shadow: 0 0 10px #000;
border-radius:100px / 7px;
}
</style>
<div class=”box_example”></div>
Explanation
The key things are
.box_example’s position:relative
and…all of .box_example:after‘s CSS.
I guess playing around with the CSS to get the shadow you want. There’s not much else to discuss…lol worst tutorial ever :)
My ramblings
I just found this out through a co-worker and I’m using it everywhere. I think it’s a very simple, subtle way to make an item pop out a little more. FYI he first saw it on LinkedIn, here developer.linkedin.com
