CSS Calc() Fonsksiyonu

CSS Calc() işlevi bazı özel hesaplamalar yapmaya izin verir ve CSS kodlarınıza dinamiklik kazandırmanızı sağlar.

Profesyonle geliştiricler .calc() fonksiyonu ile birçok önemli tasarım detaylarını kalylıkla yapabilmektedir. özellikle width, height ve font-size özelliklerinde calc() kullanımı yerinde olduğu takdirde çok faydalı olmaktadır.

calc() fonksiyonunu öğrenmenin en iyi yolu doğru ve yanlış kullanım türlerini benimsedikten sonra birkaç basit uygulama yapmaktır. Kullandıkça ne kadar işlevsel olduğunu analayacak ve kullanmaktan kendinizi alamayacaksınız.

Calc() Kullanımı

h2{font-size: calc(1.5em + 10px );}
                

• calc(unit - unit) çıkarma işlemi yapılabilir. örenek width:calc(100% - 200px); dediğimizde toplam boyuttan 200px çıkarılarak öğenin with hesabı tarayıcıya iletilir.
• calc(unit + unit) Toplama işlemi yapılabilir. Örnek width:calc(50% + 200px);
• calc(unit * unit) Çarpma işlemi yapılabilir. Burada değerler sadece sayı olmalıdır. Örnek font-size:calc(1.5em * 2); yazıldığında font-size = 3em olacaktır.
• calc(unit / unit) Bölme işlemi yapılabilir. buradada değerler sadece sayı değeri olmalıdır. Örnek olarak 6 adet divi eşit genişilkte yan yana dizmek isterseniz.
  div{width:calc(100 % 6);} şeklinde yazabilirsiniz.

CSS'te en çok kullanılan calc() işlemleri width, height, font-size, padding, margin hesabı için yapılmaktadır.
Özellikle responsive tarasarım yaparaken birçok preofesyonel web geliştiricisi calc() işlevini kullanmaktadır.

calc() işlevini yazarken css units ile +,- toplama ve çıkarma işlemleri işaretleri arasında boşluk bırakmanız zorunludur.

calc() işlevi ile toplama, çıkarma, çarpma ve bölme hesap işlemleri yapabilirsiniz.

Calc() özelliği Web tasarım ve kodlama süreçlerinde header, servisler, navigasyon, ürün kategori listesi, haber/duyuru listesi gibi alanlarda responsive media queries özellikleri ile çok fazla kullanabilirsiniz. Bazı standart dışı web tasarım projelerinde calc() fonksiyonu kullanımı çok zor kodlamaları kolaylıkla yapmanızı sağlayacaktır. Örnek olarak ustunyapi.com.tr web tasarım projesinde  masa üstü görünümde üst alandaki navigasyon ve hamburger menu alanını width : calc() css ile kodlanmıştır. 

Calc Doğru Kullanım

width:calc(100% - 50px);
height:calc(100vh / 5);  /* Sonuç 20vh */
font-size:calc(2vw + 10px);
                

Calc Yanlış Kullanım

width:calc(100%- 50px); /*"-" ve "+" işlemlerde Arada Boşluk Bırakılması Zorunludur */ 
width:calc(100vw / 5em);  /* farklı değerler birbirine blünemez. Bölme işlemlerinde sol tarafta bir css değeri olabilir. sol tarafta sayı olmalıdır. */
font-size:calc(2vw+10px); /* Toplama ve çıkarma işlemlerinde farklı css uzunluk birimleri kullanılabilir ama işaret ve sayı arasında boşluk bırakmaz iseniz kod çalışmayacaktır. */
                

Calc() İle Width Hesaplama

Aşağıdaki örnekte calc() fonksiyonunu kullanarak 3 adet div öğesini eşit bir şekilde yerleştirelim.

Örnek HTML Kodları

<div class="result-example">
    <div class="demo-3col"></div>
    <div class="demo-3col"></div>
    <div class="demo-3col"></div>
</div>
                

Örnek HTML Kodları

.demo-3col{
  width: calc((100% / 3) - 10px); /* Bu şekilde birden fazla işlem de yapabilirsiniz */
  margin: 5px;
  background-color: green;
  position: relative;
  height: 200px;
  float: left;
}
                

Örnek uygulamada calc() fonksiyonu içerisinde önce bölme işlemi yaptık ve sonrasında 20px margin-left ve margin-right değerlerini çıkardık.

Sonuç

Div içerisindeki "3 Eşit Div" Yazısı Eklemesi

 .demo-3col::before {
    position: absolute;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    content: "3 Eşit Div";
    left: 50%;
    top: 50%;
    display: inline;
    transform: translate(-50%, -50%);
  }