bellshade · mergify · Feb 10, 2023 · Jan 1, 2023 · Jan 2, 2023 · Jan 2, 2023
@@ -0,0 +1,91 @@
+# CSS List
+
+Pada CSS, List adalah sebuah elemen yang digunakan untuk membuat daftar item yang tersusun. List biasa digunakan untuk menampilkan daftar barang semacam _to-do list_.
+
+Untuk membuat List di HTML, kamu bisa menggunakan elemen seperti `ul` atau `ol` sebagai wadahnya dan untuk membuat item-item yang didaftar kamu bisa menggunakan elemen `li`.
+
+```html
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Coca Cola</li>
+</ul>
+```
+
+## Perbedaan `ul` dan `ol`
+
+Ada perbedaan antara elemen `ul` dan `ol`, Elemen `ul` digunakan untuk membuat daftar bullet, sedangkan elemen `ol` digunakan untuk membuat daftar numerik atau tiap-tiap item diwakili dengan angka secara berurutan.
+
+Daftar bullet:
+
+![list bullet](list-bullet.png)
+
+Daftar numerik:
+
+![list bullet](list-numerik.png)
+
+Ada beberapa properti yang bisa kamu gunakan untuk men-style list.
+
+## list-style-type
+
+Properti `list-style-type` untuk mengatur tanda pada daftar.
+
+Contoh:
+
+```css
+ul {
+  list-style-type: japanese-formal;
+}
+```
+
+Seperti yang kamu lihat, list bisa diiubah dengan tulisan angka jepang. Kamu juga bisa memberikan value lain seperti `ethiopic-numeric` dan `square`.
+
+Hasil:
+![list-type](list-type.png)
+
+## list-image
+
+Kamu juga dapat meng-custom tanda dengan gambar menggunakan properti `list-image`.
+
+Contoh:
+
+```css
+ul {
+  list-style-image: url("icons8-beef-burger-24.png");
+}
+```
+
+Hasil:
+![list-image](list-image.png)
+
+## list-position
+
+Porperti `list-position` untuk mengatur posisi tanda list dan hanya memiliki dua value yaitu `inside` dan `outside`.
+
+Contoh:
+
+```css
+ul {
+  list-style-position: inside;
+}
+```
+
+Hasil:
+![list-position](list-position.png)
+
+Jika diperhatikan lebih dalam melalui _inspect_ di browser, kamu akan menemukan bahwa tanda `list` berada dalam sebuah content yang mana secara default tanda `list` seharusnya berada di luar content. Jika kamu ingin memberikan nilai `outside` sebaiknya tidak perlu ditulis karena tanpa di tulis pun tanda list memang posisinya `outside` atau di luar content.
+
+Dari semua properti di atas bisa ditulis sekaligus dalam properti `list-style`.
+
+```css
+list-style: georgian inside url("icons8-beef-burger-24.png");
+```
+
+```css
+list-style: square inside url("sqpurple.gif");
+```
+
+### Referensi:
+
+- https://www.w3schools.com/css/css_list.asp
+- https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
@@ -0,0 +1,68 @@
+<!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>Document</title>
+    <style>
+      .list-type {
+        /* list-style-type: disc; */
+        /* list-style-type: circle; */
+        /* list-style-type: square; */
+        /* list-style-type: decimal; */
+        /* list-style-type: georgian; */
+        /* list-style-type: trad-chinese-informal; */
+        list-style-type: japanese-formal;
+        /* list-style-type: ethiopic-numeric; */
+        /* list-style-type: kannada; */
+        /* list-style-type: "\1F44D"; */
+
+        /* value */
+        /* list-style-type: "A"; */
+      }
+
+      .list-image {
+        list-style-image: url("icons8-beef-burger-24.png");
+      }
+
+      .list-position {
+        list-style-position: inside;
+        /* list-style-position: outside; */
+      }
+    </style>
+  </head>
+  <body>
+    <h2>List</h2>
+
+    <!-- contoh list bullet -->
+    <ul class="list-bullet">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+
+    <!-- contoh list numerik -->
+    <ol class="list-numerik">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ol>
+
+    <ul class="list-type">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+    <ul class="list-image">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+    <ul class="list-position">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Coca Cola</li>
+    </ul>
+  </body>
+</html>
@@ -0,0 +1,71 @@
+# CSS Border Image
+
+## Apa itu CSS Border Image?
+
+CSS Border Image merupakan fitur yang hanya didukung pada browser yang support CSS3, yang memungkinkan untuk menggunakan gambar sebagai border pada elemen HTML.
+
+contoh:
+
+```css
+.example {
+  border-image: url(./border.png) 30 30 round;
+}
+```
+
+![contoh border image](contoh.png)
+
+Mari kita bedah apa saja nilai yang terdapat pada `border-image`:
+
+- `url(./border.png)` : adalah gambar yang akan digunakan sebagai border
+
+```css
+border-image-source: url(./border.png);
+```
+
+- `30 30` : value yang menentukan berapa banyak gambar yang ditentukan oleh `border-image-source`.
+
+```css
+border-image-slice: 30 30;
+```
+
+- `round` : yang menentukan bahwa gambar diulang secara round
+
+```css
+border-image-repeat: round;
+```
+
+```css
+.example {
+  /* source | slice | repeat */
+  border-image: url(./border.png) 30 30 round;
+}
+```
+
+> perlu diingat sebelum membuat `border-image` sebaiknya tentukan dulu `border-style` (solid, dotted, dll),karena jika tidak maka `border-image` akan gagal dimuat.
+
+## Properti border image
+
+- `border-image-source` : properti untuk memuat gambar yang akan dijadikan sebagai border sebagaimana terlihat pada contoh sebelumnya.
+- `border-image-slice` : menentukan berapa banyak potongan gambar yang ditampilakan dari `border-image-source`.
+- `border-image-repeat`: Properti ini menentukan bagaimana gambar pada tiap sisi _(side)_ dan bagian tengah disusun.
+
+```css
+border-image-repeat: stretch|repeat|round|space;
+```
+
+- `border-image-width` : properti menentukan lebar _(width)_ pada border.
+
+```css
+border-image-width: 10px;
+```
+
+- `border-image-outset` : properti menentukan jumlah area border yang melampaui border box.
+
+```css
+border-image-outset: 50px;
+```
+
+### Referensi:
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#constituent_properties
+- https://www.w3schools.com/cssref/css3_pr_border-image.php
@@ -0,0 +1,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>Bellshade | CSS Border Image</title>
+    <style>
+      .card {
+        margin: 20px auto;
+        padding: 10px;
+        display: grid;
+        width: 140px;
+        height: 140px;
+        place-items: center;
+        border: 10px solid orange;
+        border-image: url(./border.png) 30 30 round;
+        /* border-image: url(./border.png) 27 23 / 50px 30px / 1rem round; */
+
+        /* border-image-source: url(./border.png); */
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h2>Bellshade</h2>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+# CSS Object Position
+
+## Apa itu CSS Object Position?
+
+`Object position` merupakan properti CSS yang menentukan posisi objek yang berada di dalam element (misal: `<img>` atau `<video>` ). kamu bisa menggunakan properti ini bersamaan `object-fit` untuk mengatur objek tersebut.
+
+Contohnya jika `object-position:20% 80%`, maka objek akan ditetapkan memilki jarak 20% dari sisi kiri (left) dan 80% dari bagian atas (top) element. contoh lain, `object-position: 50% 50%`, objek akan ditempatkan tepat di tengah element.
+
+```css
+img {
+  width: 500px;
+  height: 500px;
+  border: 2px solid blue;
+  object-fit: none;
+  object-position: 20% 80%;
+}
+```
+
+![hasil](contoh-1.png)
+
+Pada penulisan diatas object akan ditetapkan 20% dari sisi kiri dan 80% dari bagian atas element.
+
+## Syntax
+
+Beberapa contoh penerapan yang bisa kamu ikuti:
+
+**Positional values**
+
+```css
+object-position: 50% 50%; /* default position */
+object-position: right top;
+object-position: 20px 95px;
+object-position: center 20px; /* mix and match */
+```
+
+![hasil](contoh-lain.png)
+
+**Global values**
+
+```css
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+```
+
+Mungkin sampai disini dulu pembahasan kali ini, referensi yang bisa kamu gunakan untuk belajar lebih lanjut:
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
+- https://www.w3schools.com/cssref/css3_pr_object-position.php
+- https://css-tricks.com/almanac/properties/o/object-position/