Advanced Search

Return to Snippet

Revision: 38444
at January 3, 2011 07:41 by blueocto
Initial Code 
.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
<p>Believe me or not, but all of these web browsers we can offer shadows with CSS:</p>

<pre><code>* Firefox 3.5+
* Safari 3+
* Google Chrome
* Opera 10.50
* Internet Explorer 5.5
</code></pre>

<p>The first value describes the x-offset (could be a negative value as well), the second the y-offset, the third the radius of the shadow and the fourth the color of it. Opera 10.50 (currently only available on Windows) is the first web browser to have an implementation without a vendor-prefix, whereas Firefox, Safari and Google Chrome all need it for now.</p>

<p>(The problem with the DropShadow filter is that the shadow is solid, and not fluffy as desired, although it offers easy values for X and Y. The Shadow filter on the other hand offers a nice shadow, but instead of x and y offset, we need to specify direction and strength the set the length of the shadow.)</p>
<p> So, this code makes it work in all those web browsers:</p>

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Drop shadow with CSS for all web browsers

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS