CSS3 inner shadow (Firefox only)

CSS3 Inner Shadow

Cross Browser

Content goes here

Code Snippet

CSS3


/* Only works in Firefox */
.css3-inner-shadow {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.4) inset;
}
        

Cross Browser


<div class="ht">
    <div class="ht1"><div class="ht2"><div class="ht3"><div class="ht4"></div></div></div></div>
</div>
            

.ht,
.ht div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #999;
    z-index: 1;
}
.ht {
    opacity: 0.7;
    -ms-filter: alpha(opacity=60); 
    filter: alpha(opacity=60); 
}
.ht1 {
    opacity: 0.6;
    border-width: 2px;
    -ms-filter: alpha(opacity=60); 
    filter: alpha(opacity=60); 
}
.ht2 {
    opacity: 0.5;
    border-width: 3px;
    -ms-filter: alpha(opacity=50); 
    filter: alpha(opacity=50); 
}
.ht3 {
    opacity: 0.4;
    border-width: 4px;
    -ms-filter: alpha(opacity=40); 
    filter: alpha(opacity=40); 
}
.ht4 {
    opacity: 0.3;
    border-width: 5px;
    -ms-filter: alpha(opacity=30); 
    filter: alpha(opacity=30); 
}
        

Notes

  • CSS Only (No images)
  • Supported browsers: IE7+, Firefox, Webkit (Safari & Chrome)
  • Filter(alpha) for IE