orthopedic pain management

Flashuser

  • Pin It

CSS3: box-shadow and text-shadow properties

Shadows in web design have a great visual impact and can give a better look of the overall design if are used well. CSS3 is taking more and more control of the effects that usually we do in Photoshop, so no more need of images that slow the page load. I would like to present today two great CSS3 properties the box-shadow and text-shadow and illustrate some examples of what you can achive. Both properties are supported in all major browsers (Firefox, Safari, Chrome, Opera, Internet Explorer 9), but if you can’t see the effect I suggest grab a copy of the latest version of your favourite browser.

Box-shadow property

With box-shadow you can add one or more drop shadows to the box. It can be used to different elements( divs, spans, images ) and you can specify position top / bottom, left /right, outside or inside the element, the blur amount or color.

Here’s the box-shadow sintax:

box-shadow: [horizontal offset] [vertical offset]
     [blur amount] [spread radius] [color] [inset]

Horizontal offset: a positive value draws a shadow that is offset to the right of the box, a negative length to the left.
Vertical offset: a positive value offsets the shadow down, a negative one up.
Blur amount(optional): negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
Spread radius(optional): positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract
Color(optional): the color of the shadow.
Insert(optional): if present, changes the drop shadow from an outer shadow to an inner shadow.

Examples of box shadow:

1. Box-shadow positive value:

box-shadow:10px 10px 0px #252525;
-webkit-box-shadow:10px 10px 0px #252525;
-moz-box-shadow: 10px 10px 0px #252525;
This is an example of box-shadow property with positive value.

2. Box-shadow negative value:

box-shadow:-10px -10px 0px #252525;
-webkit-box-shadow:-10px -10px 0px #252525;
-moz-box-shadow: -10px -10px 0px #252525;
This is an example of box-shadow property with negative value.

3. Box-shadow with spread radius:

box-shadow: 10px 10px 0px 5px/* spread */ #252525;
-webkit-box-shadow: 10px 10px 0px 5px/* spread */ #252525;
-moz-box-shadow: 10px 10px 0px 5px/* spread */ #252525;
This is an example of box-shadow property with spread radius.

4. Box-shadow with blur:

box-shadow:0px 0px 8px #252525;
-webkit-box-shadow:0px 0px 8px #252525;
-moz-box-shadow: 0px 0px 8px #252525;
This is an example of box-shadow property with blur value.

5. Box-shadow with inset keyword:

box-shadow: inset 10px 10px 3px #252525;
-webkit-box-shadow: inset 10px 10px 3px #252525;
-moz-box-shadow: inset 10px 10px 3px #252525;
This is an example of box-shadow property with inset keyword.

6. Box-shadow with 2 shadow properties:

box-shadow: inset 10px 10px 0px #252525, 
8px 8px 8px #ff0000;
-webkit-box-shadow: inset 10px 10px 0px #252525, 
8px 8px 8px #ff0000;
-moz-box-shadow: inset 10px 10px 0px #252525, 
8px 8px 8px #ff0000;
This is an example of box-shadow property with 2 shadows.

7. Box-shadow with 3 shadow properties:

box-shadow:3px 3px 0px #cccccc, 
7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa;
-moz-box-shadow: 3px 3px 0px #cccccc, 
7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa;
-webkit-box-shadow:3px 3px 0px #cccccc, 
7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa;
This is an example of box-shadow property with 3 shadows.

Text-shadow property

CSS3 text-shadow property allows to create a text shadow effect for each letter of some text.

Here’s the text-shadow sintax:

text-shadow: [horizontal offset] [vertical offset]
     [blur amount] [color] 

Horizontal offset: a positive value draws a shadow that is offset to the right of the box, a negative length to the left.
Vertical offset: a positive value offsets the shadow down, a negative one up.
Blur amount(optional): negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
Color(optional): the color of the shadow.

Examples of text shadow:

1. Simple Text-shadow:

text-shadow: 5px 10px 0px #000000;
This is an example of text-shadow property.

2.a Text-shadow with blur:

text-shadow: 5px 5px 5px #000000;
This is an example of text-shadow property with blur.

2.b Text-shadow with blur:

text-shadow: 0px 0px 5px #000000;
color:transparent;
This is an example of text-shadow property with blur.

3. Text-shadow – glow effect:

text-shadow: 0px 0px 10px #009CC2;
This is an example of text-shadow property with glow effect.

4. Text-shadow – multiple shadows:

text-shadow: 12px 13px 1px #FD9213,
      -5px 8px 1px #009CC2,
     10px -8px 1px #B3C734;
This is an example of text-shadow property with multiple shadows.

5.a Text-shadow – emboss effect:

text-shadow: -1px -1px #fff, 1px 1px #444;
This is an example of text-shadow property with emboss effect.

5.b Text-shadow – emboss effect:

text-shadow: 1px 1px #fff, -1px -1px #444;
This is an example of text-shadow property with emboss effect.

6. Text-shadow – stroke effect:

text-shadow: 1px 1px 0px #444, -1px -1px 0px #444;
This is an example of text-shadow property with stroke effect.

7. Text-shadow – 3D effect:

text-shadow: 1px 1px 0px #444, 2px 2px 0px #444, 3px 3px 0px #444,
4px 4px 0px #444;
This is an example of text-shadow property with 3D effect.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+