Give your Wix Site a Three Dimensional Feel

August 15th 2010 | Web Design

Giving your website a 3 dimensional feel

The web is a two-dimensional medium but can be easily given a fully three-dimensional feel to your flash website. Using the Wix editor “Drop Shadow” effect can give depth and visual power to your website.

Like all good things, the key is not to abuse it. When used correctly, the Drop Shadow effect can create an illusion of a third dimension to even the most minimal design. The Drop Shadow effect is one of the most commonly used effects in web design. It’s everywhere, so subtle at times that it’s hardly noticeable – and that’s its real strength.

Wix Editor drop-shadow_squares

You can see in the image above how much of a difference a subtle shadow can make.

Understanding a Shadow
Shadows properly indicate where light sources are emanating from. Suppose you’re in a pitch dark room and turn on a flashlight. Any object that you shine it on will cast a shadow that’s almost black (the shadow will never be completely black because of the reflected light). The shadow is cast because the object is blocking light from the only light source, meaning that no other light is coming from anywhere else to brighten that area.

In web design we use the Drop Shadow Effect to cast shadows in order to imitate a light source and create a realistic environment. After placing all the elements of your design on the stage, imagine you’re holding a flashlight in front of the screen, this will help you create consistent and effective shadows.

Photo by B Mully

How to Use The Drop Shadow Effect

  1. Click on an element on the stage
  2. Choose “Effects” on the bottom menu
  3. Click on “Drop Shadow”
  4. Click on the Color Box to define the color of the shadow

In order to use the effect correctly, let’s understand its settings:

  1. Angle determines the lighting angle at which the effect is applied to the layer
  2. Distance specifies the offset distance for the shadow
  3. Strength specifies the size of the shadow
  4. Transparency controls the transparency of the shadow

How to use the Wix Editor shadow-effect

Remember: The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow. To create a soft shadow, play with the value of the “strength” and “transparency” settings.
Most importantly, be consistent with the “Angle” setting in all the elements to which you apply the effect. (In other words, be sure that the source of the light is always the same).

Advanced Design Tips and Tricks - Giving Elements a Contour Outline:
In addition to using the Drop Shadow Effect for its traditional purpose of imitating a three dimensional space, we can manipulate its settings and use it to create a fun color outline that can spice up your design.

  1. Choose text or a graphic element and click “Effects”
  2. Choose “Drop Shadow”
  3. Click on the color box to determine the color of the outline
  4. Set the distance at 0 and the strength at 10

Wix Editor Shadow Effect: How to Outline Elements




Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>