Navbar: Inversion Conversion
Background
I’ve just started my third (Ruby on Rails) web app as part of the coding boot-camp I’m taking. Just like on the prior two apps, the first visual thing we create is our navigation bar using Bootstrap. Note that we started the navbar with the example code from the Bootstrap documentation.
One thing you should know about me is that I am sensitive to white pages with black text. To me, they appear very bright and are difficult to look at.
Experimentation
I found a cool pattern to use as a background for my navbar. The only problem was, the image was way too bright for me. I decided that I’d just add the background, then just try to find a way to invert just the image in my CSS code. After that, I planned on changing design elements to a darker scheme as I went along.
While I searched, I found that it was not very straightforward to invert just the image in my CSS. It was, however, very easy to invert the entire element (the navbar class, in this case). It was then that it occurred to me — why don’t I just do that? It actually took care of everything I needed at once, including saving me from manually restyling the colors of all the elements.
In the end, what I found was a simple way to quickly get a dark navbar up and running. All you have to do is (1) paste the nav-bar code into your view script. Then, in your navbar CSS code (2) add your light background pattern, then (3) invert the whole element.
.navbar{
background: image_url(‘ripples.png’);
filter: invert(1);
}


