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 function
Sample 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 function
Sample 2


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

calc function
Sample 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.. dan jangan banyak nanya.. soalnya saya juga baru kenal  :D

26 komentar

Nyimak dulu nich kang,,,,masih pagi

Balas

rajin.. udah ol pagi2 :)

Balas

Iya saya juga baru kenal nih kang, belum pernah pakai juga, tapi menjadi lebih mudah dengan kalkulator ini ya kang :) makasih ah ilmunya :)

Balas

Hadeeeh saya kok ga ngarti yak

Balas

Iya kang.. ternyata masih banyak yang harus dipelajari..
oh ya.. lupa belum ditulis di atas, fungsi ini blom support di browser opera

Balas

heheh coba dibaca pelan2 dan dipraktekan.. pasti ngerti

Balas

wah... mau ganti template lagi ya ?

Mudah-mudahan segera rampung kang, supaya kita bisa melihat hasilnya.

Balas

hasilnya pasti lebih jelek dari template ini... hehe

Balas

diskripsnya bagus gan, sangat bermanfaat dan memberikan informasi wawasan lebih luas.. thx

https://obattradisionallipoma.wordpress.com/

Balas

Wah kayanya akan ada tampilan super lagi di blog ini..ditunggu kang perubahan desain nya

Balas

waah ini pagi2 saya sudah ketemu tulisan begini,css calc fungsion,,,saya sich blas g ngerti kang,,,tapi suatu saat akan saya coba...buat refreshing,,,daripada selalu bergelut dengan kode dan perintah AutoCAD

Balas

Ilmu baru nih hehehe
Baru tu kalo ada calc() function. Kadang emg sempet bingung sih kalo ngasih margin tapi ngga ngaruh. Ternyata ada fungsi trsendiri :ngakak:

Balas

Sudah lama nggak berkunjung kesini, ternyata sudah banyak postingan yang baru, hehe
Terimakasih kang sudah memberi pengetahuan baru :-d

Balas

Saya juga baru tau ada fungsi calc di css kang, Makasi ilmunya kang, Padahal udah 2 tahun Utak atik template :ngakak:

Balas

Blogger sekaliber Kang Ismet aja baru kenal tu ma calc css..apalagi saya yang ga paham sama sekali..:-)

Tapi infonya bagus Kang, buat tambah pengetahuan saya tentang css.

Makasih Kang udah mau berbagi ilmu dgn kami para blogger pemula





Balas

Penggunaan atribut calc() memang cukup bermanfaat

Balas

duh kabocot wae ... ngopi dulu kang ah
sayangnya itu ya kang belum suport opera
soalnya cukup banyak pengguna opera hehe

Balas

jadi penasaran liat tampilan baru blog kang ismet hasil hibernasi panjang heheheheee
kira2 tampilan yg sebelumnya dibagiin gak y??

btw saya jg jd ikut2an hibernasi gara2 setiap mampir sini kang ismet masih asik ngorok, gak asik klo gak ada kang ismet

Balas

ketinggalan dikit kang,
dari kemarin melirik-lirik, setiap kursor saya lewat kayanya ada sesuatu yg menarik dari kolom komentar blog kang ismet.. bisikin dong kodenya kang

Balas

eh eh eh, ini lama ngga kliatan kemana ya? apa aku yg baru nongol? kemana aja bro? :ngakak:
pikirku udah ngga aktif di blog, atau udah ganti blog lagi?

Balas

Saya nunggu tampilan Blog bari Ki Mudah2n bs menjadi warna baru design blog Indonesia ya kang :D

Balas

fungsi calc in sepertinya akan sangat berguna ya kang, terutama saat membuat tampilan responsiv

Balas

Wah bagus nih untuk di coba

Balas

waduuhhh...secara pengetahuann saya masih cetek, dikasih beginian malah pusyiingg hiksss

Balas

kalau saya kaya gini nya ga aktif, caranya gimana ya

Balas

Poskan Komentar


×
Chat