Geek Culture
Published in

Geek Culture

CSS — It’s Always Useful Learning Something New.

CSS

While I was going through a Bootcamp, I didn’t pay too much attention to design aspects or CSS in general. Now I have time and no project deadlines, I decided to take review how CSS works. I took the advice and started with plain CSS, rather than looking into more complex frameworks like Bootstrap. I found few things that impressed me and I would love to share them below.

CSS Filters

CSS Filters allow you to change images and text without a need to modify them separately, you can change color, blur, add opacity, and other pretty interesting things with filters. I found it particularly interesting to be used in menus and galleries.

Let’s say I have a simple menu in a form of a list.

Menu using blur filter in CSS

HTML

<header><ul><li><a href=”index.html”>Home</a></li><li><a href=”cats.html”>Cats</a></li><li><a href=”#”>About us</a></li><li><a href=”#”>Contact</a></li></ul></header>

Once I add the following CSS, I can blur Menu items, and bring them back to focus, once I hover over them.

CSS

li a{float: left;margin: 1px;padding: 2px;color:blue;filter: blur(0.8px);font-size: large;}li a:hover {filter: blur(0px);}

It might not be needed that much for menus, but I like that blur function, and it would work even better for something like galleries.

You can see 2 images below, which represent a simple gallery of 3 cat images. All of the images are slightly blurred and greyed out, but when you hover over an image, you can see it in color and with clarity.

Greyed out blurred images
Hover effect on the middle image

HTML

<div class=gallery><p><img src=”/Misc/animals/cat1.jpg” alt=””></p><p><img src=”/Misc/animals/cat2.jpg” alt=””></p><p><img src=”/Misc/animals/cat3.jpg” alt=””></p></div>

CSS

.gallery img {filter: blur(2px) grayscale(1);}.gallery img:hover{filter: blur(0px);}

CSS :nth-child() Selector

When using Excel, I love using Tables, because it makes calculations easier, but also because of visual effects that allow better representations of table lines.

nth-child() Selector allows selecting every element that is the nth child, regardless of type, of its parent. n could be a number, keyword, or formula. This would come in handy in menus or lists. You can make a background of each odd item in the list grey with this selector.

List where each odd line has grey background

HTML

<ol><li>item one</li><li>item two</li><li>item three</li><li>item four</li><li>item five</li><li>item six</li><li>item seven</li><li>item eight</li></ol>

CSS

li:nth-child(odd){background:grey ;}

Sticky Navigation

If you have to scroll on the page, but you want your navigation to stay always on top of the page there is a great new value for position property called sticky.

It literally sticks the element where you want it to be. Although there is one important thing to remember, an element will only be able to stick on the area that its parent element covers. So you need to make sure that the sticky element is within a container to make it work.

Navigation sticks to the top, but moves on text when you scroll

HTML

<body class=”content”><nav class=”navbar”><ul><li><a href=”index.html”>Home</a></li><li><a href=”cats.html”>Cats</a></li><li><a href=”navigation.html”>Navigation</a></li><li><a href=”#”>Contact</a></li></ul></nav><h1>This is practice site</h1><p>Other text</p></body>

CSS

.navbar{position: sticky;top: 10px;}

It’s being interesting discovering new things within CSS, and I’ll keep learning more.

Please check me out on the following social networks as well, I would love to hear from you! — LinkedIn, GitHub, and Facebook.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nick Solonyy

Nick Solonyy

34 Followers

Full-stack software engineer with an international MBA. Project Management and Team Collaboration experience. React | Javascript | Redux | Rails