Tuesday, May 27, 2014

Shadows

CSS3 box-shadow

In this series we are going to start off with shadows. With CSS shadows, you can add depth, height and dimension to your text, boxes and buttons. It will enhance the appearance of your websites, redirect attention to key locations such as box ads or interesting products when used properly.

The Box Shadow is a CSS3 property, meaning that it is a newer CSS and not compatible with older browsers like in Windows XP. (Note, if you are still using XP, you are missing out on better internet and shopping experiences.)

syntax: box-shadow: left/right up/down blur-distance color;

sample: box-shadow: 15px 15px 15px #000;

sample2: box-shadow: 10px 7px 10px black;

Lets dive in with the simpleset of them all, the Box-Shadow:

syntax: box-shadow: left/right up/down blur-distance color;

In the syntax above you will notice that the box-shadow property has 4 characteristics that will be used. Each value should be stated as an integer in pixel units such as “5px”. To elaborate lets start with an exagerated box shadow with 15px just so that you can see. We will be using 15px as the position value for each characteristic to demonstrate how each works.

Lets build a box shadow with only the right/left property:

BOX SHADOW 15PX RIGHT

box-shadow-right

To move the box shadow left, you use a negative integer since 0 will be the center.

BOX SHADOW LEFT -15PX

box-shadow-left

BOX SHADOW -15PX UP

box-shadow-up

BOX SHADOW 15PX DOWN

box-shadow-down

BOX SHADOW Light Source top left

Now lets combine the two properties to illustrate a light source from the top left shining down on the box. Again we will use 15px to exaggerate the effect:

box-shadow-tl

BOX SHADOW Blur 15px

Lets play with the blur effect. The 3rd characteristic in the syntax. The blur will add spread to the shadow effect, so that it is not so sharp. The blur can only be a positive integer value expressed in px.

box-shadow-blur