Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Mengenal dan Memahami CSS3 calc() Function

Belajar memahami dan menggunakan 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.

Calc CSS Sample Image 1

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 :

Calc CSSSample Image 2

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

Calc CSSSample Image 3

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..

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Posting Komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.