In this Treehouse Quick Tip, we’ll learn how to add drop shadows to HTML elements with the CSS box-shadow property.
This allows you to change shadow effects on an element with just a few quick CSS edits, rather than opening Photoshop and creating a new image.
Video Transcription
Guil: Hi, everyone. Guil here for another Treehouse CSS Quick Tip. In this
Quick Tip, we’ll learn how to add drop shadows to HTML
elements with the CSS box-shadow property. Let’s get
started. Similar to the text-shadow property we can enhance
parts of our design by casting shadows off certain elements
with the box-shadow property.
So let’s create a basic box-shadow for our div element on
the page with a class of box. In our box CSS rule, we’ll
create the box-shadow declaration by writing “box-shadow”
followed by its values. So let’s go over what the values
mean.
The first value is a horizontal offset. It can be any valid
CSS length unit and it can be positive or negative. So here
we’re offsetting it by four pixels. A positive value will
move the shadow to the right, and a negative value will
move the shadow to the left.
The second value is the vertical offset. Like the
horizontal offset, it can be any valid length value,
positive or negative. A positive value will move the shadow
down and a negative value moves the shadow up. So here we
also made it four pixels.
The third value is an optional value that sets the shadow’s
blur radius. The blur radius determines how blurry or sharp
the shadow should be. So a value of zero gives us a shadow
with sharp edges. So the larger the value gets the blurrier
and lighter the shadow will appear. So let’s go ahead and
give it a blur radius of ten pixels.
The fourth value specifies the color of the box-shadow.
We’ll use a hexadecimal value of black. But we can also use
any of the color keywords, as well as RGBA and HSLA. The
color value needs to be placed before or after the length
values, otherwise the entire line will be ignored.
When we refresh our browser, there we see our new box-
shadows. By default, box-shadows are created as drop-
shadows outside of the element. If we want to create an
inner shadow, we can add a value of inset. The inset value
must be declared either first or last, otherwise the line
will be ignored.
We’ll refresh the browser. Now we see that the shadow is
inside of our div element. We can also apply multiple box-
shadows to an element. To do this, all we need to do is
separate each box-shadow with a comma within the same
declaration. Just remember that the first shadow specified
will appear on top and the last one will appear on bottom.
When we refresh the page, there we see the new box-shadow
colors and positions. Browser support is looking great for
the box-shadow property, as it’s supported by all the major
browsers. So go ahead and experiment with a few box-shadows
on your own.
Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for
free.
The post Quick Tip: CSS Box Shadows appeared first on Treehouse Blog.