Bayangan Kotak

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 42 dari 76.

Dalam CSS, property box-shadow digunakan untuk menambahkan efek bayangan pada kotak sebuah elemen. Property ini memungkinkan kamu membuat efek visual yang menarik, sehingga elemen tampak "menonjol" dari halaman atau menciptakan kedalaman dan dimensi.

Berikut sintaks dasar untuk menggunakan property box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Jarak horizontal bayangan dari elemen. Nilai positif menggeser bayangan ke kanan, sedangkan nilai negatif menggesernya ke kiri.

vertical-offset: Jarak vertikal bayangan dari elemen. Nilai positif menggeser bayangan ke bawah, sedangkan nilai negatif menggesernya ke atas.

blur (opsional): Radius blur bayangan. Nilai yang lebih besar menghasilkan bayangan yang lebih buram. Jika tidak dicantumkan, nilai default-nya adalah 0 (tanpa blur).

spread (opsional): Radius penyebaran bayangan. Nilai positif membuat bayangan melebar, sedangkan nilai negatif membuatnya menyusut.

color (opsional): Warna bayangan. Kamu dapat menentukannya menggunakan nama warna, nilai heksadesimal, nilai RGB, atau nilai HSL.
inset (opsional): Mengubah bayangan luar (outset) menjadi bayangan dalam.

Contohnya:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Dalam contoh ini, semua elemen <div> memiliki bayangan kotak dengan offset horizontal 5px, offset vertikal 5px, radius blur 10px, dan warna abu-abu. Elemen dengan class button memiliki bayangan kotak dengan offset horizontal 2px, offset vertikal 2px, radius blur 5px, radius sebaran 2px, dan warna hitam semi-transparan (rgba(0, 0, 0, 0.5)).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah elemen pembagian (<div>) dan sebuah paragraf (<p>). Tugasmu adalah menggunakan properti box-shadow untuk menambahkan efek bayangan pada elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div>. Atur box-shadow menjadi 10px 10px 5px gray.
Tulis aturan CSS yang menargetkan elemen <p>. Atur box-shadow menjadi -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Coba sendiri

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>