Design, CG Graphics & Inspiration
How to Achieve Text Fading Effect in CSS3

How to Achieve Text Fading Effect in CSS3

Hello to everyone. Today’s post will be short, but I think it can be rather useful to our readers. I often hear people ask the same question about how to do “fading” of text to the bottom, the top etc.
There are variants on js and with a picture and css -gradient simply imposed over text. Today a new decision of this problem came into my mind. Its realization is a piece of cake.

We need two blocks: container and 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;
}

The essence.
We place a block with text into container on which we set inner shadow. We displace the shadow to the place where we need to get “fading”. However, inner shadow will be distributed on the all block contour, and to avoid that we set negative tension on it. Due to the large dispersion and enormous fading displacement the shade will appear only wherein it is needed.
We should set a negative z – index on the text block, so that the shade of container will be over him. And that’s it!

Advantages:
1) text can be fully highlighted
2) text block doesn’t fall out of stream and it is possible to add any content into the div (but it won’t have the fading effect)
3) fading doesn’t depend on the block size and will always remain wherein we added it.

Disadvantages:
1) because of the negative z – index we had to add the icon of cursor for text(for obviousness).
2) in Opera(11.52) the tension is developed a little different, as a result the shadow becomes very intensive.
3) it doesn’t work in IE including the 8.

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

Click here to see the example.

You might also be interested in..

SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
Sprite animation in CSS3
CSS3 Now! Transitions
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Softlink,
  • November 4, 2011

SHARE THIS POST

Author's website - http://alpatriott.ru/

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.