css - HTML

Working with Box and Text Shadows

The technique of creating Shadows utilizes both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content while CSS is used to enhance your web page with creative design aspects. 

In this tutorial, we will explore how you can give your web page something extra by applying shadows to boxes as well as to text. For this tutorial, let’s examine what it takes to do a simple layout so that you feel comfortable creating shadows. All you need to start with is a simple code editor such as Notepad which is free.

Box Shadows

Remember that a “box” can be many things and can have many uses. A box can have some special text in it that you might want to separate from the rest of the content on the page. By adding a shadow to the box, you can create multiple styles to enhance the box itself.

The box-shadow is the standard CSS property that can have a value consisting of several parts. It is important to note that there is an order of these values and they are as follows:

The parts that make up the overall Value of the shadow are described below:

  • Horizontal offset — This determines how far the shadow is nudged to the right (or left if it’s negative)
  • Vertical offset — This determines how far the shadow is nudged downwards (or upwards if it’s negative)
  • Blur radius — The higher the value the less sharp the shadow. (“0” being absolutely sharp). This is optional — omitting it is equivalent of setting “0”.
  • Spread distance — The higher the value, the larger the shadow (“0” being the inherited size of the box). This is also optional — omitting it is equivalent of setting “0”.
  • Color — This is also optional.

The code you will need for the example above is as follows. Note that the code in red determines the web layout you will see.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Box shadows</title>
<style>
body {
font: 14px courier, monospace;
padding: 5px;
margin: 0;
background: #00C4FF; <!– aqua background color –>
color: #000;
}

p {
width: 300px;
height: 30px;
padding: 50px;
margin: 25px;
background: white;
float: left;

#shadow2 {
box-shadow: 5px 5px 3px 1px #999;
}


</style>
</head>
<body>
<p id=”shadow2″><code>box-shadow: 5px 5px 3px 1px #999;</code></p>
</body>
</html>

The output on your web page will look like this:

If you want a simple box shadow using only the first two items for Horizontal and Vertical Offset, you can use this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Box shadows</title>
<style>
body {
font: 14px courier, monospace;
padding: 5px;
margin: 0;
background: #00C4FF;
color: #000;
}

p {
width: 300px;
height: 30px;
padding: 50px;
margin: 25px;
background: white;
float: left;
}

#shadow1 {
box-shadow: 5px 5px;
}


</style>
</head>
<body>
<p id=”shadow1″><code>box-shadow: 5px 5px;</code></p>
</body>
</html>

What you will see from this simple update to the CSS is the following:

Inner Shadows

You can also apply shadows to the inside of a box by adding “inset” to the list. Examine the following code to see the CSS and HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Box shadows</title>
<style>
body {
font: 14px courier, monospace;
padding: 5px;
margin: 0;
background: #00C4FF;
color: #000;
}

p {
width: 325px;
height: 30px;
padding: 50px;
margin: 15px;
background: white;
float: left;
}

#shadow5 {
box-shadow:20px 20px 50px 10px pink inset;
}


</style>
</head>
<body>
<p id=”shadow5″><code>box-shadow:20px 20px 50px 10px pink inset;</code></p>
</body>
</html>

The following is the result you will see on your web page from the previous Inset code modification in the CSS. The color pink is now an “inner shadow.” You can play with the value for color and depth of the shadow as you wish.

Text Shadows

Text shadows are fun to add and can artistically enhance text. As with all things that “enhance” a specific area on your web page, use your keen artistic eye to make sure it looks clean and will be friendly to your audience.

By using text-shadow, we can utilize the same principles of value that we did with box-shadow. Similar to box-shadow:

  • The first value is the horizontal offset
  • The second value is the vertical offset
  • The third value is the blur radius (optional)
  • The fourth value is the color (optional, although omitting this will make the shadow the same color as the text itself)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Box shadows</title>
<style>
body {
font: 18px courier, monospace;
padding: 5px;
margin: 0;
background: #00C4FF;
color: #000;
}

p {
width: 325px;
height: 20px;
padding: 50px;
margin: 15px;
background: white;
float: left;
}

#textshadow1 {
text-shadow: -2px 2px 2px #999;
}


</style>
</head>
<body>
<p id=”textshadow1″><code>text-shadow: -2px 2px 2px #999;</code></p>
</body>
</html>

This reveals a shadow on the text. You can play with the color and depth of the shadow on your text as you did with the box-shadow.

To recap all that we did, we reviewed:

  • The basic concept of the shadow
  • The range that makes up a full value controlling the style of the shadow
  • How to create an outside edge shadow on boxes
  • How to create an inside edge shadow on boxes
  • How the box-shadow CSS style can help us to utilize the text-shadow CSS style

This is a solid foundation and definitely warrants further investigation into this very creative world where the simple shadow becomes a creative way to showcase your text boxes. There is so much to explore in the way of color, depth, and placement of your shadow. Once again, the world of HTML and CSS is your onion, ready to be peeled back layer by layer as you continue your artistic journey of web design.

There are many places available for further investigation. Be sure to check out Font Weight, Font Families, and Background Image Size. These tutorials will help you to understand the wide range of possibilities for creative layout and design.

Be sure to check out more tutorials on our HTML Hub page as well as tutorials on the CSS Hub page.

Where to Next?

This introduction to Shadow should provide a starting point for further inquiry into design, layout, and practical applications of HTML and CSS.

We will continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!

<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>