Cool CSS3 features

The calc function

With CSS3, you can input results of calculations as unit values with the calc function. Here is how you can use it:

width: calc(100% – 30px);

This function is obviously useful when you need specific units as it saves you the time to make calculations on your own and give fixed units.

CSS3 variables

CSS3 variables are incoming. One example is the currentColor variable which allows you to give the current color of the element (the color property) to other properties, it works as an alias, sparing you from writing again the color’s code. It can be used in the following way:

p {

  color: crimson;

  border: 5px solid currentColor;

  box-shadow: 0 0 5px solid currentColor;

}

Background attachment

Background attachment allows you to define whether a background, such as a background image, should scroll as the user scrolls down the container or whether it should stay and look fixed no matter how high the container is and how much the user scrolls. You use it in the following way:

p {

background-image: url("https://cdn.pixabay.com/photo/2015/02/14/10/16/cat-636172_960_720.jpg");

 background-attachment:scroll;

 height:400px;

}

Possible values for the property is scroll and fixed.

Clip path

Clip path allows you to make the element boxes in custom shapes. Here is how it works:

clip-path: circle(900px at 0 100px);

It will make the box circular depending on the values given.

 clip-path:  inset(50px 25px);

It will cut the box depending on the values given:

And the box without inset looks like this:

Using a polygon for the element box looks like this:

 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

For all possible values of the property, you can visit https://developer.mozilla.org/en/docs/Web/CSS/clip-path

Fixed positioning

CSS3 allows for the position: fixed property value. This would make the element static when the user scrolls the page. In other words, the element would be always visible in the corner where you place it with other properties such as top and bottom,

Element’s opacity

With CSS3, you can control the opacity of any element. Values could be units between 0 and 1. Here is an example:

p {

  background-image: url("https://cdn.pixabay.com/photo/2015/02/14/10/16/cat-636172_960_720.jpg");

  background-attachment:local;

  height:200px;

  opacity:0.3;

}

And the effect can be seen in the image below:

CSS3 Transforms

CSS3 offers a few ways to transform elements.

Rotate works with degrees (from 0 to 360).

transform: rotate(9deg);

A rotation of 9 degrees of the cat background looks as shown below:

You can also translate elements (which moves them in the x and y axis), scale elements which makes them expand or shrink in size or skew them.

Below is an example of the skewed cat:

transform: skew(23deg);

For more information on the wonderful possibilities of CSS3 transforms, visit https://www.w3schools.com/cssref/css3_pr_transform.asp