Table of contents. DMXzone CSS3 Drop Shadows Manual DMXzone

Transcription

1 CSS3 Drop Shadows Manual Table of contents Table of contents... 1 About CSS3 Drop Shadows... 2 Features in Detail... 3 The Basics: Basic Usage of CSS3 Drop Shadows Video: Using CSS3 Drop Shadows Page 1 of 23

2 CSS3 Drop Shadows Manual About CSS3 Drop Shadows The CSS3 Drop Shadows is built with CSS3 and takes full advantage of the new CSS3 properties to make great looking, image less, shadows. With the extension you create a container to which you can add different shadow effects on and fill it with other content elements like headings, text, tables, images and more. You can choose from several types of shadows such as curved, perspective, curled, lifted and raised. Set the side for the shadows, rotation degree and add an inset shadow. Changing the background color and setting the width and height of the element is very easy. All this is greatly presented in the Dreamweaver design view. Page 2 of 23

3 CSS3 Drop Shadows Manual Features in Detail Add shadows to any page element - You can add awesome CSS3 shadows to any page element, including text, table, image and more... Lifted shadows - This effect adds shadows on the edges to create a realistic feel that the element is lifted. You can choose different sides: left, right and both. Page 3 of 23

4 CSS3 Drop Shadows Manual Curved shadows - This effect adds shadows on the edges to create a realistic feel that the element is curved. You can add it to the left, right, top, bottom, left and right, and also top and bottom to your element. Page 4 of 23

5 Page 5 of 23 CSS3 Drop Shadows Manual

6 CSS3 Drop Shadows Manual Perspective shadows - Perspective shadows can be placed on the left, right and both sides at the same time. Page 6 of 23

7 CSS3 Drop Shadows Manual Raised shadows - Raised shadows can be placed on the left, right, top and bottom. Page 7 of 23

8 CSS3 Drop Shadows Manual Curled shadows - Adds a curled effect to the sides of the element. Curled shadows can be places on the left, right and also on both sides at the same time. Background Color - You can add any background color to your page element. Page 8 of 23

9 CSS3 Drop Shadows Manual Set a rotation degree - Choose the rotation angle of your element. Inset Shadow - Add inner shadow to your div. Page 9 of 23

10 CSS3 Drop Shadows Manual Pick up ID name - You can change the name of the element to fit your needs. Fully resizable -You can easily set the width and height for the div container. Page 10 of 23

11 CSS3 Drop Shadows Manual Great Dreamweaver design preview - The edited region is greatly presented in Dreamweaver design view. Full cross browser unobtrusive CSS3 support - The shadows are supported by any modern browser, including IE9 but won t be displayed where not supported. Page 11 of 23

12 CSS3 Drop Shadows Manual Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don t know how to do that please read this. Installing the extension Read the tutorial at Login, download the product, and look up your serial at Get the latest extension manager from Adobe at Open the.mxp file (the extension manager should start-up) and install the extension. If you experience any problems contact our Live Support! Page 12 of 23

13 CSS3 Drop Shadows Manual The Basics: Basic Usage of CSS3 Drop Shadows In this tutorial we will show you how to use CSS3 Drop Shadows and the features packed in it. *You can also check out the video. Page 13 of 23

14 CSS3 Drop Shadows Manual 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. Page 14 of 23

15 CSS3 Drop Shadows Manual 2. Click the insert button (1) and choose the CSS3 Drop Shadows icon (2). Page 15 of 23

16 CSS3 Drop Shadows Manual 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. Page 16 of 23

17 CSS3 Drop Shadows Manual 4. For this tutorial we select the Lifted shadow type (1) to be applied on both sides (2). Page 17 of 23

18 CSS3 Drop Shadows Manual 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. Page 18 of 23

19 CSS3 Drop Shadows Manual 6. Now, we re going to add some content inside the CSS3 Drop Shadow region, in our case an image. From the insert menu (1) we choose the insert menu item (2). Page 19 of 23

20 CSS3 Drop Shadows Manual 7. The select image source window opens where we choose our content image. Double click the image it will be included in the container. Page 20 of 23

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

22 CSS3 Drop Shadows Manual 9. Now you can save your work and preview the result in the browser. Page 22 of 23

23 CSS3 Drop Shadows Manual Video: Using CSS3 Drop Shadows With this movie we will show you the main features packed in the CSS3 Drop shadows and how to use the extension. Page 23 of 23