Garis banyak digunakan untuk menghias bagian sisi sebuah elemen.

Pada tutorial ini, kita akan belajar:

  • Cara Membuat Garis
  • Mengatur Ukuran dan Warna
  • Jenis-jenis Garis
  • Memberikan garis pada sisi tertentu
  • Membuat Garis yang pojoknya tumpul
  • Membuat Garis dengan Gambar

CSS Border

Cara Membuat Garis dengan CSS

Garis dapat kita buat dengan properti border.

Properti yang digunakan untuk membuat garis pada CSS adalah border.

Properti ini memiliki 3 nilai yang harus diberikan:

  • Ukuran garis
  • Jenis Garis
  • Warna Garis
  • Format Properti Border di CSS

Contoh:

1
2
3
header {
    border: 5px solid black;
}

Elemen (header) yang kita seleksi akan diberikan garis dengan ketebalan 5px dan warna biru.

Sekarang mari kita coba latihan!

Latihan: Membuat Garis dengan CSS

Buatlah file baru dengan nama latihan-border.html, kemudian isi dengan kode berikut.

latihan-border.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan CSS Border</title>

    <style>
        body {
            font-family: sans-serif;
        }
        header {
            border: 2px solid blue;
            text-align: center;
            margin-bottom: 1em;
        }

        article {
            border: 2px solid fuchsia;
            padding: 1em;
            margin-bottom: 1em;
        }

        footer {
            text-align: center;
            padding: 0.5em;
            border: 2px solid green;
        }
    </style>
</head>
<body>

    <header>
        <h1>Latihan CSS Border</h1>
    </header>

    <article>
        Ini adalah contoh paragraf artikel buat Latihan
        properti border di CSS. Properti border adalah properti
        untuk membuat garis pada sisi elemen HTML. Garis ini
        berguna untuk memberikan batas antar elemen. Sehingga,
        bisa terlihat ada pemisah dan menjadi kesatuan.
    </article>

    <footer>
        &copy; 2022 Petani Kode
    </footer>
    
</body>
</html>

Setelah itu, simpan dan cobalah buka di browser.

Elemen header, article, dan footer sekarang punya garis.

Memberikan Garis pada sisi Tertentu

Kita bisa memberikan garis pada sisi tertentu dengan atribut berikut.

  • border-top untuk garis di sisi atas elemen;
  • border-bottom untuk garis di sisi bawah elemen;
  • border-left untuk garis di sisi kiri;
  • border-right untuk garis di sisi kanan.

Contoh, Saya ingin memberikan garis di bawah sisi elemen h1, maka kode CSS-nya akan seperti ini:

1
2
3
h1 {
    border-bottom: 2px solid gray;
}

Selain menggunakan atribut-atribut di atas, kita bisa juga buat sekaligus dengan atribut border dengan format seperti ini:

1
border: top left bottom right;

Contoh:

1
2
3
h1 {
    border: 0 0 2px 0;
}

Pada contoh ini, kita memberi garis pada sisi bawah elemen h1.

Biar makin paham, mari kita coba latihan.

Latihan: Membuat Garis pada Sisi Tertentu

Buatlah file HTML baru dengan nama latihan-sisi-border.html, kemudian isi dengan kode berikut:

latihan-sisi-border.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Latihan CSS Border - Garis di sisi tertentu</title>
    <style>
      header {
        border-bottom: 2px dashed silver;
      }
      footer {
        border-top: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Latihan CSS Border untuk sisi tertentu</h1>
    </header>
    <main>
      <p>Hello ini adalah contoh latihan membuat garis di CSS pada sisi tertentu.
      Perhatikan elemen header di atas 👆, kita memberikan garis di sisi bawahnya.
      Lalu coba perhatikan elemen footer di bawah 👇, kita memberikan garis pada sisi
      atas elemen.</p>
    </main>
    <footer>
      <p>Copyright &copy; Petani Kode<p>
    </footer>
  </body>
</html>

Setelah itu, simpan dan cobalah buka di browser.

Jenis-jenis Garis

Jenis garis di CSS bisa kita ganti.

Kita bisa pakai properti border-style untuk mengganti jenis garis.

Berikut ini jenis garis yang biasanya digunakan:

  • solid garis biasa
  • dotted garis dengan titik putus-putus
  • dashed garis putus-putus dengan dash
  • double garis double
  • none tanpa garis
  • hidden garis tersembunyi

Contoh cara penggunaan:

1
2
3
h1 {
    border-style: dashed;
}

Kita juga bisa memberikan jenis garis langsung pada properti border seperti ini:

1
2
3
h1 {
    border: 2px dashed gray;
}

Biar makin paham, mari kita coba latihan!

Latihan: Mengubah Jenis Garis

Buatlah file HTML baru dengan nama latihan-border-style.html, kemudian isi dengan kode berikut:

latihan-border-style.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contoh Border Style</title>
    <style>
      header {
        border-bottom: 2px double blue;
      }
      
      footer {
        border-top: 2px dashed gray;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Latihan Border Style</h1>
    </header>
    <article>
      <p>Ini adalah contoh border style di CSS.
      Coba perhatikan style garis pada elemen yang
      diberikan garis. Ada yang style-nya solid, dashed,
      dotted</p>
    </article>
    <footer>
      <p>Copyright &copy; Petani Kode</p>
    </footer>
  </body>
</html>

Simpan dan coba buka di Browser.

Membuat Pojok Garis Tumpul (Rounded Corner)

Ini properti favorit yang sering saya pakai.

Properti border-radius berfungsi untuk membuat pojok elemen menjadi tumpul atau nggak lancip.

Rounded corner vs non rounded

Kita bisa memberikan nilai border-radius dengan satuan px, %, em, dll.

Contoh:

1
2
3
4
5
6
h1 {
    background: blue;
    color: white;
    padding: 16px;
    border-radius: 16px;
}

Artinya, kita memberikan radius pojok sebesar 16px.

Nah biar lebih paham, mari kita coba terapkan.

Buatlah file baru dengan nama latihan-border-radius.html, kemudian isi dengan kode berikut:

latihan-border-radius.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Border Radius</title>

  <style>
    body {
      font-family: sans-serif;
    }
    header {
      border: 1px solid silver;
      padding: 1em;
      margin-bottom: 1em;
      border-radius: 16px;
    }

    article {
      border: 1px solid silver;
      padding: 1em;
      margin-bottom: 1em;
      border-radius: 16px;
    }

    footer {
      border: 1px solid silver;
      padding: 1em;
      margin-bottom: 1em;
      border-radius: 16px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Latihan Border Radius</h1>
  </header>

  <article>
    <p>Border Radius akan membuat pojok di bagian elemen jadi tumpul atau
      tidak berbentuk siku, tapi berbentuk lingkaran. Biasanya nilai border
      radius ditentukan dengan satuan piksel, persen, em, dll. Kalau diberikan
      nilai 100% berarti sudut lingkaran penuh, yakni 360 derajat.
      Silakan coba-coba eksperimen sendiri dengan mengganti nilai
      pada properti <code>border-radius</code>.
    </p>
  </article>

  <footer>
    <p>Copyright &copy; Petani Kode</p>
  </footer>
</body>
</html>

Simpan dan coba buka di Browser.

Membuat Garis dengan Gambar

Selain menggunakan border style yang sudah ada, kita bisa menggunakan gambar sebagai border.

Caranya gimana? Caranya menggunakan properti border-image.

Properti border-image merupakan properti gabungan dari beberapa properti untuk membuat garis dengan gambar.

Apa saja itu?

  • border-image-source untuk menentukan source image yang akan dijadikan garis;
  • border-image-slice untuk menentukan gimana slicing gambar;
  • border-image-width untuk menentukan lebar gambar;
  • border-image-outset untuk menentukan jarak antara border box ke luar;
  • border-image-repeat untuk menentukan repetisi gambar.

Format gambar yang dipakai sebagai garis bisa PNG dan juga SVG.

Namun perlu diperhatikan, beberapa browser lama tidak mendukung properti ini. Kamu bisa cek berapa persen browser yang support di caniuse.

Sekarang mari kita coba latihan menggunakan border-image.

Buatlah file baru dengan nama latihan-border-image.html kemudian isi dengan kode berikut:

latihan-border-image.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Border Image</title>

  <style>
    blockquote {
      margin: 1em;
      padding: 1em;
      font-size: 2em;
      border-width: 1em;
      border-style: solid;
      border-image: url(border.svg) 100 round;
    }
  </style>
</head>
<body>
  <blockquote>
    Ini adalah contoh elemen dengan border image.
  </blockquote>
</body>
</html>

Jika kamu coba membukanya sekarang, maka garisnya tidak akan bisa ditampilkan.

Mengapa? Ini karena kita belum menyiapkan file gambarnya.

Silakan download file Gambar bebas diinternet

Kemudian taruh di dalam satu folder dengan file HTML-nya.

Sekarang coba kembali latihan-border-image.html di browser.

Mantap 👍

Apa Selanjutnya? Sejauh ini kita sudah belajar cara menggunakan properti border di CSS. Properti ini akan sering kita pakai saat membuat garis.

Menentukan Ukuran Elemen dengan Satuan yang Tepat

Dahulu, menentukan ukuran elemen di web tidak ribet. Tinggal sat-set pakai piksel dan persen.

Soalnya dulu web cuma dibuka di layar PC aja dengan ukuran resolusi sekitar 800x600px.

Tapi makin ke sini, makin ribet.

Mengapa? Karena ukuran layar device untuk membuka web sudah bervariasi, mulai dari ukuran yang kecil hingga ukuran yang besar.

Mulai dari layar jam tangan hingga layar bioskop. Web bisa dibuka di mana-mana.

Kita dituntut untuk membuat website yang responsif dan mengikuti ukuran layar-layar itu.

Karena itu, untuk memenuhi kebutuhan ini, CSS terus dikembangkan.

Sekarang kita tidak cuma pakai satuan piksel (px) saja, tapi juga berapa satuan tambahan untuk tujuan tertentu.

Mari kita bahas, satuan-satuan yang sering dipakai saat ini.

Menentukan Ukuran dengan Piksel

Satuan ukuran dengan piksel atau px adalah satuan ukuran yang paling dasar di CSS. Ini karena awalnya web cuma ditampilkan di layar monitor saja.

Monitor menggunakan piksel untuk ukuran resolusinya.

Misalnya kita punya monitor dengan resolusi 800x600, maka biasanya kita akan menentukan ukuran elemen tidak lebih dari ukuran ini.

Mengapa? Karena kalau lebih, nanti nggak bisa ditampilkan alias overflow.

Buatlah file HTML baru dengan nama latihan-size-px.html kemudian isi dengan kode berikut.

latihan-size-px.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Size dengan Piksel</title>

  <style>
    header {
      width: 600px;
      background-color: darkviolet;
      color: white;
      padding: 16px;
      margin-bottom: 16px;
    }

    article {
      width: 600px;
      background-color: honeydew;
      padding: 16px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Latihan Sizing dengan Satuan Piksel</h1>
  </header>

  <article>
    <p>Saya sedang mencoba menggunakan mengatur ukuran elemen dengan satuan piksel</p>
  </article>
</body>
</html>

Pada latihan ini, kita menentukan ukuran lebar, margin, dan padding dalam satuan px (piksel).

Sekarang coba buka dengan browser.

Ukuran elemen pada latihan ini, kita tentukan pakai satuan piksel (px). Satuan ini bersifat fix, artinya dia tidak akan terpengaruh dengan ukuran layar.

Sekarang coba perkecil ukuran browser dengan menggesernya dari tepi samping.

Kamu bisa juga pakai Inspect Element

Hasilnya, elemen akan tetap berukuran 600px, walaupun kita perkecil ukuran viewport-nya menjadi 430px.

Resize ukuran viewport, Ini tidak responsif dong?

Yap, benar. ini tidak responsif.

Karena itu, ukuran dengan satuan piksel ini sekarang agak jarang dipakai.

Terus solusinya gimana? Ada lagi satuan lain, yakni Persen, em, rem, vh, vw, dll.

Mari kita bahas:

Menentukan Ukuran dengan Persen (%)

Satuan ukuran persen biasanya akan mengikuti ukuran induknya.

Maksudnya? Misalnya kita punya elemen header yang berada di dalam body. Elemen body adalah induk dari elemen header, maka saat kita pakai satuan persen pada header.

1
2
3
header {
  width: 50%;
}

ukuran lebar header akan mengambil 50% dari ukuran lebar body.

Nah, saat kita coba resize ukuran body, maka si header juga akan berubah.

Biar lebih paham, mari kita coba!

Buatlah file HTML baru dengan nama latihan-size-persen.html, kemudian isi kodenya seperti ini:

latihan-size-persen.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Sizing dengan Persen</title>

  <style>
    header {
      width: 60%;
      padding: 5%;
      margin-bottom: 5%;
      color: white;
      background-color: slateblue;
      border-radius: 5%;
    }

    h2 {
      font-size: 200%;
    }

    .text-big {
      font-size: 120%;
    }
  </style>
</head>
<body>
  <header>
    <h1>Latihan Sizing dengan Persen</h1>
  </header>
  <article>
    <h2>Ini judul artikel level 2 dengan ukuran 200%</h2>
    <p>Ini adalah paragraf dengan ukuran teks normal atau default</p>
    <p class="text-big">Ini adalah paragraf dengan ukuran teks 120% dari ukuran default</p>
  </article>
</body>
</html>

Setelah itu, coba buka di browser.

Pada latihan ini, kita menggunakan satuan persen untuk ukuran lebar, margin, padding, border-radius, serta ukuran font.

Apakah ini bagus? Tentu tidak, karena ada beberapa yang kurang cocok pakai persen. Seperti border-radius tidak bisa ditampilkan dengan sempurna karena pakai persen. Ini karena dia relatif dengan induknya. Sebaiknya pakai satuan piksel atau em untuk ini.

Lalu untuk jarak margin dan padding juga kurang cocok pakai persen.

Mengapa? Karena sifatnya satuan persen akan relatif ke ukuran induknya. Saat ukuran induk berubah, jarak margin dan padding juga akan ikut berubah.

Maka dari itu, baiknya pakai piksel atau em untuk jarak margin dan padding.

Terus untuk ukuran font gimana? Untuk font masih oke-oke aja pakai persen.

Tapi perlu diingat:

Ukuran font dengan persen akan relatif ke ukuran font elemen induknya.

Biasanya untuk ukuran font, kita pakai satuan em dan rem.

Lalu, sebenarnya satuan persen ini cocoknya untuk apa?

Biasanya ini dipakai buat menentukan lebar elemen yang sifatnya fluid atau dinamis.

Misalnya untuk membatasi ukuran maksimal gambar biar tidak melewati (overflow) ukuran induknya.

Oke, biar lebih paham yang saya maksud, caba ikuti latihan ini.

Buat file baru dengan nama latihan-persen-img-fluid.html, kemudian isi dengan kode berikut:

latihan-persen-img-fluid.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ukuran % untuk max-width</title>

  <style>
    header {
      width: 500px;
      background-color: slateblue;
      color: white;
      padding: 8px;
    }
  </style>
</head>
<body>
  
  <header>
    <img src="https://placehold.co/600x100" />
    <h1>Judul Website</h1>
  </header>

  <main>
    <p>Ini adalah konten website</p>
  </main>
</body>
</html>

Setelah itu, buka dengan browser dan perhatikan hasilnya.

Elemen gambar berada di dalam elemen header. Ukuran lebar elemen header adalah 500px, sementara ukuran lebar gambar adalah 600px. Gambar melewati batas ukuran lebar induknya, sehingga ditampilkan seperti di atas.

Gimana solusi untuk masalah ini?

Di sini kita gunakan properti max-width untuk membatasi maksimal lebarnya dan menggunakan satuan persen agar dinamis.

Sekarang coba ubah kode CSS-nya menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
header {
  width: 500px;
  background-color: slateblue;
  color: white;
  padding: 8px;
}

img {
  max-width: 100%;
}

Maka sekarang ukuran gambar akan 100% mengikuti ukuran induknya.

Sampai di sini saya harap anda paham konsep satuan dengan persen.

Intinya:

Satuan persen relatif dengan ukuran yang ada di induknya.

Berikutnya kita akan bahas tentang satuan em dan rem.

Menentukan Ukuran dengan Satuan EM dan REM

Satuan em dan rem lahir dari panjang karakter em dash (–). Karakter em dash seperti minus, tapi dia lebih panjang. Panjangnya mengikuti lebar huruf m makannya dinamakan em dash. Selain em dash ada juga en dash.

All dash, Panjang karakter em dash default biasanya 16px.

Satuan em akan mengikuti atau relatif dengan ukuran font.

Misalnya, kita menentukan ukuran basis font-nya adalah 18px, maka 1em bisa jadi adalah 18px.

Ukuran em biasanya dipakai untuk menentukan ukuran font, margin, dan padding agar lebih konsisten.

Nah, selain satuan em ada juga rem. apa bedanya?

Satuan rem (root em) merupakan satuan yang relatif pada ukuran font pada elemen root.

Maksudnya gimana tuh? Kalau em dia relatifnya ke ukuran font induk, sedangkan rem relatifnya ke ukuran font pada root elemen yakni elemen .

Satuan em sebenarnya mirip seperti persen. Nah, yang rem dia akan relatif dengan ukuran font pada root elemen.

Sekarang mari kita coba latihan!

Buatlah file HTML baru dengan nama latihan-size-em.html, kemudian isi dengan kode berikut:

latihan-size-em.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Sizing dengan em</title>

  <style>
    h2 {
      font-size: 1.5rem;
    }
    p {
      font-size: 2em;
    }

    footer {
      border-top: 1px solid silver;
      padding: 1em 0;
    }
  </style>
</head>
<body>
  <header>
    <h1>Latihan Sizing dengan em dan rem</h1>
  </header>

  <article>
    <h2>Judul ini ukuran satuan rem</h2>
    <p>Ini adalah paragraf yang ukurannya menggunakan satuan em dengan besar 2em atau 2x16px = 32px.</p>
  </article>

  <footer>
    <div>&copy; Petani Kode</div>
  </footer>
</body>
</html>

Setelah itu, coba buka dengan browser.

Pada latihan ini kita membuat ukuran font dan padding dengan satuan em.

Menentukan Ukuran yang Mengikuti Viewport

Viewport adalah area yang dipakai untuk menampilkan Web. Viewport biasanya akan berubah-ubah kalau kita resize ukuran browser.

Viewport di browser, Misalnya kita geser menjadi lebih kecil, maka ukuran viewport-nya akan berubah menjadi lebih kecil.

Biasanya viewport dipakai sebagai patokan untuk responsif.

Misalnya jika ukuran viewport di bawah 400px, maka ubah ukuran elemen tertentu biar terlihat cocok dengan viewport-nya.

Ada beberapa satuan yang dipakai untuk menentukan ukuran elemen agar mengikuti ukuran viewport.

  • vh Viewport Hight – tinggi dari viewport
  • vw Viewport Width – lebar dari viewport
  • vi Viewport inline
  • vb Viewport block
  • vmin dan vmax minimum dan maksimum ukuran dimensi viewport
  • Modifier viewport l (large), s (small), dan d (dynamic), Contoh: lvh, svw.

Biar lebih paham, mari kita coba latihan!

Buatlah file HTML baru dengan nama latihan-size-viewport.html kemudian isi dengan kode ini:

latihan-size-viewport.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Satuan Viewport</title>

  <style>
    header, section {
      width: 90vw;
      height: 90vh;
      color: white;
      background-color: darkcyan;
      border-radius: 1em;
      margin: 0.5em;
      padding: 1em;
    }

    footer {
      text-align: center;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Petani Kode</h1>
    <p>Website tempat belajar coding dengan tutorial yang gampang dipahami</p>
  </header>

  <section>
    <h1>Mau Belajar Apa Hari ini?</h1>
    <p>Kamu bisa belajar dari tutorial yang sudah kami sediakan.</p>
  </section>

  <section>
    <h1>Terima kasih</h1>
    <p>Terima kasih sudah belajar di Petani Kode.</p>
  </section>

  <footer>
    <p>&copy; Petani Kode</p>
  </footer>
</body>
</html>

Setelah itu, buka dengan browser.

Sekarang coba ubah ukuran viewport-nya dengan mengubah ukuran browser menjadi lebih kecil.

Perhatikanlah elemen header dan elemen section yang kita set ukuran tinggi dan lebarnya 90% dari viewport yakni dengan 90vh dan 90vw.

Saat kita resize ukuran viewport-nya, maka ukuran lebar dan tinggi elemennya juga akan ikut berubah mengikuti ukuran viewport.

Ini yang disebut relatif ke viewport.

Apa Selanjutnya? Kita sudah belajar beberapa satuan untuk menentukan ukuran elemen dengan CSS.

Gunakan seperlunya dan pastikan kamu menggunakan pada tempatnya.

Intinya: Kalau elemen tersebut akan berikan dinamis atau fluid, gunakan satuan yang relatif seperti persen, em, rem, dan satuan viewport.

Tapi kalau elemen itu nggak akan berubah ukurannya atau tetap, gunakan satuan yang fix seperti px.

Box Model CSS

Semua elemen HTML sebenarnya bentuknya kotak.

Nggak percaya? Coba aja buat HTML lalu kasi style ini:

1
2
3
* {
    border: 1px solid red;
}

Style ini akan membuat semua elemen memiliki garis (border) dengan warna merah merona hehe.

Kelihatan kan? Walau di sana ada yang bentuknya lingkaran, tapi pada dasarnya itu adalah kotak.

Pada tutorial ini, kita akan memahami konsep box model di CSS supaya nanti gampang bikin layout.

Kalau sudah paham konsep box model, mau bikin layout seperti apa pun akan terasa mudah.

Box Model di CSS

Box model adalah model yang dipakai untuk menampilkan elemen HTML di browser. Model ini akan memudahkan kita mengatur ukuran, posisi, dan properti lainnya.

Mengapa gak segitiga, jajar genjang, atau model yang lainnya?

Ya, karena pasti kita akan kesulitan menyusun layout pakai bentuk model-model itu.

Kalau pakai lingkaran, kita mesti tentukan jari-jari atau diameter untuk menentukan ukuran elemen. Kalau segitiga, ya tentu alas dan tingginya yang kita pakai. Bentuk model yang lain juga begitu.

Kalau pakai model kotak kan lebih gampang. Kita bisa tentukan ukuran elemen dari panjang dan lebar.

Selain itu, kotak juga mudah disusun.

Pada CSS Box model terdiri dari empat area.

Apa saja itu?

  • Area konten
  • Area padding
  • Area Border
  • Area Margin

Jadi tiap element HTML akan punya area 4 kotak ini. Ya, ibarat sebuah ruangan, pasti ada area lantai, area dinding, dan area di luar ruangan.

Biar lebih paham, mari kita bahas satu-per-satu:

  1. Area Konten
    Area konten merupakan area di mana konten kita akan ditampilkan. Biasanya area ini berisi teks dan gambar atau bisa juga berisi elemen lainnya. Area ini berada di paling dalam box model.

    Kalau kita ibaratkan sebuah foto, maka area konten ini adalah fotonya. Sedangkan border adalah bingkai/frame fotonya.

    Jika elemen berupa block bukan inline, ada beberapa properti yang bisa kita gunakan untuk area ini:

    • width buat menentukan lebar area konten
    • height buat menentukan tinggi area konten
    • max-width dan min-width buat menentukan batas lebar minimum dan maksimum
    • max-height dan min-height buat menentukan batas tinggi minimum dan maksimum

    Contoh:

    1
    2
    3
    4
    header {
      width: 640px;
      height: 255px;
    }

    Oh iya, kita belum bahas tentang display inline dan block. Tenang saja, di setelah kita bahas ke-4 area box model ini.. kita akan masuk ke sana.

    Untuk saat ini, mari kita lanjutkan dulu bahas:

  2. Area Padding
    Area padding merupakan area yang memisahkan area konten dengan area border (garis batas).

    Buat ngatur jarak area padding, kita bisa pakai properti padding.

    • padding properti buat tentukan ukuran padding di semua sisi
    • padding-top buat tentukan ukuran padding pada sisi atas
    • padding-right buat tentukan ukuran padding pada sisi kanan
    • padding-bottom buat tentukan ukuran padding pada sisi bawah
    • padding-left buat tentukan ukuran padding pada sisi kiri

    Contoh penggunaan:

    1
    2
    3
    4
    5
    6
    7
    8
    header {
      padding: 1em;
    }

    footer {
      padding-top: 1em;
      padding-bottom: 1em;
    }

    Pada contoh ini, kita mengatur ukuran padding dari elemen header dan footer. Padding untuk semua sisi elemen

    adalah 1em dan di element footer kita cuma set padding atas dan bawah saja sebesar 1em.

  3. Area Border
    Area border merupakan area tepi dari elemen. Area ini akan berisi garis yang akan jadi pembatas dengan elemen lainnya.

    Adapun properti CSS yang bisa kita pakai untuk area ini adalah:

    • border buat ngasi garis pembatas di semua sisi;
    • border-top buat ngasi garis di sisi atas;
    • border-bottom buat ngasi garis di sisi bawah;
    • border-right buat ngasi garis di sisi kanan;
    • border-left buat ngasi garis di sisi kiri;
    • border-radius buat ngasi lengkungan pada pojok.

    Properti-properti ini sudah kita pelajari di tutorial sebelumnya:

  4. Area Margin
    Area margin adalah area untuk memberikan jarak antar elemen.

    Area margin bisa kita tentukan ukurannya dengan properti berikut:

    • margin untuk menentukan ukuran margin di semua sisi;
    • margin-top untuk menentukan ukuran margin di sisi atas;
    • margin-bottom untuk menentukan ukuran margin di sisi bawah;
    • margin-rightuntuk menentukan ukuran margin di sisi kanan;
    • margin-leftuntuk menentukan ukuran margin di sisi kiri.

    Contoh penggunaan:

    1
    2
    3
    4
    5
    6
    7
    article {
      margin-top: 16px;
    }

    .ads {
      margin: 1em;
    }

    Pada contoh ini, kita menentukan margin atas untuk elemen

    sebesar 16px dan margin element dengan class .ads adalah 1em.

    Nah, sekarang kita sudah memahami konsep box model di CSS.

    Jadi intinya:

    Box model ini adalah model yang dipakai di CSS untuk mengatur elemen HTML, seperti ukuran panjang dan lebar, garis, jarak antar elemen (margin), jarak konten dengan garis (padding).

    Berikutnya kita akan pelajari bagaimana elemen ditampilkan dengan display.

Display block dan inline

Pada CSS, ada yang namanya atribut display. Atribut ini akan mengatur bagaimana elemen ditampilkan. Biasanya ada dua nilai yang umum kita berikan:

  • inline dan
  • block.

Selain dua nilai ini. masih ada nilai lagi seperti flex dan grid. Ini nanti akan kita pelajari untuk membuat layout. Untuk sekarang, kita pelajari inline dan block dulu.

Display block adalah mode display untuk membuat elemen ditampilkan dalam satu baris. Sedangkan inline adalah mode display yang akan menampilkan elemen di dalam baris.

Saat kita menggunakan display inline, kita tidak akan bisa mengatur ukuran width dan height dari element. Ukuran width dan height hanya bisa diatur jika elemen ditampilkan secara block.

Contoh:

1
2
3
4
5
6
7
img {
  display: inline;
}

button {
  display: block;
}

Lalu. bagaimana caranya saat saya ingin menggunakan width dan height tetapi elemennya harus inline? misalnya seperti sekumpulan tombol yang berjejer dalam satu baris.

Caranya bisa pakai inline-block, mode display ini merupakan gabungan dari inline dan block. Elemen akan ditampilkan secara inline dan juga akan bisa menggunakan properti width dan height.

Contoh:

1
2
3
button {
  display: inline-block;
}

Latihan Box Model

Buatlah file HTML baru dengan nama latihan-box-model.html kemudian isi dengan kode berikut.

Note: ada baiknya kode ini diketik sendiri, bukan di-copas biar kamu makin lancar coding CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Box Model</title>

  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      background-color: snow;
    }

    header {
      margin-bottom: 2em;
      text-align: center;
    }

    .button-cta {
      display: block;
      margin-bottom: 1em;
      padding: 0.5em 1em;
      border-radius: 0.5em;
      border: 1px solid navy;
      background-color: royalblue;
      color: white;
    }

    article {
      border: 1px solid silver;
      border-radius: 0.8em;
      padding: 1em;
      margin-bottom: 1em;
      background-color: white;
    }

    .action-buttons {
      margin-top: 1.5em;
    }

    .action-buttons button {
      display: inline;
      margin-right: 1em;
      padding: 0.5em 1em;
      border-radius: 0.8em;
      border: 1px solid silver;
    }

    footer {
      font-size: small;
      margin-top: 6em;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <header>
    <h1>Simple Blog</h1>
    <p>Simple blog page</p>

    <div>
      <button class="button-cta">Login</button>
      <button class="button-cta">Register</button>
    </div>
  </header>

  <article>
    <p>Box model adalah model yang dipakai untuk menampilkan elemen HTML di browser. Model ini akan memudahkan kita mengatur ukuran, posisi, dan properti lainnya.</p>
    
    <div class="action-buttons">
      <button>👍 Like</button>
      <button>🗨️ Comment</button>
      <button>🔗 Share</button>
    </div>
  </article>

  <article>
    <p>Dengan memahami box model, kita akan mudah mengatur space pada elemen. Ini berguna dalam membuat layout supaya terlihat lebih rapi dan estetik.</p>
    
    <div class="action-buttons">
      <button>👍   Like</button>
      <button>🗨️ Comment</button>
      <button>🔗 Share</button>
    </div>
  </article>

  <footer>
    Copyright &copy; Petani Kode
  </footer>

</body>
</html>

Setelah itu, buka di browser. Maka hasilnya:

Pada latihan ini, kita sudah membuat beberapa elemen. Lalu di dalam CSS-nya kita menerapkan styling untuk box model dari tiap elemen, seperti memberikan padding dan margin.

Coba perhatikan di Inspect Element, di sana akan ada visualisasi Box Model dari tiap elemen.

Dengan visualisasi ini kita bisa tahu berapa ukuran padding, margin, dan border dari elemen.

Berikutnya coba eksperimen ubah display elemen button Register dan Login menjadi inline atau inline-block.

Silakan ubah kode CSS pada clas .button-cta menjadi seperti ini:

1
2
3
4
5
6
7
8
9
.button-cta {
  display: inline;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  border: 1px solid navy;
  background-color: royalblue;
  color: white;
}

Jika kita mengubah style dari Inspect Element, maka perubahan ini bersifat sementara. Saat halaman di-refresh, maka akan hilang. Inspect element berguna buat coba-coba, kalau nanti hasilnya bagus.. baru kita copy kode CSS-nya ke dalam kode kita.

Apa Selanjutnya? Oke, sejauh ini kita sudah belajar tentang Box Model di CSS. Semoga kamu bisa memahaminya.

Intinya yang perlu diingat:

Semua elemen itu bentuknya Box, dan di sana kita bisa terapkan properti CSS untuk Box seperti margin, padding,width, height, border, display dan sebagainya.

Cara Membuat Effek Bayangan dengan CSS

Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow.

Bayangan untuk elemen dan teks dengan css, Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks.

Membuat Bayangan untuk Teks

Langsung saja ke contoh, silakan buat style seperti ini.

1
2
3
4
h2 {
    text-shadow: 3px 2px 1px grey;
    font-size: 40px;
}

kemudian HTML-nya:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h2>Bayanganmu!</h2>
</body>
</html>

Teksnya jadi memiliki bayangan.

Membuat Bayangan untuk Box

Selanjutnya kita coba membuat bayangan untuk kotak atau kontainer.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.kotak {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    padding: 10px;
    border: 1px dashed grey;
}
```css
bayangan.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <div class="kotak">Tiap malam, aku selalu melihat bayangan hitam</div>

</body>
</html>

Bagaimana, mudah bukan membuat bayangan?

Properti bayangan memiliki empat nilai yang harus diberikan:

  • box-shadow: x y z warna;
  • nilai x untuk menentukan arah horizontal
  • nilai y untuk menentukan arah vertikal
  • nilai z untuk menentukan keburaman (blur) bayangan
  • nilai warna, bisa menggunakan rgb(), rgba(), kode warna, nama warna, dsb. (baca juga: 6 nilai warna yang valid dalam css)

Jika nilai x dan y diberikan nilai negatif, maka bayangannya akan mengarah ke atas. Sementara itu, nilai z tidak boleh negatif.

Contohnya:

1
2
3
4
5
.kotak {
    box-shadow: -3px -3px 2px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px dashed grey;
}

Bayangan Masuk ke Dalam

Jika ingin membuat bayangan masuk ke dalam kotak, maka kita perlu menambahkan kata kunci inset.

contoh:

1
2
3
4
5
.kotak {
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px solid grey;
}

Nah itulah cara membuat efek bayangan dengan CSS. Selamat mencoba dan selamat berkreasi.