May 27

CSS Box Shadow

Tue, 05/27/2014 - 14:50 — julie

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.

Let’s 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 let’s 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

Let’s 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

This concludes our CSS Box Shadow tutorial. If you’ve got any questions or comments, please leave them below.

The post CSS Box Shadow appeared first on Web Design Blog | Magazine for Designers.

Copyright 2009. E-mail Me
Auto Spare Parts