Mac SEO Blog

Tucked away in the new EverWeb 4.4 release is a new option which lets you add an image as a shadow to an object in your website. In this post we will look at how to best use shadows in the pages of your EverWeb made website.

When To Use Shadows in Your Site…

Website trends over the last few years have favored a more ‘flat’ design approach, rather than using the previous skeuomorphic or realistic/rich design approach. Over the years, the flat design style has also changed by becoming softer, incorporating elements previously only found in skeuomorphic design. As such, elements such as using shadowing to your website’s design are coming back in to web design.

Adding shadows in your website can help to add some depth and texture to its design when used wisely – i.e. sparingly. Use shadows to draw your visitors to where you want them to look on the page. If you overuse shadows, you will fail to lead your visitors to where you want them to look. You may also give your visitors the impression that your site was designed years ago when skeuomorphic was in vogue. Again, not a good idea.

Guiding your visitors to so called ‘Call To Action’ items such as buttons, or important text, are areas where shadows can be usefully applied. In addition, you can use shadows to soften your site’s flat design so that it is more appealing and engaging. In this way you will give the impression that your site is modern but also warm and a little more 3D than 2D. When softening your site, the shadows should be subtle and not overt.

It is also important to remember to make sure that your design is accessible to those who are sight impaired. When contrast is reduced between elements on the page, this may make elements on the page more difficult to see. In these instances it may be better to use clear borders instead.

… and When Not To

Using shadows sparingly in your site can be advantageous to your visitors as we have just outlined above. However if you overuse shadows, you may find that your site’s performance is impacted as rendering these elements will take more time, especially on mobile devices.

The second concern is, as we mentioned above, accessibility. Make sure that your site’s as free of visual ‘obstacles’ as possible, poor use of shadowing being one such example. Poor color choices, such as green/red combinations or poor font choices are further examples that may limit your visitors access to your site if not used wisely.

Applying Shadows In Your EverWeb Site

To add a shadow to an object on page in EverWeb, such as a shape, image, button, or container start by selecting it. Then go to the Shape Options tab and check the box in next to the word ‘Shadow’ in the Shadow section to activate its settings. Tip! You can also click on the word ‘Shadow’ which will also activate the settings.

There are two type of shadow that you can choose from: Color and Image Shadow. The default is set to Color, as you can see in the dropdown menu to the right of the ‘Shadow’ section title. If you are using a Color shadow you will have the following options to choose from.

• Offset: The shadow offset from the object by 6 pixels
• Blur: The shadow is blurred with value of 6. You can set a value from 0 (No blur) to 99 (maximum blur). Blur is used to diffuse the shadow.
• Opacity: The default is set at 75% to create the default shadow. Opacity sets the transparency of the shadow. At 100% the shadow will be opaque. At zero it will appear transparent.
• Shadow Color: You can change the color of the shadow using the Color Swatch or Color Wheel.
• Rotation: The rotation wheel adjusts the angle of the shadow relative to the object. It is set at zero by default. Either use the dial or enter a value between 0 and 360 to change the angle of the shadow.

Adjust the values for each setting as desired to achieve the shadow effect that you require. If you are using an Image Shadow, you can use these options as well, plus additional options that are described in detail below.

Applying Shadows to Text

So far, we have discussed adding shadows to objects, but you can also add a shadow to text as well. Simply select the text that you want to add the shadow to, then use the same procedure as described above to add, and customize the shadow to your liking. In addition, you can also add shadow effects using the Fonts Panel in EverWeb’s Toolbar to your selected text if you prefer. The buttons in the Fonts Panel work in the same way as those in the Shadows section of the Shape Options tab.

Adding Image Shadows

If you want to apply an image shadow to your selected object, first change the type of shadow from ‘Color’ to ‘Image’ using the dropdown menu to the right of the ‘Shadow’ section title.

When using an image shadow, you may find that .png files are the best type of image to use as they eliminate the background color of the image being used. For example, if you have an image of a car in a .png file format, you can use the car as the main image and also its background creating a pseudo-3D effect.  

First select the image you want to add the image shadow to. Activate the Shadow settings as described above. You will see the settings shown are the same as for the Color shadow, except that the Color Swatch/Color Wheel has been replaced by a ‘Choose…’ button. Use this button to select the image that you want to use as a shadow. In our car example, the image being used as the shadow will be the same as the main image itself.

Change the Shadow settings as desired. In addition to the settings described above, when using an image as your shadow you have three additional options: Height, Width and Scale. Use the first to options to size the shadow as desire, and use the Scale option to if you want the image shadow displayed as Default (scale), Scale to Fit, Scale to Fill, or Stretch.

When you add a shadow to your page, you will see any changes you make immediately as you alter the Shadow settings. However, it’s always best to preview your page before you publish.