Add a fade out effect to a webpage. You can use this to fade text, for example. However, this example will add a fade out effect to the whole page. This example does work on mobile as well (such as Chrome on Android) and is pure CSS code, so no images are used to reduce page load times.
#fade_bottom {
position: fixed;
bottom: 0; /* top is also an option */
width:100%;
height: 5em; // or anything you want the height to be
background: -webkit-linear-gradient( /*for webkit based browsers */
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient( /*for firefox*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient( /*opera browser*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient( /*microsoft ie*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}</style>
Now we have the style, add the following HTML div to the bottom of your page:
<div class="fadeout"></div>
It might be a good idea to consider placing this div right before your page’s footer. By doing so, you are sure this fade effect does not cover any text/information from your footer.
Cool enough. Was just browsing through and noticed that in your example CSS you are referring to an #ID where your html markup is a class. There might be some people that would’t be able to get this to work.