Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Shadows Effects in CSS

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.

  • Be the first to comment

Shadows Effects in CSS

  1. 1. Inner Shadows in CSS CSS – Cascading Style Sheet Designed By Webtech Learning
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×