Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Styling Property : Box-Shadow


Box shadow can add a nice appearance around an image, an image with text, or just a div tag. We will go over the following types of property/values available for the box-shadow.

  • box-shadow
  • box-shadow with blur
  • box-shadow with spread
  • box-shadow with an inset

Box Shadow

HTML

html styling background image

CSS

css styling background image

Box Shadow with Blur

HTML

html styling box shadow with blur

CSS

css styling box shadow with blur

RESULTS

results styling box shadow

NOTES


The top two boxes have the same style definition and the bottom two boxes have the same style definition. The top two boxes have a box-shadow applied to them; therefore, the boxes of text appear to be lifted off the page a little.

The bottom 2 boxes have a blurred effect added to them in addition to the box-shadow property. There are 3 numbers listed after the box-shadow property. The first number is for the horizontal shadow, the second number is for the vertical shadow and the third number tells how much to blur it. This one is blurred with 10 instead of 1 (like the top two boxes) and therefore has a stronger blur.

Box Shadow with Spread

HTML

html styling box shadow

CSS

cssstyling box shadow

RESULTS

results styling box shadow with blur

NOTES



First notice how both boxes of text have a box-shadow with a blur effect however the bottom box's shadow makes the shadow further away from the box itself. This is called the spread. Now note how the box-shadow definition for these two boxes has 4 numbers instead of 3 (like the example before this one). When there are 4 numbers in the definition of a box-shadow, that fourth number is for the spread (the distance of the shadow away from the box).

Box Shadow with Inset

HTML

html styling box shadow with inset

CSS

css styling box shadow with inset

RESULTS

results styling box shadow with inset

NOTES


Notice that although all three of these boxes are using the box-shadow property, they all look very different. This was done to demonstrate how you can give different looks to items just by defining their CSS.

The first example shows a box-shadow effect that is in the opposite direction of all the examples above. Instead of making a "shadow" appear on the box, it really just places a dark black line on both the top and the left side of the box.

The second example is a box-shadow effect that doesn't really give the box a shadow but instead colors an area to the left side of some text. To make this look even better, have the box-shadow and the border color the same. (Try making both of them black or both red. )

The third example of the box-shadow again, is not really a shadow. Instead, it just makes it appear that there is a thick line across the top of the text while the remains are inside a box.

Spend some time creating HTML elements with a box-shadow property and value. Try creating the values with two, three, and four numbers so that you have practiced creating all different kinds of CSS affects.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved