This Presentation is based on the different effects of css like "box-shadow, text-shadow". We can also give these effects on the inner side of the text and any image or box.

1. Inner Shadows in CSS
CSS – Cascading Style Sheet
Designed By
Webtech Learning

2. INNER SHADOWS
 Today we are capturing most interesting topic i.e. "Shadows” that you can
pull off with just a few lines of code.
Inner Shadows

3. SHADOW SYNTAX
 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.

4. BOX-SHADOW
 Box-shadows are probably the most common type of CSS shadows.
box-shadows: 3px 4px 5px 6px #f00
Horizontal Offset
Vertical Offset
Blur Radius
Spread Radius
Color

5. BOX-SHADOW
 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.

6. TEXT-SHADOW
 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
Horizontal Offset
Vertical Offset
Blur Radius
Color

7. TEXT-SHADOW
 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.
TEXT SHADOW

8. INSET BOX-SHADOWS
 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

9. INSET BOX-SHADOWS
 Here we can see how the spread of a shadow can still have a big impact on
how the shadow looks:

10. INSET BOX-SHADOWS
 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.
Rgba (0,0,0,0.5)
0,0,0 = black
red
green
blue
alpha

11. INSET TEXT-SHADOWS
 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
work.
text-shadow: inset 3px 4px 5px #f00
Doesn’t Work

12. INSET TEXT-SHADOWS
 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.
h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3pxrgba(255,255,255,0.5);
-webkit-background-clip: text; -moz-background-
clip: text; background-clip: text;
}

13. CONCLUSION
 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.