All About EverWeb’s New Image Shadow and Other Shadow Options!

The recently released EverWeb 4.4 for macOS and Windows has many great new features, such as the introduction of Containers, new mouse effects and new border options. One new EverWeb feature that you may not have noticed, though, is the new Image Shadow option that’s tucked away in the Shadow section of the Shape Options tab!

We’ll take a look at this new option later on in this post, but first, let’s explore EverWeb’s other Shadow Options!

Using Shadows in Your Website
Using Shadow in the pages of your EverWeb site can help bring a sense of of depth and layering to objects such as buttons, cards, and text. Shadows are also useful for guiding your visitor to elements in your design that you want them to pay attention to, such as Call To Action (CTA) objects. A CTA object is typically, but not always a button, or other object that you want your visor to click on. Lastly, when used discreetly, shadows can round out the design of your page, improving its appearance.

Common Pitfalls When Using Shadows In Website Design
If your shadows are too strong (i.e. too dark or too visible) or just overused in your page, this can make the page look cluttered or looking as if it was designed 20 years ago. Additionally, using shadows too much can drag the performance of your page. Whilst EverWeb has optimised the use of shadows in its latest release, overuse of shadows can still put a pull on your page loading times. The final thing to look out for is one that affects those visitors who may have visual impairments. For these such visitors, lack of contrast on a page can be problematic, so it’s good to be aware of such issues when designing your page.

Adding Shadows To Your EverWeb Site’s Design
Adding shadows to objects on your page is easy, First select the object that you want to add a shadow to, such as a shape or image. If you want to add a shadow to text, select the text inside the TextBox.

Next, go to the Shape Options tab in the Inspector Window and check the box to the left of the word Shadow in the Shadow section. This will activate the Shadow section’s settings. EverWeb’s default shadow settings will be applied to the selected object, or text.

All About Shadow Settings
When you activate the Shadow settings, you’ll notice that to the right of the word Shadow is a dropdown menu. By default, this is set to color. If you click on the dropdown, you’ll see a second option: Image. We’ll look at this option later on in this post.

With the dropdown menu set to Color, you’ll see the default shadow options in use.

Shadow Settings
Here is a list of the Shadow Options and what they do and how they work…

1. The Color Swatch/Color Wheel: Use the color swatch to set the shadow colour and the rotation wheel to adjust the angle of the shadow relative to the text.
2. Shadow Angle: To the right of the Color Swatch/Color Wheel is a round dial that is used to change the angle at which the shadow is seen. As you rotate the dial, the angle of the shadow will change. You’ll also see the value in field to the right of the dial also change. This field shows the angle of the shadow in degrees. You can either enter a number in this field between zero and 360, or use the up and down arrows, to adjust the angle if you don’t want to use the dial to do so.
3. Offset: The shadow that’s applied to the object you selected will be offset by 6 pixels by default. If you change how far the shadow is away from the selected object, you will see this immediately reflected in the Editor Window.
4. Blur: The shadow is set by default to a blur setting of 6. Use Blur to diffuse the shadow. If you set Blur to zero the shadow will become solid and at 99 it will be completely diffuse.
5. Opacity: By default opacity is set at 75%. Use the Opacity feature to set the transparency of the shadow. At 100% the shadow will appear opaque, whilst at zero it would be completely transparent.

Adding Shadows to Text: An Alternative Option
If you want to add a shadow to text in EverWeb, there are a couple of easy ways to do it.

The second option is to use the Font Panel which can be accessed via the Toolbar. Alternatively use the Cmd T shortcut key toggle.

The fifth button from the left in the Font Panel is the Text Shadow On-Off toggle button. If you have no shadow on your text, click on this button first.

The button immediately to the right is the Text Shadow Color button which opens the Color Picker so you can choose the color of the shadow.

The four controls to the right of the buttons have the following functions:

The Triangle Symbol Slider is used for shadow opacity. If the slider is set at the left the shadow appears invisible. If the slider is set to the right, the shadow color will be completely opaque.

The Square Symbol with Shadow Background lets you adjust the shadow blur. When set at the left end of the slider, there will be no blur. When set at the right end the shadow will be completely diffused and so not visible.

The Square Symbol is used to offset the shadow from the text.
When set at the left of the slider there is no offset so you will not see a shadow. At the right end of the slider you will have the shadow at maximum offset.

Use the Rotation Wheel to change the angle of the shadow as required.

Introducing EverWeb’s Image Shadows
As the feature name implies, you can add an image as a shadow to your object. To add an image as a shadow to an object, first select the object that you want to apply the image shadow to. As described above, activate the Shadow settings by ticking the checkbox to the right of the word Shadow in the Shape Options tab. Change the dropdown menu from ‘Color’ to ‘Image’.

The same Shadow settings as outlined above will be displayed, except the Color Swatch/Color Picker which is replaced with a Choose… button from which you can select the image that you want to use. There are also additional options as well for you to manipulate the Image Shadow…

1. Width: Sets the width of the background image in pixels
2. Height: Sets the height of the background image in pixels
3. Scale: You can choose to display the image. shadow as scaled by Default, Scale To Fit, Scale to Fill or Stretch.

Shadows and Mouse Over and Mouse Down
So far we have demonstrated the use of Shadows in the normal state. Don’t forget that you can also use different shadows when using the Fill sections Mouse Over and Mouse Down states to create interesting shadow effects when a visitor hovers over or clicks on an object that has a shows attached to it.

EverWeb’s Shadow effects are simple, yet effective and powerful when used sparingly!