Fluid Drop Shadow Example

A very useful example for beginners like me. [ Click here for the example ]

CSS

.out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}

.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}

.ltin { left:-5px; }
.tpin { top:-5px; }
.narrow {width:8em;} /* change to suit */
h4 {font-weight:bold; color:#000;}

HTML

<div class="out narrow">
<div class="in ltin tpin">
<h4>Hello World</h4>
<p>
Just an example.
</p>
</div>
</div>

Can be applied to images too.

<div class="out narrow">
<div class="in ltin tpin">
<img src=URL>
</div>
</div>