This is a CSS feature that could come in very handy when needing to create a simple shadow effect on a piece of text, Photoshop doesn’t get a look in!
In this shadow effect feature the property accepts a comma-separated list for how the shadow will be applied to the element. This shadow effect feature is accepted for users of Safari, Opera, Firefox and Chrome but as yet is not supported in IE.
All shadow effects must specify a shadow offset, which indicates the horizontal distance to the right of the text and the second length term will specify the vertical distance below the text. If these values are changed to a negative value this will mean that the length of the shadow will be placed to the left and above the text.
In essence the positive or negative values will change the orientation of the shadow.
There are also other values that can be added to help style your shadow effect. These are things such as Blur radius, which is a length value that will indicate the boundaries of the blur effect. If there is no blur ratio applied the shadow will be made the same size and shape of the object (text) that casts it.
Usage in the real world
The uses for this type of effect is to make a header or main area stand out. We can now use this type of effect in designs without having to use an image in the build and therefore increasing the speed of the web page loading in. The only downside to this may be that there could be overkill if not careful with designs.
Text Overflow
Text Overflow is when text overflows the boundary box. This is annoying as text breaks out of the box and ruins the look of designs. This is where text-overflow-props come in handy. At the minute the support of browsers for this feature is very limited but this is definitely going to be a cool and handy feature for the future! The usage of this will mean that at the end of words we will be able to use text-overflow and have ellipsis on the end so that viewers will know to read on or we can uses text-overflow and use the clip feature which clips off text mid-word but again still allows viewers to know that there is more to read without allowing the text to break out of the box.
