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 on HTML. So we can just think why CSS is more important in 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.

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

1. CSS Calc

• Addition(+)

• Subtraction (-)

• Multiplication (*)

• Division (/)

2. Advanced Selectors

• :checked

• :empty

• ::placeholder-shown

• :target

3. Filter effects

• blur

• brightness

• sepia

• contrast

• saturate

• hue-rotate

• grayscale

• drop-shadow

4. 3D Transforms

5. Flexbox

6. Ellipsis

1. Calculating Values With calc()

CSS Calc()is a powerful calculation method to do simple maths for the replacement of any number of value. It allows four type of math operators. Those are;

• Addition(+)

• Subtraction (-)

• Multiplication (*)

• Division (/)

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.

As mentioned above, we can use CSS calc() to determine lengths likewidth, height, margin, padding, font-size etc.

This is the simple subtraction example on width property.

Browser support– Can I Use

2. Advanced Selectors

CSS selector is the part of CSS rule, it actually selects the specific HTML element you want to style. Let’s look at all the different kinds of modern selectors available.

:checked

The :checked CSS pseudo-class selector represents any radio, checkbox or option element that is checked or toggled to a state, so :checked selector is only associated with input elements like radio, checkbox and select. The :checked selector will be working when a user selects or checks on the input element, else there will be no matching case detected.

:empty

The :empty pseudo-class selector will select elements that contain either no content or an HTML comment. It’s useful for hiding empty elements that might cause weird spacing (e.g. they have padding, height, etc..).

::placeholder-shown

::placeholder pseudo selector. It helps to style the placeholder text from the input fields and textarea element, but it all happens only when the placeholder text is not at the input field. Here ::placeholder-shown helps us to make style the input field also.

:target

The :target pseudo selector provides styling capabilities for an element whose ID matches the window location’s hash. It depends on something called a “fragment identifier.” The :target selector would be helpful in trendy single page website, when the user clicks on the menu, the page will scroll to correspondent element. At that time the selector help us to find which element is focused once the scrolling is completed.

This is the example;

URL is

http://www.toobler.com/#contact

HTML is

<section id=”contact”>
...
</section>

This CSS selector would match

:target{
   border-left: solid 10px orange;
}

Browser support– Can I Use

3. CSS3 Filters

CSS3 filter is one of the most powerful native features of CSS, 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 knowhow on multimedia platform.

Here is the list of some popular and usefulCSS3 Filter effects and their examples.

• blur

• brightness

• sepia

• contrast

• saturate

• hue-rotate

• grayscale

• drop-shadow

CSS filter on image

CSS filter on video

So what’s the differences between box-shadow and drop-shadow?

It’s a common question 🙂 . Most of the developer might be very familiar with  box-shadow  Property comparing withdrop-shadow. The best benefits using drop-shadow is it will apply a shadow to a PNG image around the edges of the image and not the rectangle boundary, like box-shadow does. You will understand as you check the below example;

Browser support– Can I Use

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.

Basic Example

Check out my simple experiment. You may know how 3D transform help for showcasing product in a website

Then why Z-axis?

You might be confused why 3D transforms give us a Z-axis. Let’s take an example for 6 faces Cube.

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }

#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }

#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }

#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }

#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }

#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }

Note here that the translateZ function comes after the rotate. The order of transform functions is important. Take a moment and soak this up. Each face is first rotated towards its position, then translated outward in a separate vector.

Browser support– Can I Use

5. Flexbox

Flexbox is the short of 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.”

Some of the most popular flexbox properties are below;

For Flex container

• display:flex ;

• flex-direction:row | row-reverse | column | column-reverse ;

• flex-wrap:nowrap | wrap | wrap-reverse;

• align-items:flex-start | flex-end | center | baseline | stretch;

• justify-content:flex-start | flex-end | space-between | center | space-around;

• align-content:flex-start | flex-end | center | space-between | space-around | stretch;

For Flex items

• align-self:auto | flex-start | flex-end | center | baseline | stretch;

• flex-grow:number;

• flex-shrink:number;

• flex-order:number;

How use Flexbox?

Starting with Flexbox is a simple method. Suppose we have a parent element  and they have some child elements, here we should declare by settings display: flex; in the parent element to working flexbox. This is the basic example of flexbox, the codes seems below;

.flex-parent {
  display: -webkit-flex;
  display: flex;
}
.flex-parent .child-item {
  background-color: #fff;
  color: #000;
  padding: 10px;
  margin: 10px;
  font-size: 13px;
}

The result should be like this (Basic example with display direction is row)

The above example shows three flex items. They are positioned by default: along the horizontal flex line, from left to right (If page direction: ltr;).

Flex-direction example chart 

Browser support– Can I Use

Want to know more about Flexbox?

6. CSS ellipsis

CSS3 offers a surprising feature for truncating strings with declaration of ellipse. It will help for maintaining perfect grid or layout in the web when coming flash flood texts. And it will allow to avoiding uses of excessive scripting like javascript, php, etc…

Ellipsis result is the combination overflow:hidden; property that can be set to hid the over contents, white-space:nowrap; to determine the way text is laid out and the text-overflow: ellipsis; to truncate the text line and add three dots at the end of the line.

Browser support– Can I Use

CSS3 offers amazing features that will be very helpful to make websites/apps 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 use 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 truncate texts without the use of scripting languages. Each feature definitely sounds good and is highly recommended considering the user experience of the respected application.

Hope you enjoyed the article 🙂 . If you have any doubts or suggestions, please feel free to comment here.

Want to get in touch with us, please Contact us.