Previous articles have surrounded web design topics such as CSS2 implementation and solid design practices. In this article however we will be taking a stroll outside the norms and focusing on some of the more powerful CSS3 effects that can render drop shadows without the use of images by using CSS3's box-shadow. If you’re a design purist I suggest you browse away now because we will be introducing browser-specific properties such as Safari -webkit-, Gecko-based browsers -moz- and Internet Explorer –ms-, in order to create some of our effects, which will render your code invalid.
Box shadow is probably the most overused technique in web design, primarily because the box shadow allows designers to quickly implement a 3-D like rendering to the design with minimal effort. Regardless of our take of it's use in design the following is a very easy and clean way to implement a CSS box shadow. CSS3 allows to a render a box shadow that unlike previous methods, box shadows don’t require any images or complex DIVs and are pure CSS.
The Following Code Was Used To Create the Box Shadow Effect On This Box
- -webkit-box-shadow: 3px 3px 3px #999; (Safari 3.1+, Chrome 4+)
- -moz-box-shadow: 3px 3px 3px #999; (Firefox 3.5+)
- box-shadow: 3px 3px 3px #999; (Opera 10.5+)
- filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', direction=135, Strength=3); (IE 5.5+)
The first 3px attribute relates to the horizontal distance from the left edge of the div. The second is for the vertical distance from the bottom. Making either of the first two numbers negative will render from the right and from the top respectively. The last is the blur radius followed by the hexadecimal color code.
Last but not least is our Internet Explorer hack: Color Sets or retrieves the value of the color applied with the filter. Direction Sets or retrieves the direction that the filter's effect is offset. Strength Sets or retrieves the distance, in pixels, that a filter effect extends.
If you do have a question, feel free to leave a comment. We are a web design company in Shenzhen, China that actively promotes open source and the development community. So if there are questions about box shadows we can answer we will be happy to do so.
Let's get into contact so you learn more about us and we can create solutions for you!