How to create Faded Bottom Text with Creative CSS trick

How will this help?

            As a web designer it’s partially our responsibility to make sure users enjoy their experience on a web site and sometimes that can be hard to do when there is a site structured entirely around text content. Although the typeface chosen is the utmost importance for text, there has to be other ways to work with the content to improve the user likability and encourage them to continue reading. This Creative CSS trick helped me with a website for an RWU criminal justice professor, he had a lot of published research done and adding this really boosted the look of the page.

What does the faded bottom text do?dl-thumb-fadebottom

            It’s a cool effect where the bottom of the page seems to fade out. The technique makes use of a fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. The example on the left should give you a good idea of how it’ll look.

So How Do You Use it? (Beginners)

            This creative CSS trick needs to be put in your style section of Screen Shot 2014-12-07 at 4.30.24 PMthe page you want it to appear on or a separate style sheet that you attach. The CSS code contains adjustments to selectors and also div id’s that you put around your text in the code. You can change the text to what you want but if you don’t know what you’re doing I wouldn’t mess around with any of the other parts of the CSS. The code is the top right picture. Now for the CSS to be applied to the text your text must be inside a div “<div id=”page_wrap”></div>.” At the end of the text inside the page_wrap div put <div id=”bottom_fade”></div> and then close the page wrap div. Make sure you use the exact same ID’s as the ones in the CSS, adding capitals or spaces will make it not work.

If you like this code subscribe to our e-mail list and receive updates for when FrillyWeb posts more! Tell us about how you used it in the comments to inspire other readers and share the post to friends so they can learn this creative CSS trick and more.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s