Properti CSS yang terkait dengan dekorasi model kotak

Articles

Artikel ini menjelaskan properti CSS yang terkait dengan dekorasi model kotak.

Anda dapat belajar cara menulis properti seperti border dan bayangan.

YouTube Video

HTML untuk Pratinjau

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Dekorasi

Properti `border`

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

Properti border digunakan dalam CSS untuk mengatur bingkai sebuah elemen. border terdiri dari tiga elemen: lebar, gaya, dan warna, yang digabungkan untuk mengatur bingkai elemen tersebut.

Struktur Dasar dari `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Gunakan border-width untuk menentukan ketebalan border. Satuan ditentukan dalam px, em, %, dan sebagainya.
Tentukan jenis border dengan border-style. Anda dapat menentukan nilai berikut.
- Nilai Gaya:
  - none (tidak ada border)
  - solid (garis solid)
  - dotted (garis titik-titik)
  - dashed (garis putus-putus)
  - double (garis ganda)
  - groove (garis berpola alur)
  - ridge (garis berpola tonjolan)
  - inset (garis bayangan masuk)
  - outset (garis bayangan keluar)

Tentukan warna border dengan border-color. Warna dapat ditentukan menggunakan nama warna, rgb(), rgba(), hex, dan sebagainya.

Pengaturan Individu untuk Setiap Sisi

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Anda juga dapat mengatur gaya yang berbeda untuk setiap sisi seperti ini.

Pengaturan Individu untuk Lebar, Gaya, dan Warna

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Anda juga dapat menentukan setiap aspek secara terpisah menggunakan border-width, border-style, dan border-color.

Menggabungkan dengan `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Dengan menggunakan properti border-radius, Anda dapat membulatkan sudut perbatasan.

Properti `border-radius`

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

Properti border-radius digunakan untuk membulatkan sudut elemen. Anda dapat melengkungkan empat sudut elemen HTML dengan halus, mengubah persegi panjang atau persegi menjadi desain yang membulat.

Penjelasan:

Kelas border-radius-all-rounded membuat semua sudut membulat dengan 20 piksel, menghasilkan kotak yang membulat halus.
Kelas border-radius-top-left-rounded hanya membulatkan sudut kiri atas dengan 20 piksel, sementara sudut lainnya tetap siku-siku.
Kelas border-radius-ellipse-corners menciptakan sudut elips, menghasilkan kotak dengan bentuk membulat yang memanjang secara horizontal.

Format dari properti `border-radius`

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

Nilai properti border-radius biasanya ditentukan dalam piksel atau persen. Selain itu, Anda dapat mengatur dari 1 hingga 4 nilai.
- Menentukan satu nilai membuat semua sudut membulat secara seragam.
- Menentukan dua nilai akan menerapkan nilai pertama pada sudut kiri atas dan kanan bawah, serta nilai kedua pada sudut kanan atas dan kiri bawah.
- Dengan menentukan empat nilai, Anda dapat mengatur radius yang berbeda untuk setiap sudut. Nilai diterapkan searah jarum jam dari sudut kiri atas.
Anda juga dapat menentukan secara individu seperti border-top-left-radius.

1border-radius: 50px / 25px;

Properti border-radius juga dapat menentukan radius vertikal dan horizontal secara individu untuk membuat sudut elips. Dalam kasus ini, pisahkan dengan /.
- Sebagai contoh, menentukan 50px / 25px menghasilkan radius horizontal 50 piksel dan radius vertikal 25 piksel.

Ringkasan

border-radius adalah properti untuk membulatkan sudut elemen.
Anda dapat menentukan kebulatan sudut dalam piksel atau persentase, menerapkannya pada semua sudut, sudut tertentu, atau menjadikannya elips.
Ini berguna untuk desain yang fleksibel dan menyesuaikan antarmuka pengguna.

Properti `outline`

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

Properti outline adalah properti CSS untuk mengatur garis yang digambar di sekitar elemen.

outline mirip dengan border, tetapi memiliki perbedaan pada beberapa titik berikut:.

outline tidak memengaruhi model kotak (box model) dari elemen, sehingga tidak memengaruhi tata letak elemen.
Karena outline digambar di luar elemen, maka muncul di luar border.
border digambar di dalam elemen, sehingga dapat memengaruhi ukuran dan tata letak elemen.

Dalam contoh ini, properti outline diatur sebagai berikut:.

Kelas outline-solid mengatur outline merah solid dengan ketebalan 2px.
Kelas outline-dashed mengatur outline biru putus-putus dengan ketebalan 3px.
Kelas outline-double mengatur outline hijau bergaris ganda dengan ketebalan 4px.
Kelas outline-offset mengatur jarak 10px antara outline dan elemen.

Sintaks Dasar

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width menentukan ketebalan outline.
Anda dapat menentukan nilai tertentu seperti thin, medium, thick, atau dalam satuan seperti px, em.

`outline-style`

outline-style menentukan gaya outline.
Anda dapat menentukan gaya seperti solid, dotted, dashed, double, groove, ridge, inset, outset, none, dll.

`outline-color`

outline-color menentukan warna outline.
Anda dapat menentukan warna apa saja menggunakan nama, HEX, RGB, dll.

`outline-offset`

outline-offset menentukan jarak antara outline dan elemen.
Anda dapat menentukan nilai pasti dalam satuan seperti px, em, dll.

Properti `box-shadow`

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

Properti box-shadow digunakan untuk menambahkan bayangan pada elemen. Dengan menggunakan properti ini, Anda dapat membuat bayangan di sekitar elemen untuk memberikan kesan dimensi dan kedalaman.

Penjelasan:

Dalam kelas box-shadow-basic-shadow, bayangan hitam yang buram ditampilkan di bagian kanan bawah elemen.
Dalam kelas box-shadow-inset-shadow, bayangan buram ditampilkan di dalam elemen. Dengan bayangan yang masuk ke dalam, Anda dapat menciptakan desain yang tampak cekung.
Dalam kelas box-shadow-multiple-shadow, dua bayangan, hitam dan merah, diterapkan pada elemen. Karena ditampilkan di posisi yang berbeda, efek tiga dimensi tercipta.

Format Properti `box-shadow`

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Makna dari setiap nilai

Horizontal offset pertama adalah nilai offset horizontal, yang menentukan posisi bayangan dari sisi kiri elemen. Menentukan nilai positif akan menempatkan bayangan ke kanan, sedangkan nilai negatif akan menempatkannya ke kiri.

Vertical offset kedua adalah nilai offset vertikal, yang menentukan posisi bayangan dari sisi atas elemen. Menentukan nilai positif akan menempatkan bayangan di bawah, sedangkan nilai negatif akan menempatkannya di atas.

Blur radius ketiga adalah nilai untuk jumlah blur, yang menentukan tingkat keburaman bayangan. Semakin besar nilainya, semakin luas bayangan menyebar, menghasilkan bayangan yang lebih buram. Menentukan nilai positif akan menempatkan bayangan di bawah, sedangkan nilai negatif akan menempatkannya di atas. Ini bersifat opsional, dan default-nya adalah 0, yang berarti tidak ada keburaman pada bayangan.

Spread radius keempat adalah nilai rentang penyebaran, yang menentukan seberapa luas bayangan menyebar. Menentukan nilai positif akan membuat bayangan membesar, sementara nilai negatif akan membuatnya menyusut. Nilai ini juga bersifat opsional.

Color kelima adalah nilai warna, yang menentukan warna bayangan. Warna dapat diatur menggunakan nama warna, RGB, HEX, HSL, dan model warna lainnya yang tersedia di CSS. Jika diabaikan, warna teks default elemen (nilai properti color) akan diterapkan.

Anda juga dapat menentukan kata kunci inset terlebih dahulu. Menentukan kata kunci inset akan menggambar bayangan di dalam elemen daripada di luar. Dimungkinkan juga untuk mengatur beberapa bayangan yang dipisahkan oleh koma.

Contoh `box-shadow`

Contoh bayangan dasar

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

Offset horizontal adalah 10px, menciptakan bayangan 10 piksel ke kanan.
Offset vertikal adalah 10px, menciptakan bayangan 10 piksel ke bawah.
Radius blur adalah 5px, menghasilkan bayangan blur dengan radius 5 piksel.
Warna warna adalah rgba(0, 0, 0, 0.5), menghasilkan warna hitam semi transparan.

Contoh bayangan bagian dalam

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Menggunakan inset untuk menggambar bayangan di dalam elemen.

Contoh bayangan ganda

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Anda juga bisa mengatur beberapa bayangan yang dipisahkan dengan koma. Pada contoh ini, dua bayangan diterapkan: bayangan hitam dan bayangan merah.

Ringkasan

box-shadow adalah properti yang digunakan untuk menambahkan bayangan pada elemen untuk menciptakan kesan kedalaman.
Dengan menggabungkan offset horizontal dan vertikal, blur, radius penyebaran, dan warna, berbagai efek dapat dicapai.
Anda dapat menggambar bayangan di dalam dengan inset, dan juga dapat mengatur beberapa bayangan sekaligus.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS Terkait Latar Belakang Properti CSS terkait daftar

Properti CSS yang terkait dengan dekorasi model kotak

YouTube Video

HTML untuk Pratinjau

Dekorasi

Properti border

Struktur Dasar dari border

Pengaturan Individu untuk Setiap Sisi

Pengaturan Individu untuk Lebar, Gaya, dan Warna

Menggabungkan dengan border-radius

Properti border-radius

Penjelasan:

Format dari properti border-radius

Ringkasan

Properti outline

Sintaks Dasar

outline-width

outline-style

outline-color

outline-offset

Properti box-shadow

Penjelasan:

Format Properti box-shadow

Makna dari setiap nilai

Contoh box-shadow

Contoh bayangan dasar

Contoh bayangan bagian dalam

Contoh bayangan ganda

Ringkasan

YouTube Video

Properti `border`

Struktur Dasar dari `border`

Menggabungkan dengan `border-radius`

Properti `border-radius`

Format dari properti `border-radius`

Properti `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Properti `box-shadow`

Format Properti `box-shadow`

Contoh `box-shadow`