DMXzone CSS3 Drop Shadows Manual

The Basics: Basic Usage of DMXzone CSS3 Drop Shadows

In this tutorial we will show you how to use DMXzone CSS3 Drop Shadows and the features packed in it.

*You can also check out the video.

How to do it

1. We've already added a container to our page and now we're going to apply a shadow to it.

2. Click the insert button (1) and choose the DMXzone CSS3 Drop Shadows icon (2).
    

3. The shadow region is now applied on the page and you can set width and height of the shadow region or leave the fields blank in order to have the width set to 100% and height set to auto.
   
   

4. For this tutorial we select the Lifted shadow type (1) to be applied on both sides (2).
   
   

5. You can choose a background color for the shadow container (1), set a rotation angle (in degrees) for it (2) and also select a float (3), but for now we leave those by default.

6. Now, we're going to add some content inside the DMXzone CSS3 Drop Shadow region, in our case an image. From the insert menu (1) we choose the insert menu item (2).
   
   

7. The select image source window opens where we choose our content image. Double click the image it will be included in the container. 

8. You can add any type of content inside the DMXzone CSS3 Drop Shadows region and also as many shadow regions on your page as you need.

9. Now you can save your work and preview the result in the browser.