This is another easy, but very cool CSS effect. Check out the demo. The CSS is simple:
<style>
div#fadeout {
height:200px;
width:100%;
position:fixed;
bottom:0;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(95%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
</style>
All we’re doing is creating a (cross browser) gradient with a fixed position at the bottom of the screen. The gradient goes from being completely transparent, hence the rgba(X,X,X,0), to being a solid white.
The few things to be aware of
- Since the div is empty, you’ll need to give it a specific height and width, or it wont show up
- Be sure to position it where you want the text to fade out, in this example its at the bottom, so the CSS says
{bottom:0} - Make sure the solid color is the color of your background, again, in the example the background was white, but it needs to match your website
Hey I know this is off topic but I was wondering if you knew of any widgets I could add to
my blog that automatically tweet my newest twitter
updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
Please let me know if you run into anything.
I truly enjoy reading your blog and I look forward to your
new updates.
Yes, there are quite a few. Although I haven’t used this one, you could try “WP to Twitter”. It seems popular and has high reviews.
Nice idea. I’m hoping to implement on a site I’m helping a friend with. She’s a journalist, and the site is a showcase of her work. But for copywrite issues, she cannot put whole articles. So I’d like to have the article fade out at a defined point, to be followed by a “Continue reading on X” button. I tried this code, but dropping in my style.css file (I’m on WordPress) didn’t leave any effect. I also tried adding at the point where I want the fade up to begin. But this didn’t work either. Any ideas? Thanks for this post.
Hi Ian, thanks for reaching out. There are two main issues that are most likely the issue. First, you need to make sure that you have a
divwith an ID offadeoutsomewhere on your webpage. Second, make sure that your site is actually using the styles.css . In a lot of cases, a wordpress site might be using a different file named styles.min.css , which is a minified version of your main stylesheet.