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