CSS text fading effect
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.