Wyszukaj / o blogu

CSS - calc()

Opublikowano czw 02 kwietnia 2020 w css • 1 min read

Właściwość calc() jest funkcją której mogą być przypisane wartości: length, angles, time, number, integer. Jest szczególnie przydatna w obliczaniu wartości relatywnych - ponieważ: pozwala na wykonywanie matematycznych wyrażeń dodawania, odejmowania, mnożenia, dzielenia (+,-,*,/)i wykorzystuje wynik jako wartość CSS, która przyjmuje wcześniej wspomniane wartości.

Przykładowe zastosowanie

50% rodzica dzielone przez 3

el {
width: calc(100% - 50% / 3);
}

10% rodzica + dodatkowe 10px

    .el {
    margin-left: calc(10% + 10px);
  }

Źródło i polecane linki:

https://tympanus.net/codrops/css_reference/calc/

Pełen spis referencji CSS

https://www.w3schools.com/cssref/default.asp