This tutorial will show how to add shadow to an element using CSS.
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "shadow" by clicking on the "Rename" button or pressing the "F2" key.
Select the "box" tab on the left and set the Box shadow values as follows. You can change the look of the shadow by trying out different values of the X, Y positions, the color of the shadow and the blur radius.
Click on the OK button to save this new style.
This new style will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
Insert an image on a page by selecting "Insert" > "image" from the main menu or clicking on this button on the page or directly drag and image from the Website Explorer and drop it on the page. We will use the following image as an example.
To apply the style to the image element on the page. Drag the style "shadow" from the "Available CSS Styles" and drop it to the image element on the page. If that element is selected, you can just drag the style "shadow" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
The image on the page will look like this. Please note that the shadow will look slightly different on different browsers.
on the toolbar.
on the page or directly drag and image from the Website Explorer and drop it on the page. We will use the following image as an example.
