Search code examples
javascriptcssfrontendfadeselectize.js

Fade out effect towards the bottom of the page


Found this really cool site. http://selectize.github.io/selectize.js/ Trying to figure out how they play with the opacity towards the bottom of the page giving this fade of effect.

Was looking this up and found this article that does it by overlaying an image.

https://css-tricks.com/css-trick-fade-out-the-bottom-of-pages-with-a-fixed-position-image/

But if you see the selectize page, they used a cleaner method that doesn't use an image file.

Anyone knows how? Any help would be appreciated would like to use it in my project

Thanks


Solution

  • that page seems to do that with the box-shadow: 0 -1px 80px 80px rgba(255, 255, 255, 0.6); css property of the below seen div element (fixed at the bottom that starts with Themes: default....) which has the id theme-selector

    a quick reproduction @ jsFiddle

    If this is the first time you come across box-shadow then you may want to read what it is: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp