Showing posts with label Satuan Ukuran CSS. Show all posts
Showing posts with label Satuan Ukuran CSS. Show all posts

02/04/2016

Ukuran Angle (Pengukuran Sudut) - Satuan Ukuran dalam CSS

css angle
Istilah Angle adalah tipe data CSS yang digunakan untuk menentukan perubahan nilai berdasarkan unit sudut. Penggunaan unit sudut ini digambarkan dalam dimensi lingkaran sebagaimana lingkaran sebuah jam. Dalam penulisannya (sintak CSS), ukuran Angle / sudut terdiri dari angka lalu diikuti oleh satuan ukuran pada ukuran Angle tanpa ada spasi diantara keduanya.
Units Deskripsi
deg Sudut dalam Derajat. Ada 360 derajat dalam lingkaran.
rad Sudut dalam Radian. Ada 2π radian dalam lingkaran.
turn Sudut bergantian. Satu lingkaran (360 derajat) adalah satu turns, artinya ada satu putaran dalam lingkaran
grad Sudut dalam Gradian, setara dengan 1/400 dari unit turn. Ada 400 gradians dalam lingkaran..

Satuan Ukuran CSS: Sudut Deg


Deg merupakan sudut dalam derajat. Nilai sudut deg berkisar antara nilai 0 sampai 360deg. Nilai dari satu lingkaran penuh pada sudut deg sama dengan 360deg, setengah lingkaran sama dengan 180deg.

Satuan Ukuran CSS: Sudut Rad


Rad merupakan sudut dalam radian. Nilai sudut rad berkisar antara nilai 0 sampai 2πrad. Nilai dari satu lingkaran penuh pada sudut rad sama dengan 2πrad, (setara dengan 360°). Karena itu setengah lingkaran sama dengan πrad (setara dengan 180°). Untuk mengubah atau mengkonversi radian menjadi derajat, kita hanya perlu mengalikan nilai radian dengan 180/π.
angle rad

Satuan Ukuran CSS: Sudut Turn


Turn merupakan sudut bergantian. Nilai sudut turn berkisar antara nilai 0 sampai 1turn, contoh: 0.1turn, 0.2turn, 0.3turn dst. Nilai dari satu lingkaran penuh pada sudut turn sama dengan 1turn, (setara dengan 360°). Karena itu setengah lingkaran sama dengan 0.5turn (setara dengan 180°).

Satuan Ukuran CSS: Sudut Grad


Grad merupakan sudut gradian. Nilai sudut grad berkisar antara nilai 0 sampai 400grad. Nilai dari satu lingkaran penuh pada sudut grad sama dengan 400grad, (setara dengan 360°). Karena itu setengah lingkaran sama dengan 200grad (setara dengan 180°).
Catatan
  1. Secara statistik, nilai sudut dapat direpresentasikan dalam berbagai cara; 0deg akan memiliki efek yang sama dengan 360deg atau 3600deg (setiap putaran ini mencapai titik yang sama pada lingkaran).
  2. Dalam penulisannya, nilai sudut ditulis dengan angka kemudian diikuti satuan sudut tanpa ada spasi diantara keduanya, contoh: 100deg
  3. Nilai dari masing-masing satuan sudut(angle) dapat dipresentasikan dengan nilai positif maupun negatif. Sebab, seperti yang telah kita ketahui, ukuran sudut digambarkan dalam linkaran sebagaimana lingkaran jam. Artinya, jika nilai yang kita tentukan searah jarum jam maka itu adalah nilai positif, contoh: 100deg. sedangkan jika nilai yang kita tentukan berlawanan dengan arah jarum jam, maka itu adalah nilai negatif, contoh: -100deg.

23/03/2016

Length (Satuan Ukuran dalam CSS)

no-image
Istilah length adalah tipe data CSS yang digunakan untuk menentukan ukuran elemen menggunakan unit relatif atau unit absolut. Dalam penulisannya (sintak CSS), ukuran lenght terdiri dari integer atau angka desimal lalu diikuti oleh singkatan satuan ukuran tanpa ada spasi diantara keduanya.

Satuan Ukuran CSS Unit Relative


Unit relative adalah unit yang besaran nilainya akan menghasilkan ukuran yang tidak tetap dan tergantung pada beberapa hal seperti nilai yang ditentukan pada elemen induk, ukuran lebar viewport, ukruan tinggi viewport (layar area konten pada browser diluar toolbars, tab, address box atau lainnya), dll. Artinya, besaran nilai dari unit relative akan menghasilkan ukuran yang tidak pasti.
Berikut ini gambaran singkat dari unit relative
Unit Deskripsi
% Relatif terhadap nilai yang telah ditentukan pada elemen induk
em Unit em relatif terhadap nilai yang telah ditentukan pada elemen induk (dua kali lebih besar)
rem Unit rem relatif terhadap ukuran elemen utama(HTML)
Kata Kunci xx-small, x-small, small, medium, large, x-large, xx-large
vw Unit vw relatif terhadap 1/100 ukuran lebar viewport
vh Unit vh relatif terhadap 1/100 ukurang tinggi viewport
ch Unit ch relatif terhadap lebar karakter "0" (nol) pada jenis font yang digunakan
vmin Unit vmin relatif terhadap 1/100 ukuran terkecil viewport(lebar/tinggi)
vmax Unit vmax Relatif terhadap 1/100 ukuran terbesar viewport(lebar/tinggi)
Contoh penulisan Satuan Ukuran CSS unit relatif adalah seperti berikut

Sintaks CSS

#elemen {font-size: 1em}

Sebagai catatan, apabilai kita tidak menentukan nilai CSS font-size pada sebuah dokumen HTML, ada nilai default yang digunakan oleh kebanyakan browser untuk menentukan ukuran font pada tag <body> dan <HTML>, yaitu 100%, artinya 100% = 1em = 1rem = 16px = 12pt.

Satuan Ukuran CSS Nilai Absolute


Nilai absolute adalah nilai-nilai yang didasarkan pada ukuran media printing dan tidak terpengaruh oleh kondisi css tag induk elemen HTML (parent) atau viewport. Artinya, besaran nilai dari unit absolute akan menghasilkan ukuran yang pasti.
Nilai Deskripsi
px Satuan pixel titik layar, 1px = 1/96 dari 1in
mm Satuan milimeter
cm Satuan centimeter, 1cm = 10mm
di satuan inchi, 1di = 2,54cm
pt satuan point, 1pt = 1,72 inchi
pc Satuan pica, 1pc = 12point
Contoh penulisan Satuan Ukuran CSS unit absolute adalah seperti berikut

Sintaks CSS

#elemen {font-size: 1px}
Catatan
  1. jenis satuan ukuran dapat diabaikan jika angka yang dimaksud adalah nol (0)
  2. Jenis nilai yang paling umum di CSS dari unit relative adalah persen dan dari unit absolute adalah pixel.
  3. Satuan Piksel (px) dapat dikategorikan dalam unit relatif dan unit absolute. Pixel disebut sebagian bagian dari unit relative karena pengukuran didasarkan pada resolusi layar monitor atau layar, bukan ukuran viewport. Namun, piksel juga bisa dikategorikan sebagai bagian dari unit absolute karena ukuran yang diberikan dalam pixel dapat berubah hanya melalui fitur zoom pada layar monitor saja.
  4. Panjang dan lebar Gambar dengan tipe seperti foto jpeg dan gifs didefinisikan dalam piksel.

20/03/2016

Satuan Ukuran Dalam CSS

no-image
CSS memiliki banyak cara untuk menentukan ukuran sebuah elemen, untuk beberapa properti, dibutuhkan satuan ukuran yang berbeda yang meliputi beberapa tipe ukuran seperti ukuran panjang, frekuensi atau nilai waktu atau unit. Pada artikel ini kita akan mengenal satuan ukuran yang dapat diterapkan sebagai sebuah nilai pada properti CSS.