CSS Math Functions

CSS mendukung beberapa fungsi matematika seperti calc(), min(), max(), dan clamp() untuk melakukan perhitungan nilai secara langsung di dalam properti CSS.

1. `calc()`

Digunakan untuk menghitung nilai dari ekspresi.

<style>
  .box {
    width: calc(100% - 100px);
    height: 100px;
    background-color: lightblue;
  }
</style>
 
<div class="box">Kotak dengan width: calc(100% - 100px)</div>

2. `min()`

Mengambil nilai terkecil dari beberapa nilai.

<style>
  .min-box {
    width: min(50%, 300px);
    height: 100px;
    background-color: lightgreen;
  }
</style>
 
<div class="min-box">Lebar maksimal 300px atau 50%</div>

3. `max()`

Mengambil nilai terbesar dari beberapa nilai.

<style>
  .max-box {
    width: max(200px, 30%);
    height: 100px;
    background-color: lightcoral;
  }
</style>
 
<div class="max-box">Lebar minimal 200px atau 30%</div>

4. `clamp()`

Menetapkan nilai dengan batas minimum dan maksimum.

<style>
  .clamp-box {
    width: clamp(200px, 50%, 500px);
    height: 100px;
    background-color: lightgoldenrodyellow;
  }
</style>
 
<div class="clamp-box">Lebar antara 200px - 500px tergantung viewport</div>

Ringkasan

Fungsi	Deskripsi
`calc()`	Menghitung ekspresi matematis
`min()`	Mengambil nilai terkecil
`max()`	Mengambil nilai terbesar
`clamp()`	Menentukan nilai antara minimum dan maksimum

CSS Math Functions

CSS Math Functions

1. calc()

2. min()

3. max()

4. clamp()

Ringkasan

On this page

1. `calc()`

2. `min()`

3. `max()`

4. `clamp()`