You are here: |Blog|Css|Css Text Fading Effect

CSS text fading effect


CSS

The fading-text effect is a handy solution when we have a text that doesn't fit a given container. In this case, we want to fit as much text necessary to fill the container, and also to apply a fade-out effect in the bottom -just before the end of the containing div.
It's something like "our Services" part on our Homepage, where there are three fixed-size divs, which get their contents from other webpages and -due to aesthetical reasons- these contents should remain contained neatly within these divs.

Lets start by creating the HTML environment:

<div class="cont">
<div class="text">
<div class="ovl"></div>
<p class="par">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

We have a container with class "cont", which contains an inner div with class "text" (which will obviously contain our text). 
Within the "text" div, we find another div with class "ovl" -which will serve as an overlay, and finally a paragraph (class "par") which contains the text itself. As a text we choose a paragraph of the well-known "Lorem ipsum" placeholding text.

Now we need some help from CSS in order to achieve our goal, which is done like that:

.cont{
margin:0 auto;
width: 440px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
.text{
position: relative;
margin: 0 auto;
width: 220px;
height: 220px;
border: 1px solid black;
overflow: hidden;
}

.ovl{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);
}
.par{
margin-top:0px;
padding:10px;
}

While most CSS rules are purely for decoration, it's this one rule that does the job and creates this fading effect:

box-shadow: inset 0px -56px 26px 0px rgba(255,255,255,1);

We apply shadow to the "ovl" div, which is inset (inward direction), 0 pixels horizontal lenght, -56 pixels vertical lenght, we blur it a bit with 26 pixels of radius, 0 pixels of spreading radius and our color of choice is white:

#FFFFFF; 

or given in rgba mode:

rgba(255,255,255,1);

Of course the above numbers and/or color need to be altered depending on the case each time, but that should give you a rough idea as to how "box-shadow" is working. For the color, a "rule of thumb" is that it should resemble the background color of the container. Check the middle column of the footer of our website, where there's a similar effect but the box-shadow color is dark grey (#252525).

To see the above tutorial in action, check out this Fiddle.

 

 


We will be delighted to hear from you

Why choose us?

Simply because we love creating beautiful websites, and we are damn good at it!

We at ILUS Web love programming!
All kinds of programming... Applications programming, Microcontrollers programming, Websites programming.
And we like to try to approach perfection everytime!

The best thing about a boolean is even if you are wrong, you are only off by one bit.

A beautiful and functional design is very important, as it interacts directly with the end User. And after all, it's the User's experience that we all work for!
Because a happy User, is of the most valuable assets to a business!

If you think good design is expensive, you should look at the cost of bad design.

A Website without S.E.O. is like a ship with broken steering, sailing in stormy weather!
In this day and age, the number of websites is reaching new records every day. Consequently, the competition of every new Site is huge, and the only way to "survive" is a methodical and successful S.E.O.

S.E.O. is what the Search Engines talk about you, when you are not present!
chart