Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Engineer CSS3 Layer Effects Using LayerStyles

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.

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.