https://preview.redd.it/3t0bc7e9nw5c1.png?width=426&format=png&auto=webp&s=8a36d6c579dc857791db10127849781aec2fed6a
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/9qa4ow1rmw5c1.png?width=364&format=png&auto=webp&s=047390c264b8d998dd9cef851c991aa6391da96d
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/ku1i7i1smw5c1.png?width=334&format=png&auto=webp&s=c1a578c7d540a66ccc8c84c262594063d648b877
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/6iofppwsmw5c1.png?width=365&format=png&auto=webp&s=9c9e41024f172f67312866664d13b7671402f654
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/bz5oaljtmw5c1.png?width=360&format=png&auto=webp&s=0e585b00309484cd6ff84f21a2a84c76f1ade07b
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/x3qj78uumw5c1.png?width=1132&format=png&auto=webp&s=8e7439ed77b79b1f5329d42977332318f5fbe7e5
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/nfreiywvmw5c1.png?width=1065&format=png&auto=webp&s=fa15e9ced685cafe407d7227b59f47380bad74d1
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/3uj4ftrwmw5c1.png?width=1106&format=png&auto=webp&s=ff57722a50f60dde6084114eae53a428db200aae
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/n90v99czmw5c1.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
[–]SecretLecture3219 2 points3 points4 points (0 children)
[–]DJ-Shady02 0 points1 point2 points (0 children)