MYSKILL CSS 11
Penjelasan sizing unit
Web adalah media yang responsif, tetapi terkadang kita ingin mengontrol dimensinya untuk meningkatkan kualitas UI (User Interface) secara keseluruhan.
Contoh yang baik dari hal ini adalah membatasi panjang garis untuk meningkatkan keterbacaan. Bagaimana kita melakukannya dalam media yang fleksibel seperti web, ada beberapa cara untuk melakukannya.
Numbers
Angka/numbers digunakan untuk menentukan opacity, line-height, dan bahkan untuk nilai saluran warna dalam rgb. Bilangan adlah bilangan bulat tanpa satuan (1,2,3,100) dan desimal (.1,.2,.3).
Angka/numbers memiliki arti tergantung pada konteksnya.
Misalnya saat mendefinisikan line-height sebuah angka mewakili rasio jika kita mendefinisikannya tanpa unit pendukung.
1. Contoh penggunaan numbers
a. Menggunakan nilai utuk filter:filter: sepia (0,5) menerapkan filter sepia 50% ke elemen
b. Mengatur opacity :0paciti:0,5 menerapkan opacity 50%.
c. Di channel warna: rgb (50, 50, 50) dimana nilai 0-225 dapat diterima untuk menetapkan nilai waarna.
d. Mengubah elemen :transform :scale (1,2) menskalakan elemen sebesar 120% dari ukuran awalnya.
Precentages
Saat menggunakan presentase dalam css, kita perlu mengetahui bagaimana presentase dihitung. Misalnya, lebar dihitung sebagai presentase dari lebar yang tersedia di elemen induk.
Absolute lengths
Absolute lengths membuatnya dapat diprediksi dimanapun mereka digunakan CSS kita.
Misalnya, jika kita menggunakan cm untuk mengatur elemen kita dan kemudian kita display, itu akan akurat jika kita membandingkannya dengan penggaris.
Menggunakan fungsi warna hsl (), kita mendefinisikan hitam yang sebenarnya dengan menulis hsl (0 0% 0%), atau hsl (0deg 0 % 0%).
Ini karena parameter hue menentukan derajat pada roda warna, yang jika kita menggunakan tipe angka, adalah 0-360. Kita juga dapat menggunakan jenis sudut, yaitu (0deg) atau (0turn). Saturasi dan kecerahan ditentukan dengan presentase.
Css digunakan tidak hanya untuk konten digital, tetapi juga untuk menata konten cetak. Panjang absolut (absolute lengths) benar-benar berguna saat mendesain untuk dicetak.
Relative lengths
Relative lengths dihitung terhadap nilai dasar, seperti presentase. Perbedaan antara ini dan presentase adlah anda dapat mengukur elemen secara
kontekstual.
Ini berarti CSS memiliki unit seperti ch yang menggunakan ukuran teks sebagai dasar, dan vw yang didasarkan pada lebar viewport (jendela browser anda).
Relative lengths sangat berguna di web karena sifatnya yang responsif.
Font size relative units
Css menyediakan unit bermanfaat yang relatif terhadap ukuran elemen tipografi yang diberikan, seperti ukuran teks itu sendiri (unit em)
em Sehubungan dengan ukuran font, yaitu 1,5em akan menjadi 50%
lebih besar dari ukuran font dasar yang dihitung dari induknya.
Lh Ketinggian garis elemen.
Cap Tinggi huruf kapital dalam ukuran font elemen yang dihitung saat ini.
Rem Ukuran font elemen root (default adlah 16px) Rlh Ketinggian garis elemen induk.
ch Ukuran yang diwakili oleh glyph “0”
Viewport relative units
Kita dapat menggunakan dimensi viewport (jendela browser) sebagai basis awal pengukura. Unit-uit ini membagi ruang viewport yang tersedia.
Vw 1% lebar viewport. Orang menggunakan unit ini untuk melakukan trik font keren, seperti mengubah font header berdasarkan lebar halaman sehingga pengguna mengubah ukuran, font juga akan berubah ukurannya.
Vh 1% ketinggian viewport. Anda dapat menggunakan ini untuk mengatur item di UI, jika anda memiliki toolbar footer misalnya.
Vmi n
1% lebih kecil dai dimensi viewport.
vmax 1% lebih besar dari dimensi viewport.
