CSS - Fungsi Matematika: Panduan untuk Pemula

Halo sana, para ahli CSS masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia fungsi matematika CSS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan bergerak langkah demi langkah. Pada akhir tutorial ini, Anda akan terkejut melihat betapa banyak hal yang bisa Anda lakukan hanya dengan beberapa trik matematika di CSS!

Fungsi Aritmetika Dasar

Ayo mulai dari dasar. CSS menyediakan beberapa fungsi aritmetika yang sederhana dan bisa membuat hidup kita jauh lebih mudah saat mendesign halaman web. Fungsi-fungsi ini memungkinkan kita untuk melakukan perhitungan langsung di kode CSS kita.

Fungsi calc()

Fungsi calc() adalah pedang swiss army knife dari fungsi matematika CSS. Itu memungkinkan Anda untuk melakukan operasi aritmetika dasar langsung di CSS Anda. mari kita lihat contoh:

.box {
width: calc(100% - 20px);
}

Dalam contoh ini, kita mengatur lebar elemen dengan kelas "box" menjadi 100% lebar elemen induknya, kurang 20 pixel. Ini sangat berguna saat Anda ingin membuat tata letak responsif yang menyesuaikan ukuran layar berbeda.

mari kitauraikan nya:

• 100% mewakili lebar penuh elemen induk.
• -20px mengurangi 20 pixel dari lebar itu.
• Fungsi calc() melakukan perhitungan ini bagi kita.

Anda dapat menggunakan semua empat operasi aritmetika dasar di calc(): penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Ini adalah contoh lain:

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

Dalam kasus ini, kita sedang membuat tata letak tiga kolom. Setiap kolom menempati satu seperempat lebar (33.33%) kurang 10 pixel untuk jarak, dan kita menambahkan margin kanan yang dua kali ukuran jarak itu.

Fungsi Perbandingan

Sekarang kita sudah menguasai dasar-dasar, ayo pindah ke beberapa fungsi perbandingan. Fungsi-fungsi ini sangat cocok untuk membuat desain responsif yang menyesuaikan berbagai kondisi.

Fungsi min()

Fungsi min() mengembalikan nilai terkecil dari daftar nilai. Itu sempurna untuk menetapkan batas maksimum ukuran elemen. Misalnya:

.responsive-text {
font-size: min(5vw, 30px);
}

Ini menetapkan ukuran font menjadi 5% lebar viewport, tetapi tidak lebih besar dari 30 pixel. Itu adalah cara bagus untuk membuat teks responsif tanpa membuatnya menjadi terlalu besar di layar besar.

Fungsi max()

Seperti yang Anda mungkin tebak, max() melakukan hal yang sebaliknya dari min(). Itu mengembalikan nilai terbesar dari daftar nilai. mari kita lihat bagaimana Anda bisa menggunakannya:

.responsive-image {
width: max(300px, 50%);
}

Ini memastikan bahwa gambar selalu setidaknya 300 pixel lebar, bahkan jika 50% wadahnya lebih kecil dari itu.

Fungsi clamp()

Fungsi clamp() mirip seperti gabungan dari min() dan max(). Itu mengambil tiga nilai: nilai minimum, nilai yang diinginkan, dan nilai maksimum. mari kita lihat contoh:

.responsive-element {
width: clamp(200px, 50%, 500px);
}

Ini menetapkan lebar menjadi 50% wadah, tetapi memastikan itu tidak kurang dari 200px atau lebih besar dari 500px.

Fungsi CSS Matematika Lanjut

Sekarang kita sudah melihat dasar-dasar, ayo masuk ke beberapa fungsi lanjut yang bisa benar-benar meningkatkan keterampilan CSS Anda ke level berikutnya.

Fungsi abs()

Fungsi abs() mengembalikan nilai absolut dari sebuah angka. Ini bisa berguna dalam animasi atau saat Anda ingin memastikan nilai selalu positif. mari kita lihat contoh:

.box {
transform: translateX(abs(var(--x)));
}

Ini akan memindahkan kotak secara horizontal berdasarkan nilai properti khusus --x, selalu ke arah positif tanpa menghiraukan apakah --x positif atau negatif.

Fungsi round()

Fungsi round() membulatkan angka ke bilangan bulat terdekat. Ini bisa berguna untuk menempelkan nilai ke grid. Misalnya:

.grid-item {
width: calc(round(100% / 3));
}

Ini akan membuat tata letak tiga kolom di mana setiap kolom lebar nya dibulatkan ke bilangan bulat terdekat.

Fungsi Nilai Langkah

Fungsi nilai langkah memungkinkan Anda membuat nilai yang berubah dalam langkah-langkah diskrit, bukan secara mulus. Ini bisa membuat efek visual menarik.

Fungsi mod()

Fungsi mod() mengembalikan sisa setelah pembagian. Ini bisa digunakan untuk membuat pola berulang. mari kita lihat contoh:

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

Ini akan membuat latar belakang garis-garis di mana kecerahan setiap garis ditentukan oleh indeks (--i), dan berulang setiap 10 garis.

Fungsi Trigonometri

Terakhir tapi bukan terkecil, mari kita bicara tentang beberapa fungsi trigonometri. Fungsi-fungsi ini bisa sangat kuat untuk membuat animasi dan tata letak kompleks.

Fungsi sin() dan cos()

Fungsi sin() dan cos() mengembalikan sinus dan kosinus sudut, masing-masing. Fungsi-fungsi ini sering digunakan dalam animasi. mari kita lihat contoh sederhana:

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

Ini membuat animasi orbit di mana elemen bergerak dalam lingkaran di sekitar titik tengah.

Tabel Referensi Fungsi

Berikut adalah tabel referensi cepat dari semua fungsi CSS matematika yang kita diskusikan:

Fungsi	Deskripsi	Contoh
calc()	Melakukan aritmetika dasar	calc(100% - 20px)
min()	Mengembalikan nilai terkecil	min(5vw, 30px)
max()	Mengembalikan nilai terbesar	max(300px, 50%)
clamp()	Menahan nilai antara minimum dan maksimum	clamp(200px, 50%, 500px)
abs()	Mengembalikan nilai absolut	abs(var(--x))
round()	Bulatkan ke bilangan bulat terdekat	round(100% / 3)
mod()	Mengembalikan sisa setelah pembagian	mod(var(--i) * 10, 100)
sin()	Mengembalikan sinus sudut	sin(45deg)
cos()	Mengembalikan kosinus sudut	cos(45deg)

Dan itu saja! Kita telah melihat banyak hal, dari aritmetika dasar hingga fungsi trigonometri. Ingat, kunci untuk menguasai ini adalah praktik. Cobalah untuk memasukkan mereka ke dalam CSS Anda, eksperimen dengan kombinasi yang berbeda, dan segera Anda akan dapat membuat desain responsif yang menakjubkan dengan mudah. Selamat coding!

Credits: Image by storyset