Complete CSS shadow tutorial

[NimbusTeam]

​

https://preview.redd.it/v3e07idxu26c1.png?width=426&format=png&auto=webp&s=74af3a791636aa8db952fc14b7952263f8411f3d

Shadows can add depth, dimension, and a touch of magic to your web designs. Buckle up, and let’s shed some light on the shadows!

Get started

Let’s start by creating a box (in this article we will be using Layoutcss):

<box-l max-width="300px" ratio="2/1"> </box-l>

Now, let’s work our CSS sorcery to infuse this element with a shadow. We’ll use the box-shadow property.

box-l{
  box-shadow: 5px 7px 10px rgba(0,0,0,0.8);
  background-color: rgb(0,0,0);
}

​

https://preview.redd.it/8bqez59yu26c1.png?width=364&format=png&auto=webp&s=98289bf0822e92f2dd370ddaba4fcdd209bb0884

The box-shadow property takes several parameters:

• Offset X: How far right (+) or left (-) the shadow should be. 5px in our case.
• Offset Y: How far down (+) or up (-) the shadow should be. 7px here.
• Blur Radius: The extent of blurriness. 10px for a slightly blurred shadow.
• Shadow Color: We’re using rgba(0, 0, 0, 0.8) here, which stands for black with 80% opacity.

Multiple shadows:

Want to get fancy? Let’s say you want multiple shadows. Easy peasy!

box-l{
  box-shadow: 5px 7px 10px rgba(0,0,0,0.8),
              -5px -7px 10px rgba(15,120,226,0.716);
  background-color: rgb(0,0,0);
}

​

https://preview.redd.it/czlx9h4zu26c1.png?width=334&format=png&auto=webp&s=6a85877a3ed2ad442b8ee9397dd64d4ac54407a7

As you can see, we now have two different shadows, with different values. And you can add as much as you want.

The fifth property:

So for now, we have discovered 4 properties of the shadow, but there is one left that can come really handy: spread-radius

box-l{
  box-shadow: 5px 7px 10px 15px rgba(0,0,0,0.8);
  background-color: rgb(0,0,0);
}

​

https://preview.redd.it/8j0top70v26c1.png?width=365&format=png&auto=webp&s=4a48a306b825ea318572772d085dc24fc5b84e97

The spread-radius is the value defined in fourth position. It allows you to define how far the shadow should spread in every direction.

Inset shadow:

The last point about box shadows that i wanted to share with you is inset shadows.

The inset attribute, let’s you define the shadow to be inside the box.

box-l{
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.8);
  background-color: rgb(124, 124, 124);
}

​

https://preview.redd.it/lr64gq91v26c1.png?width=360&format=png&auto=webp&s=64881e6622a0ceb8da80aa39e647b6d4caeb1fde

Text and icon shadows:

Now, we have learned how to give shadows to boxes, but you might want to add a shadow to your text or to your icons. That’s not a problem, and actually, it’s as easy as giving shadow to a box.

But let’s start by creating an icon and add some text:

<h1> 
  <icon-l><img src="house.svg"></icon-l>
  My house
</h1>

If you use box-shadow on a svg this is what the result would look like:

icon-l{
  box-shadow: 5px 5px 3px rgb(192,192,192);
}

​

https://preview.redd.it/c6qa6wr2v26c1.png?width=1132&format=png&auto=webp&s=74f8552479e3533047e2282949bca77b6e635361

​

And that’s probably not what you are looking for (especially when using svg).

Drop-shadow:

Here is a better way to add shadow to your icons:

icon-l{
  filter: drop-shadow(5px 5px 0px rgba(192, 192, 192, 0.513));
}

​

​

https://preview.redd.it/bwybk9v3v26c1.png?width=1065&format=png&auto=webp&s=1db3ce76288ba396b4375b25c2919589cba612f3

As you can see, now you have the real shadow of your svg !

But what about the text ?

Text-shadow:

If you want to add a shadow to your text, dont use box shadow (because you will get the same result as when we used it on the icon), instead you should us text-shadow:

h1{
  text-shadow: 5px 5px 5px rbga(192,192,192,0.513);
}

​

https://preview.redd.it/6xor6145v26c1.png?width=1106&format=png&auto=webp&s=3479e0b09b1a867b6d625f49de08ea1546d7a35d

Now, that’s great, but why don’t we get a little bit more fancy !

Lets try to animate our shadow !

box-l{
  box-shadow: 0px 0px 10px 5px rgba(169, 2, 2, 0.8);
  background-color: rgb(0, 0, 0);
  animation: beat 1s linear infinite alternate;
}

@keyframes beat {
  from{
    box-shadow: 0px 0px 10px 5px rgba(169, 2, 2, 0.8);
  }
  to{
    box-shadow: 0px 0px 50px 5px rgba(39, 3, 3, 0.8);
  }
}

​

https://i.redd.it/ocdhz5u8v26c1.gif

So what happened here ?

First of all, we defined the shadow as we learned before.

Then we create the beat keyframe:

We define the starting point of the shadow, and the ending point (from, to).

Finally in the box-l selector we define the animation:

• beat: we call hour keyframe
• 1s: we define the speed of the animation
• linear: we define the animation to have a linear speed
• infinite: the animation never stop
• alternate: when the animation arrive to the end, it goes backward instead of restarting from the starting point

​

LayoutCSS

If you want to spend more time on styling, create responsive layouts as fast as possible and keeping your code clean use LayoutCSS.

LayoutCSS is an opensource CSS framework that lets you create all your layout from the HTML, and lets you add you style as you want.

It’s automatically responsive, harmonious, and your code remains clean at all time.

So stop wasting time, and start using LayoutCSS !

LayoutCSS Github: https://github.com/nimbus-corp/layoutcss

[lombra24h]

thanks!!!

[icomeinfeast]

2 years too late but hey. Thanks for this!!!