CSS shadow effect compatible with various mainstream browsers

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?

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image