Računanje vrijednosti pomoću funckcije calc()

CSS 3
05.12.2017

Još jedno novo svojstvo CSS-a je calc() funkcija. Dopušta nam da jednostavno računamo aritmetičke operacije u CSS-u. Možemo je koristiti svagdje gdje je potrebno izračunati veličinu. Najbolje od svega je što možemo koristiti različite veličine, kao što su postotci i pixeli. S ovim svojstvom možemo napraviti razlićite okvire  koje prije nismo mogli.

Najbolje od svega je to što radi u IE9 bez prefixa. Funkcija calc() uzima jednostavne izraze kao parametre, gdje se rezultat izraza uzima kao parametar. Izraz može biti bilo koji jednostavni izraz koji kombinira sljedeće operatore, koristeći standardna pravila prednosti operatora +, -, /, *

<div class="zcode-banner">Zcode!</div>

.zcode-banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}