How to Engineer CSS3 Layer Effects Using LayerStyles - dummies

How to Engineer CSS3 Layer Effects Using LayerStyles

By John Paul Mueller

Creating the right appearance for a CSS3 layer can be hard. A layer is composed of the outer shadow, border, and inner shadow of the elements (such as a <div>) that you create. LayerStyles makes it possible to visually design the layer effects that you create. You perform that task using a control panel.


The control panel helps you modify all of the characteristics of the layer effect, including the source of light. All of the effects appear on a square in the center of the page, which you can see by moving the control panel to a more convenient location (simply click the title bar and drag the control panel anywhere you want to see it on the page).

When you finish creating your layer effect, you can click the CSS tab that appears in the lower-left corner of the page. This act displays a window that shows the code required to create the layer effect you designed. Simply click Copy to copy the information to the Clipboard.

You can then paste the code into your IDE for use in your application. The resulting CSS should work fine with Internet Explorer, Firefox, Chrome, and most other browsers that support CSS3.