CSS3 Text Fading

Hello to all. Today's post will be short, but, I think, useful.
We often hear how to “fade out” text to the bottom, top, etc.
There are options on js , there are options with a picture and just a css-gradient superimposed over the text.
Today a slightly different approach to solving this problem occurred.
Its implementation is simple as a penny.

We will need two blocks - a container and a block with text.

<div class="shadow"> <div class="text"> ---------------------------- </div> </div> 

And only two classes in css

 .shadow{ width:400px; margin:20px auto; cursor:text; box-shadow:inset 0px -190px 190px -50px #add7f8; } .text{ color:#000; position:relative; z-index:-1; background:#f9fca3; } 

Now the essence.
We put the block with the text in the container, which we set the inner shadow. The shadow itself is shifted to where we need “fading”. However, the inner shadow will be distributed over the entire contour of the block, and in order to avoid this, we give it a negative stretch. Due to the fact that we have a large dispersion and a huge shift - the attenuation of the shadow will be only where it is needed.
The text block needs to specify a negative z-index so that the shadow of the container is on top of it.
That's it.
')
Of the benefits:
1) Fully selectable text
2) the text block does not drop out of the stream and any content can be added to the div-wrapper (but it will not have any attenuation)
3) attenuation does not depend on the block size and will always remain where we added it.

Of the minuses:
1) because of the negative z-index, I had to add a cursor icon for the text (for clarity)
2) in opera (11.52), stretching is worked out somewhat differently, as a result of which the shadow becomes very intense.
3) does not work in IE up to 8 inclusive

Accordingly, colors, intensity and dimensions can be set in the shadow parameters.

Example here

upd Comrade VitaZheltyakov proposes to impose another shadow for a smoother merging with the main background.