Categories
CSS Web development

CSS Shadows

With CSS you can add shadow to text and to elements. CSS Shadows can make the text more readable, or add to image borders more contrast.

You can add shadow to text using the text-shadow property, or to the element using box-shadow property.

CSS text-shadow property

The CSS text-shadow property applies shadow effect to the text.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
  color: blue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Output:

Example2 – Add color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px black;
  color: blue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Output:

Example3 – add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px black;
  color: blue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Output:

Example4 – You can also use the text-shadow property to create a plain border around some text (without shadows):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: pink;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>

Output:

CSS box-shadow property

The CSS box-shadow property applies the shadow effect to elements.

Example1:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: pink
  ;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Output:

Example2 – Add color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: pink;
  box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Output:

Example3 – add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: pink;
  box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Output:

Example4 – an example of using the box-shadow property to create like calendar cards:

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 300px;
  background: lightblue;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: pink;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<div class="card">
  <div class="header">
    <h1>30</h1>
    <p>Thursday</p>
  </div>

  <div class="container">
    <p>January 30, 2020</p>
  </div>
</div>

</body>
</html>

Output:

Example5 – add shadow to the image:

<style>
div.cupcake {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>

<body>
<h2>Shadow effect - Image:</h2>
<br />
<div class="cupcake">
  <img src="cupcake.jpg" alt="cupcake" style="width:100%">
  <div class="container">
    <p>Cupcake</p>
  </div>
</div>
</body>
</html>

Output:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *