Kursus IT Dasar CSS 021_Tipe Nilai, Unit, Ukuran, Warna

Tipe Numerik

Dalam CSS, berbagai nilai numerik digunakan dalam properti yang berbeda. Tipe numerik umum:

• String: Teks dalam tanda kutip tunggal atau ganda.
• Angka: Bilangan bulat atau desimal. Seperti 1024, -100, 0.255.
• Unit: Tipe numerik dengan unit, misalnya 45deg, 5s atau 10px.
• Persentase: Tipe numerik persentase, misalnya 50%.
• Nilai warna: Heksadesimal, RGB, RGBA, HSL, HSLA, dll.
• Kata kunci: Kata dengan makna spesifik seperti auto, initial, inherit, dll.

Unit

Unit dalam CSS digunakan untuk merepresentasikan nilai properti seperti panjang, sudut, waktu, frekuensi, dll.

Unit Panjang:

Unit panjang relatif:

• em: Relatif terhadap ukuran font elemen induk. 1.5em berarti 1,5 kali ukuran font induk.
• rem: Relatif terhadap ukuran font elemen root (html). 1rem sama dengan ukuran font root.
• ex: Relatif terhadap tinggi huruf kecil “x”.

Contoh:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

Unit panjang absolut:

• px: Piksel, unit paling dasar dan paling banyak digunakan dalam CSS.
• in: Inci, 1 inci = 96 piksel.
• cm: Sentimeter.
• mm: Milimeter.
• pt: Point, 1pt = 1/72 inci.
• pc: Pica, 1pc = 12pt = 16 piksel.

Contoh:

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

Unit persentase relatif:

• %: Persentase relatif terhadap elemen induk.

Contoh:

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

Unit viewport:

• vw: 1vw = 1% lebar viewport.
• vh: 1vh = 1% tinggi viewport.
• vmin: Yang lebih kecil antara vw dan vh.
• vmax: Yang lebih besar antara vw dan vh.

Contoh:

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

Unit Sudut:

deg (derajat):

• deg adalah unit sudut paling umum, satu lingkaran penuh = 360 derajat.

Contoh:

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (radian):

• rad, satu lingkaran penuh = 2π radian.

Contoh:

1
.example {
2
  transform: rotate(1rad);
3
}

grad (gradian):

• grad, satu lingkaran penuh = 400 gradian.

1
.example {
2
  transform: rotate(50grad);
3
}

turn (putaran):

• turn mewakili satu putaran penuh = 360 derajat.

1
.example {
2
  transform: rotate(0.5turn);
3
}

Unit Waktu:

s (detik)

• s adalah unit detik.

Contoh:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (milidetik)

• ms, 1 detik = 1000 milidetik.

Contoh:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

Unit Frekuensi:

Hz (hertz)

• Hertz adalah unit frekuensi paling umum.

Contoh:

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (kilohertz)

• 1 kHz = 1000 Hz.

Contoh:

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

Unit Resolusi:

dpi (titik per inci)

• dpi mewakili titik per inci.

Contoh:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (titik per piksel)

• dppx mewakili titik per piksel di layar.

Contoh:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (titik per sentimeter)

• dpcm mewakili titik per sentimeter.

Contoh:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

Ukuran

Ukuran dalam CSS mengontrol dimensi elemen.

Properti width dan height

Mengatur lebar dan tinggi elemen.

Contoh:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

Properti max-width dan max-height

Mengatur lebar dan tinggi maksimum.

Contoh:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

Properti min-width dan min-height:

Contoh:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Warna

Warna kata kunci

Warna yang direpresentasikan oleh kata kunci: red (merah), blue (biru), green (hijau), dll.

Contoh:

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

Warna heksadesimal

Warna RGB dalam heksadesimal enam atau tiga digit. Format #RRGGBB atau #RGB.

Contoh:

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

Warna RGB, RGBA

rgb() menerima tiga parameter (0-255). rgba() menambahkan parameter transparansi (0-1).

Contoh:

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

Warna HSL, HSLA

hsl() menerima hue (0-360), saturasi (0%-100%) dan kecerahan (0%-100%). hsla() menambahkan transparansi (0-1).

Contoh:

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

Tabel warna RGB (oschina.net)