CSS looks easy at first glance but it’s not.
Mastering CSS requires a lot of practice.
One of the best ways to improve the tech skills is by pushing some pieces of them to some limits.
Limits don’t have to be hard nor complex.
This is an example of how to reach some interesting outcome trying to push a little piece of technology out of its usual context.
CSS is the web technology used to style contents.
Lately, CSS has become powerful enough to built complex layouts and animation effects.
Indeed, the browser is pretty smart at computing complex layouts these days.
Speaking of which, we cannot avoid mentioning the CSS Flexbox module.
Flex specification contains multiple properties to allow defining precisely how each element has to behave within its parent and alongside its siblings.
In this case, it’s all about exploiting the flex-grow property that is responsible for weight the size of each element based on the total weight of all siblings, a weight that will be converted in pixel dimension according to the available space of the parent container.
You can play with the source code in this pen.
Source files on Github repo.
Have a nice day.
Spotted a typo or (likely) a grammar error? Send a pull request.