Since most of the site (as of now) does not use Bootstrap as a default style tool, I’ve been doing a lot of custom CSS from scratch. My landing page is meant to mimic a sheet of glass with a semi-transparent background and border. Here’s some quick and simple CSS that can turn any div into a piece of glass. I’ve found that it works well for modals and elements that you want to give an extra emphasis on:
This setup can easily be customized by changing the values of the background-color, border-color, etc. For example, my component background is not actually transparent white. My white text was a little too hard to see against the white background, so I changed it to have a tint of grey:
Another cool CSS3 trick is to apply filters on images. This is similar to iPhone filters or filters you would see on Instagram. Here’s an example of a greyscale filter with a blur. I was originally planning on using this for my landing page, but I ended up scrapping the idea because I liked seeing the vibrant colors of my pictures, especially the woodworking ones.
Simply apply this to your CSS class:
or as an inline style using ReactJS:
Hope this helps.