From 68adecb62bd9f888c02cd5ddf3e158fe9dcde789 Mon Sep 17 00:00:00 2001 From: MZYXn Date: Sat, 27 Nov 2021 11:23:06 +0700 Subject: [PATCH 1/3] add: menambahkan materi CSS baru 008 CSS Borders --- CSS/008 CSS Borders/README.md | 84 +++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 CSS/008 CSS Borders/README.md diff --git a/CSS/008 CSS Borders/README.md b/CSS/008 CSS Borders/README.md new file mode 100644 index 00000000..0696c3ad --- /dev/null +++ b/CSS/008 CSS Borders/README.md @@ -0,0 +1,84 @@ +## CSS Border + +## Apa itu CSS border? + +Property css border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan. + +## Nilai-nilai dalam CSS Border ini + +`border-width:` mengatur ketebalan border. + +- Nilai numeric seperti unit px, rem, em, vw dan vh. +- `thin` nilai setara dengan 1px. +- `medium` nilai setara dengan 3px. +- `thick` nilai setara dengan 5px. + +Contoh: + +```css + #border { + border-width: thin / medium / thick / (px/rem/em/vw/vh); + } +``` + +`border-style:` mengatur bagaimana garis border digambar disekitar elemen. + +- `none` tidak ada garis border yang akan digambar dan ditunjukan. +- `solid` garis yang terus menerus atau solid. +- `hidden` garis border digambar, namun tidak diperlihatkan seperti transparan, bisa berguna untuk menambahkan jarak tambahan antar elemen namun lebih baik untuk menggunakan `CSS Margin`. +- `dashed` garis border akan digambarkan saling hubung menghubung - - - - - +- `dotted` garis border akan digambarkan sebagai titik-titik ◦◦◦◦ +- `double` garis border akan digambarkan dua kali sekaligus. +- `groove` menambahkan efek seperti elemen ditekan terhadap dokumen. +- `ridge` sama seperti property `groove`, namun membuat efek seperti elemen dimunculkan terhadap dokumen. +- `inset` memberikan efek garis border yang disetiap setengah bagian elemen mempunyai tone warna yang berbeda. +- `outset` sama seperti property `inset`, namun sifatnya diterbalikan. + +```css + #border { + border-style: none / solid / hidden / dashed / dotted / double / groove / ridge / inset / outset; + } +``` + +`color` mengatur warna dari garis border yang sudah/akan ditetapkan yang menerima nilai warna `(rgb/rgba/hsl/hsla/nilai hex)`. + +## Cara penggunaan style border + +Berikut ini adalah cara penggunaan style border yang efektif. + +```css + #border { + border: border-width / border-style / color; + } +``` + +## Properti unik untuk memberikan efek border kepada elemen + +`border-collapse:` property memberikan jarak terhadapborder dalam sebuah elemen. + +- `collapse` +- `separate` + +```css + #border { + border-collapse: collapse / separate; + } +``` + +`border-image:` property ini memberikan efek garis border gambar. + +Contoh penggunaan: + +```css + #border { + border-image: url(direktori gambar kamu); + } +``` + +`border-radius:` property ini memberikan efek sudut elemen menjadi lebih melingkar. + +```css + #border { + border-radius: 0%-100% / (px, rem, em, vw, vw); + } +``` From ee61ad7122629acdd0658c85f8bd145c2385b9d5 Mon Sep 17 00:00:00 2001 From: MZYXn Date: Sun, 28 Nov 2021 11:02:24 +0700 Subject: [PATCH 2/3] add: menambah penjelasan border sides --- CSS/008 CSS Borders/README.md | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/CSS/008 CSS Borders/README.md b/CSS/008 CSS Borders/README.md index 0696c3ad..c7b38589 100644 --- a/CSS/008 CSS Borders/README.md +++ b/CSS/008 CSS Borders/README.md @@ -2,7 +2,7 @@ ## Apa itu CSS border? -Property css border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan. +Property CSS border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan property ini. ## Nilai-nilai dalam CSS Border ini @@ -21,7 +21,7 @@ Contoh: } ``` -`border-style:` mengatur bagaimana garis border digambar disekitar elemen. +`border-style:` mengatur bagaimana bentuk garis border digambar disekitar elemen. - `none` tidak ada garis border yang akan digambar dan ditunjukan. - `solid` garis yang terus menerus atau solid. @@ -52,12 +52,31 @@ Berikut ini adalah cara penggunaan style border yang efektif. } ``` -## Properti unik untuk memberikan efek border kepada elemen +## Border sides -`border-collapse:` property memberikan jarak terhadapborder dalam sebuah elemen. +Di CSS ada juga property yang bisa kita gunakan untuk mengatur style border pada setiap sisi elemen kita. -- `collapse` -- `separate` +- `border-top:` untuk mengatur style border bagian atas +- `border-bottom:` untuk mengatur style border bagian bawah +- `border-left:` untuk mengatur style border sebelah kiri +- `border-right:` untuk mengatur style border bagian kanan + +Untuk cara penggunaan masih sama seperti sebelumnya yaitu + +```css + #border { + border-top: border-width / border-style / color; + border-bottom: border-width / border-style / color; + border-left: border-width / border-style / color; + border-right: border-width / border-style / color; + } +``` +## Property unik untuk memberikan efek border kepada elemen + +`border-collapse:` property menentukan apakah border dalam setiap sel yang ada pada `` akan digabung atau dipisah pada setiap selnya. + +- `:collapse` +- `:separate` ```css #border { @@ -65,7 +84,7 @@ Berikut ini adalah cara penggunaan style border yang efektif. } ``` -`border-image:` property ini memberikan efek garis border gambar. +`border-image:` selain memberikan warna kepada garis border, ada juga property yang bisa digunakan untuk membuat border menjadi bergambar. Contoh penggunaan: @@ -75,7 +94,7 @@ Contoh penggunaan: } ``` -`border-radius:` property ini memberikan efek sudut elemen menjadi lebih melingkar. +`border-radius:` property ini memberikan efek pada setiap sudut elemen menjadi lebih melingkar. ```css #border { From 973ef844d43d97b693420283f2a2f76e095b378a Mon Sep 17 00:00:00 2001 From: MZYXn Date: Mon, 29 Nov 2021 08:41:33 +0700 Subject: [PATCH 3/3] fix: memperbaiki sekaligus menambah beberapa kata --- CSS/008 CSS Borders/README.md | 40 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/CSS/008 CSS Borders/README.md b/CSS/008 CSS Borders/README.md index c7b38589..0b3d8362 100644 --- a/CSS/008 CSS Borders/README.md +++ b/CSS/008 CSS Borders/README.md @@ -2,7 +2,7 @@ ## Apa itu CSS border? -Property CSS border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan property ini. +Properti CSS border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan properti ini. ## Nilai-nilai dalam CSS Border ini @@ -23,16 +23,16 @@ Contoh: `border-style:` mengatur bagaimana bentuk garis border digambar disekitar elemen. -- `none` tidak ada garis border yang akan digambar dan ditunjukan. -- `solid` garis yang terus menerus atau solid. -- `hidden` garis border digambar, namun tidak diperlihatkan seperti transparan, bisa berguna untuk menambahkan jarak tambahan antar elemen namun lebih baik untuk menggunakan `CSS Margin`. -- `dashed` garis border akan digambarkan saling hubung menghubung - - - - - -- `dotted` garis border akan digambarkan sebagai titik-titik ◦◦◦◦ -- `double` garis border akan digambarkan dua kali sekaligus. -- `groove` menambahkan efek seperti elemen ditekan terhadap dokumen. -- `ridge` sama seperti property `groove`, namun membuat efek seperti elemen dimunculkan terhadap dokumen. -- `inset` memberikan efek garis border yang disetiap setengah bagian elemen mempunyai tone warna yang berbeda. -- `outset` sama seperti property `inset`, namun sifatnya diterbalikan. +- `none` - untuk menghilangkan garis border agar tidak terlihat sekaligus tidak memengaruhi posisi elemen lainnya. +- `solid` - untuk membuat border dengan garis solid. +- `hidden` - untuk membuat garis border yang sudah digambar tersembunyi, namun bisa memengaruhi posisi elemen lain. +- `dashed` - untuk membuat border dengan garis yang saling hubung-menghubung. +- `dotted` - untuk membuat border dengan garis titik-titik. +- `double` - untuk membuat garis border akan digambarkan dua kali sekaligus. +- `groove` - menambahkan efek seperti elemen ditekan terhadap dokumen, efek ini hanya bisa terjadi bila ada warna yang diterapkan pada border. +- `ridge` - sama seperti properti `groove`, namun membuat efek seperti elemen dimunculkan terhadap dokumen, efek ini hanya bisa terjadi bila ada warna yang diterapkan pada border. +- `inset` - memberikan efek garis border yang disetiap setengah bagian elemen mempunyai tone warna yang berbeda. +- `outset` - sama seperti properti `inset`, namun sifatnya diterbalikan. ```css #border { @@ -44,7 +44,7 @@ Contoh: ## Cara penggunaan style border -Berikut ini adalah cara penggunaan style border yang efektif. +Berikut ini adalah cara penggunaan style border yang efektif: ```css #border { @@ -54,14 +54,14 @@ Berikut ini adalah cara penggunaan style border yang efektif. ## Border sides -Di CSS ada juga property yang bisa kita gunakan untuk mengatur style border pada setiap sisi elemen kita. +Di CSS ada juga properti yang bisa kita gunakan untuk mengatur style border pada setiap sisi elemen kita. - `border-top:` untuk mengatur style border bagian atas - `border-bottom:` untuk mengatur style border bagian bawah - `border-left:` untuk mengatur style border sebelah kiri - `border-right:` untuk mengatur style border bagian kanan -Untuk cara penggunaan masih sama seperti sebelumnya yaitu +Untuk cara penggunaan masih sama seperti sebelumnya yaitu: ```css #border { @@ -71,12 +71,12 @@ Untuk cara penggunaan masih sama seperti sebelumnya yaitu border-right: border-width / border-style / color; } ``` -## Property unik untuk memberikan efek border kepada elemen +## Properti unik untuk memberikan efek border kepada elemen -`border-collapse:` property menentukan apakah border dalam setiap sel yang ada pada `` akan digabung atau dipisah pada setiap selnya. +`border-collapse:` properti menentukan apakah border dalam setiap sel yang ada pada `` akan digabung atau dipisah pada setiap selnya. -- `:collapse` -- `:separate` +- `collapse` +- `separate` ```css #border { @@ -84,7 +84,7 @@ Untuk cara penggunaan masih sama seperti sebelumnya yaitu } ``` -`border-image:` selain memberikan warna kepada garis border, ada juga property yang bisa digunakan untuk membuat border menjadi bergambar. +`border-image:` selain memberikan warna kepada garis border, ada juga properti yang bisa digunakan untuk membuat border menjadi bergambar. Contoh penggunaan: @@ -94,7 +94,7 @@ Contoh penggunaan: } ``` -`border-radius:` property ini memberikan efek pada setiap sudut elemen menjadi lebih melingkar. +`border-radius:` properti ini memberikan efek pada setiap sudut elemen menjadi lebih melingkar. ```css #border {