CSS

The calc() in CSS3

Modern CSS3 has a lot of hidden gems which many developers/designers are still not known to, one of which is calc().

calc() is a css3 function which is used to calculate width, height, transition, animation and angles also.

For Example:

#div1, #div2 {
width: 40%; /* all browsers */
width: -moz-calc(50% - 50px); /* Firefox 4+ */
width: calc(50% - 50px); /* IE9+ and future browsers */
}

Here, -moz-calc is used for mozilla browser.

We can use calc() for assigning margins also like below:

#div2{
margin-left: 20%; /* all browsers */
margin-left: -moz-calc(100px); /* Firefox 4+ */
margin-left: calc(100px); /* IE9+ browsers */

}