Learning Code

Text Shadows

With the text-shadow property we can add shadows to text! This can add a nice 3d effect to your page. Keep in mind that you usually want the directional axes to be consistent across your page if you are setting multiple styles with shadows.

Values

Values include the:
vertical axis (number value in px)
horizontal axis (number value in px)
blur (number value in px)
color (name or hex#)

In Action

h3 {text-shadow: 3px 3px 5px rgba(0,0,0,.5);}

The first value is the horizontal axis, the second value is the vertical axis, the third value is the blur and the last value is the shadow color.

Multiple Shadows

It is possible to add multiple shadows to the same text area. Perhaps you want to add multiple shadows with different colors to your text. Just add a comma inbetween the values. This would look like:
h4 {text-shadow: 3px 3px 5px #000000, 3px 3px 7px #a4f7bc;}

Box Shadows

With the box-shadow property we can add shadows to elements! The values for box-shadow are identical to the values for text-shadow, with the addition of inset.

In Action

h3 {box-shadow: 3px 3px 5px #606361;}

Again, the first value is the horizontal axis, the second value is the vertical axis, the third value is the blur and the last value is the shadow color.

h3 {box-shadow: 0px 0px 5px #000000 inset;}

Inset makes the shadow display as inside the element instead of underneath. It needs to be the last value.

Inset Shadows and Images

Inset shadows cannot be used on image elements - the image displays on top of the shadow. To use an inset shadow over an image, an element with a transparent background must be positioned to overlap the image. That transparent element can have an inset shadow.

.overlap {position: relative;} (this allows the shadow to be positioned properly; also make sure the width and height of figure/container is the same as the image )
.addinset {position: absolute; width:100%; height:100%; box-shadow: 0 0 10px black inset; top:0; left:0;}