Mengenal dan Memahami CSS3 calc() Function

CSS3 calc() Function - Fungsi CSS3 calc() baru saya kenal malam ini, mungkin sahabat blogger ada yang sudah lama mengenalnya, atau baru tau pas baca artikel ini  :)

Kenalan saya dengan Calc ini berawal dari oprek template, karena sudah mulai bosan dengan tampilan blog ini (mudah-mudahan beres secepatnya). Permasalahan yang saya temukan adalah saya ingin memberikan margin-right: 100px pada width: 100% ternyata, width : 100% tidak bisa menggunakan margin.

Supaya lebih jelas, lihat gambar dibawah. Saya punya objek merah dengan lebar 350px dan tinggi 350px. Saya ingin menutup (memblock) objek merah dengan objek orange, tapi tidak semuanya, menyisakan ke samping kanan 100px dan ke bawah 50px.

CSS yang saya buat seperti ini :

#orange {
 background-color: orange;
 width: 100%;
 height: 100%;
 margin-right: 100px;
 margin-bottom: 50px;
}

Ternyata yang saya lakukan gagal, seperti yang saya sebutkan di atas, margin tidak akan berpengaruh. Setelah browsing, akhirnya menemukan solusi di stackoverflow yaitu dengan calc() css function. Maka CSS yang benar untuk objek orange di atas adalah :

#orange {
 background-color: orange;
 width: calc(100% - 100px);
 height: calc(100% - 50px);
}

Sampai sini, mudah-mudahan sobat paham dengan apa yang saya maksudkan. Untuk CSS dan HTML lengkap, silahkan lihat DEMO

Mengenal calc()Function

Calc adalah kependekan dari calculator, artinya CSS3 ini mendukung fungsi kalkulator. Sehingga tanda yang digunakan bisa berupa hitungan Matematika seperti +, -, / dan *.

Salah satu penggunaan dengan menggunakan metode pengurangan, seperti yang sudah saya contohkan di atas. Sebagai contoh lain, sobat bisa membagi objek sama rata seperti ini :

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

Silahkan sobat bereksplorasi sendiri denga calc() function ini.

Beberapa hal yang harus diperhatikan pada calc()

• Penghitungan dilakukan dari kiri ke kanan, atau atas ke bawah.
• Tanda perkalian, atau dalam kurung akan didahulukan seperti pada penghitungan Matematika.
• Tanda + atau - harus didahuli dengan spasi seperti contoh : calc(100% - 30px) apabila tanpa spasi, maka dianggap sebagai minus. Tetapi tanda * atau / bisa dengan spasi atau tidak. Contohnya, boleh ditulis calc(100% / 3) atau calc(100%/3).

Semoga bermanfaat..