THE MOST USEFUL CSS3 FEATURES

Though HTML is the core of a web, we know we can’t imagine it without CSS. CSS is an extremely powerful style sheet language which is used to control the look and feel of the content written in HTML. So we can just think why CSS is more important on the web.

As CSS comes with level 3 standard they make their importance in the web more effectively. Media query, Text effects, Animations, Filter effects, Gradients color, Text properties, Background & Border properties, Multi-column, Flexbox, Transform etc. are the wonderful features of CSS3.

What are the points to be discussed here?

Here we’ll discuss on some of the most powerful and useful CSS3 features. They are as following:

1- CSS Calc

2- Advanced Selectors

3- Filter effects

4- 3D Transforms

5- Flexbox

Let's go with above points;

1- Calculating Values With calc()

CSS calc() is a powerful calculation method to do simple maths for the replacement of any number of value. We can use CSS cal() without any preprocessors [ SASS, LESS, STYLUS, etc ] because it’s a native CSS math function. Preprocessors can only mix units with a fixed relation between them, but CSS cal() can calculate any mix units like percentage and pixels. It will be working at the render time. It allows four type of math operators. It will allows Addition(+), Subtraction (-), Multiplication (*) and Division (/) functions.

2- Advanced Selectors

CSS selector is the part of CSS rule, it actually selects the specific HTML element you want to style. :checked, :empty, ::placeholder-shown, :target, etc are the some of the important advanced selectors.

3- CSS3 Filters

CSS3 filter is one of the most powerful native features of CSS3, which is able to achieve varying visual effects on media elements (image, video, etc). The filter applied on the element is rendered. It can be helpful to apply some awesome photoshop filter effects (blur, brightness, sepia, contrast, grayscale, saturate, etc) on the element without using any kind of multimedia software.

Also, this feature will be very handy on the dynamic images or videos, which means when a user uploads a new media in the server, CSS3 Filter will automatically apply the existing effects on them, even in a plain media. And it can be a great time-saver even for a beginner who has no know-how on the multimedia platform.

4- 3D Transforms

3D Transform feature is one of the delightful features of CSS3. It is used to convert elements to 3D transformation. 3D transforms give us a Z-axis. To fully see the effects of Z-axis transforms, we need to use transform-style in preserve-3d. It’s very similar to 2D CSS transforms.

The basic properties are translate3d, scale3d, rotateX, rotateY and rotateZ. translate3d and scale3d take three arguments for x,y and z.

5- Flexbox

Flexbox is short of the Flexible box. It’s a new layout mode in CSS3. Using Flexbox, positioning child elements becomes much easier, and complex layouts can be achieved simply with cleaner code.

“Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.”

Wrapping Up

CSS3 offers amazing features that will be very helpful to make websites/apps for less coded improving flexibility as well as load speed simultaneously. It also gives awesome features to make web pages more alive.

In my perspective, the calc function makes less code and avoids the uses of scripts. Advanced Selectors helps to make clean and fewer markups. Filter effects give fewer extraneous images and faster page loading. 3D Transforms allows some basic 3D features to play on the web. Flexbox provides us with a powerful and highly useful module for layout configurations. Ellipsis is produced to truncating texts without the use of scripting languages. Each feature definitely sounds good and is highly recommended considering the user experience of the respected application. 

Do you want to know more about this article with detailed working examples? Please have a look here for full version of the article "THE MOST USEFUL CSS3 FEATURES".

Hope you enjoyed the article.