CSS box shadows has been used in web page design for some time. Before CSS2, when the shadow effect was not very effective, most of this effect was realized by using Photoshop pictures. But for some people who lack these drawing skills, such as me, learning Photoshop is a nuisance. But with the progress of browser technology, we can’t use Photoshop drawing technology to prevent us from using shadow effect. Just before, I found a piece of code that can implement box shadows with CSS3 in the case of compatibility with various mainstream browsers. Here’s the solution.
Watch the demoCSS code
You may wonder how to make ie support CSS shadow effect. Yes, it can be implemented, but its syntax is very different from that of other modern browsers.
div.shadow {
-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}
In this CSS code, I set four values for the – box shadow attribute: X-axis offset, Y-axis offset, blur radius, spread radius, and color. If we put the inset keyword before the four parameters, the shadow effect will appear inside the element, that is, the shadow effect will expand inward. The syntax code for IE is a bit ugly and cumbersome, but it is also effective.
Watch the demo
Modern browser CSS3 new technologies, such as CSS fillet effect, CSS progressive color effect, CSS animation effect, bring us a broader space of program art creation for web program developers. CSS box shadows is beautiful and practical – I like it very much. How about you?