Mengenal CSS3 Calc Function

June 10, 2021

Misterthree

Facebook Twitter Instagram Youtube

CSS3 memiliki fungsi calc() khusus untuk melakukan perhitungan matematika dasar. Sehingga tanda yang digunakan bisa berupa + , - , / dan *.

Sebagai salah satu contoh kita menggunakan metode pengurangan, kita akan membagi objek menjadi tiga bagian sama rata :

Atau bisa juga kita membuat semacam menu, dengan jarak ke kanan sebesar 20px seperti ini :

Beberapa hal yang harus diperhatikan:

1. Penghitungan dilakukan dari kiri ke kanan, atau atas ke bawah.

2. Tanda * atau dalam kurung akan didahulukan seperti pada penghitungan Matematika.

3. Tanda + atau - harus didahuli dengan spasi

   Contoh : calc(100% - 30px)

   Apabila tanpa spasi, maka dianggap sebagai minus.

4. Tenda * atau / bisa dengan spasi atau tidak.

   Contoh: boleh ditulis calc(100% / 3) atau calc(100%/3).

Sekian tutorial dari saya, semoga bermanfaat dan selamat mencoba…!