Tutorial CSS: Cara Membuat Garis di CSS
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
Langsung saja kita bahas…
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
Contoh:
header {
border: 5px solid black;
}Maka hasilnya:
Elemen (<header>) yang kita seleksi akan diberikan garis dengan ketebalan 5px dan warna biru.
Mudah bukan?
Sekarang mari kita coba latihan!
Latihan: Membuat Garis dengan CSS
Buat lah file baru dengan nama latihan-border.html, kemudian isi dengan kode berikut.
<!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>
© 2022 Petani Kode
</footer>
</body>
</html>Setelah itu, simpan dan cobalah buka di browser.
Maka hasilnya:
Elemen header, article, dan footer sekarang punya garis.
Memberikan Garis pada sisi Tertentu
Kita bisa memberikan garis pada sisi tertentu dengan atribut berikut.
border-topuntuk garis di sisi atas elemen;border-bottomuntuk garis di sisi bawah elemen;border-leftuntuk garis di sisi kiri;border-rightuntuk garis di sisi kanan.
Contoh:
Saya ingin memberikan garis di bawah sisi elemen <h1>, maka kode CSS-nya akan seperti ini:
h1 {
border-bottom: 2px solid gray;
}Selain menggunakan atribut-atribut di atas, kita bisa juga buat sekaligus dengan atribut border dengan format seperti ini:
border: top left bottom right;Contoh:
h1 {
border: 0 0 2px 0;
}Pada contoh ini, kita memberi garis pada sisi bawah elemen <h1>.
Gampang kan?
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:
<!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 © Petani Kode<p>
</footer>
</body>
</html>Setelah itu, simpan dan cobalah buka di browser.
Maka hasilnya:
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:
solidgaris biasadottedgaris dengan titik putus-putusdashedgaris putus-putus dengan dashdoublegaris doublenonetanpa garishiddengaris tersembunyi
Ini contoh tampilan style-nya:
Contoh cara penggunaan:
h1 {
border-style: dashed;
}Kita juga bisa memberikan jenis garis langsung paa properti border seperti ini:
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:
<!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 © Petani Kode</p>
</footer>
</body>
</html>Simpan dan coba buka di Browser.
Maka hasilnya:
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.
Kita bisa memberikan nilai border-radius dengan satuan px, %, em, dll.
Contoh:
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:
<!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 © Petani Kode</p>
</footer>
</body>
</html>Simpan dan coba buka di Browser.
Maka hasilnya:
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-sourceuntuk menentukan source image yang akan dijadikan garis;border-image-sliceuntuk menentukan gimana slicing gambar;border-image-widthuntuk menentukan lebar gambar;border-image-outsetuntuk menentukan jarak antara border box ke luar;border-image-repeatuntuk 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 canius.
Oke..
Sekarang mari kita coba latihan menggunakan border-image.
Buatlah file baru dengan nama latihan-border-image.html kemudian isi dengan kode berikut:
<!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 berikut:
- Download 📥 border.svg
Kemudian taruh di dalam satu folder dengan file HTML-nya.
Sekarang coba kembali latihan-border-image.html di browser.
Maka hasilnya:
Mantap 👍
No comments:
Post a Comment