Inner Shadows in CSS
CSS – Cascading Style Sheet
Today we are capturing most interesting topic i.e. "Shadows” that you can
pull off with just a few lines of code.
Before going to inset-shadows , we want to tell about the basic syntax of two
types of shadows “Box-Shadows and Text-Shadows”.
Now, in the next two slides we are covering these two properties of CSS.
Box-shadows are probably the most common type of CSS shadows.
box-shadows: 3px 4px 5px 6px #f00
As you can see, listed above in order, the order of values is horizontal offset,
vertical offset, blur radius, spread radius and color.
The first two values, horizontal and vertical offset, are fairly straightforward.
Positive values will push the shadow right and downward respectively and
negative values will push the shadow left and upwards.
We can take a look at the syntax for the other type of CSS shadow: the text-
shadow. Fortunately, this syntax is even simpler than that for box-shadow.
text-shadow: 3px 4px 5px #f00
You don’t have access to a shadow’s spread with text-shadow. It would be
great if you did, but unfortunately the feature simply isn’t there.
It’s time to jump into creating “inner” or “inset” shadows. To shift a shadow
to an inset shadow, all we really need to do is add a single word, “inset.”
box-shadow: inset 3px 4px 5px #f00
Here we can see how the spread of a shadow can still have a big impact on
how the shadow looks:
Notice that this time I actually used RGBa color instead of a hex value. This is
great for shadows because the alpha value provides a quick and easy way to
lighten or darken the shadow.
0,0,0 = black
Unfortunately, text-shadow gives us a lot more trouble here. The “inset”
value isn’t compatible with text-shadow so something like this simply won’t
text-shadow: inset 3px 4px 5px #f00
By setting the background-clip property to text, we can effectively clip
anything going on in the background (images, gradients, colors, etc.) to the
bounds of the text.
text-shadow: 0px 2px 3pxrgba(255,255,255,0.5);
-webkit-background-clip: text; -moz-background-
clip: text; background-clip: text;
There you have it, just about everything you could want to know regarding
how to apply inset shadows with CSS. It’s an interesting area to explore. The
techniques aren’t very intuitive and take some fiddling to master, but if you
start with the code above you’ll be a pro in no time.