8 CSS Tricks You Never Tried Before

In the world of web development, new technologies appear and disappear very fast. When a technology is new, people go crazy about it, but after a couple of years, when all the features are explored, it becomes mundane and backdated. Eventually, another new technology replaces the old one. Consider how HTML5 replaced Flash and you will realize that web world is highly dynamic and volatile.

When CSS was first invented, web developers and designers welcomed it with arms wide open. It simply changed web design methods and helped designers create flexible, neat and professional looking web pages effortlessly. At present, some people are saying that the glory days of CSS are gone and there is nothing new that it can offer. Fortunately, this prediction is wrong as CSS still has lots of things to offer for years to come. In this article, you will learn about some advanced properties that you did not even know existed and also innovative ways to use an aspect of CSS you never tried before.

Image credit: memes.com

Forget last row space sharing troubles

Suppose you need to display several items in a grid, but you don’t know the exact number of items that need to be displayed. In that case, you can take help of Flexbox to break the last row consistently. So, if there are only 2 items, the row will be divided in two parts and if there are 3 items, it will be divided in three parts.

Box shadow for particle animations

It requires extensive knowledge in CSS. However, if you think that you are an expert, then amalgamate some Sass and maths with box shadow to create 2D curves, 3D motions and unique particle animations to impress the viewers.

Polyhedra animation

You may have already witnessed CSS polygons created using borders, but only a few know that there is more powerful tool in “transform” property of CSS. When you chain and apply transforms on nested elements, it helps you to create complex polygons.

Use “calc” to define position

This feature is useful for determining margins, dimensions and padding. When you are sizing the background of a website, the “calc” function can be really helpful.

Take help of box sizing

Suppose you have created an element that has a width of 200px and padding of 20px. If you don’t take care of it, it will count as an element having 220px width as padding will be added. With the help of box sizing, you can make sure that padding is placed within the defined width and does not add to it.

Reap the benefits of writing modes

If you work with East Asian clients, then this feature of CSS is really helpful for you.  A few East Asian countries write text vertically and lines are positioned right to left. It is pretty unconventional and can be a problem when you insert text content. With the help of writing modes, you can determine the direction of text flow and accommodate content accordingly.

Check hyphenation

Using hyphens across numerous lines is not a good practice. If there are more than two hyphens in a row, then it can cause problems. In order to prevent more than two hyphens in a row, you can use “hyphenate-limit-lines” and to restrict number of hyphenated words, you can use “hyphenate-limit-chars”.

Unleash SVG

You can use SVG for background design in CSS. However, if your target audience mostly use backdated web browsers, then you may avoid it because SVG is not supported by Internet Explorer 8 and earlier versions.

These are some of the things you can do with CSS and surprise the end users with your creativity. If you want to learn more CSS tricks, you can visit http://bigdropinc.com/.