Menü Kapat

calc() ile CSS’te basit matematik işlemler yapmak

calc(), herhangi bir sayısal değer için basit matematik işlemler yapmakta kullanılabilecek, asli bir CSS özelliği.

calc()’ın en yararlı tarafı, farklı birimleri bir arada kullanabilmesi. Böylece mesela width: 50% - 50px; gibi bir genişlik yazmanıza imkan veriyor.

calc() Fonksiyonu ile esnek sütunlar yapmak

@media (min-width: 760px){ // yalnızca yeterince geniş ekranlarda
  [class^="col-"] {
    float: left;
    padding: 0 1rem;
  }
  .col-1 { width: calc(100% / 12); }
  .col-2 { width: calc(100% / 12 * 2); }
  .col-3 { width: calc(100% / 12 * 3); }
  .col-4 { width: calc(100% / 12 * 4); }
  .col-5 { width: calc(100% / 12 * 5); }
  .col-6 { width: calc(100% / 12 * 6); }
}

calc() Fonksiyonu ile padding olan ebeveyn içindeki resmin yerleştirilmesi

<!-- html -->
<div class="ebeveyn">
  <img src="gorsel.jpg" alt="" />
</div>
/* css */
div.ebeveyn {
  width: 50%;
  padding: 0 1.5em 1em;
}

img {
  max-width: calc(100% + 3em);
  margin-left: -1.5em;
}

Artalan görsellerinin yerleşimi için calc() fonksiyonunun kullanımı

h1 {
 background: url('gorsel1.png'), url('gorsel2.jpg');
 background-repeat: no-repeat;
 background-position: calc(100% - 40px) calc(100% + 30px), 50%;
}

Tarayıcı desteği

calc() fonksiyonunun tarayıcı desteği de oldukça iyi.

calc() fonksiyonunu ie8, opera mini ve android tarayıcı 4.3 hariç tüm tarayıcılar destekliyor
calc() fonksiyonunu ie8, opera mini ve android tarayıcı 4.3 hariç tüm tarayıcılar destekliyor

Bir cevap yazın