Bayangan Kotak CSS: Menambah Kedalaman dan Dimensi ke Elemen Web Anda

Hai teman-teman desainer web yang sedang belajar! Hari ini, kita akan mendalamkan salah satu properti CSS favorit saya: box-shadow. Seperti memberikan kekuatan magis bagi elemen web Anda untuk membentuk bayangan! Mari kita mulai petualangan bayangan ini bersama-sama.

Apa Itu Box Shadow?

Sebelum kita memulai, bayangkan Anda memegang sebuah lembar kertas. Sekarang, angkatnya sedikit dari meja. Lihat area gelap di bawah itu? Itu sebenarnya apa yang dilakukan box-shadow di CSS - mengcreate ilusi bahwa elemen Anda terapung di atas halaman.

Box shadow adalah properti CSS yang memungkinkan Anda menambahkan efek bayangan di sekitar bingkai elemen. Ini adalah cara yang bagus untuk menambah kedalaman, dimensi, dan fokus ke desain web Anda.

Anatomi Box Shadow

Ayo kitaura properti box-shadow. Mungkin terlihat menakutkan pada awalnya, tapi saya berjanji itu lebih ramah daripada anjing golden retriever jika Anda mengenalnya!

Sintaks

box-shadow: h-offset v-offset blur spread color;

Jangan khawatir jika ini terlihat seperti kode yang sulit saat ini. Kita akan telusuri setiap bagian secara rinci.

Nilai yang Mungkin

Berikut adalah tabel nilai yang mungkin untuk box-shadow:

Nilai	Deskripsi	Diperlukan?
h-offset	Offset horizontal bayangan	Ya
v-offset	Offset vertikal bayangan	Ya
blur	Radius模糊	Opsional
spread	Radius penyebaran	Opsional
color	Warna bayangan	Opsional
inset	Membuat bayangan di dalam bingkai	Opsional

Sekarang, mari kita lihat setiap bagian ini secara rinci.

h-offset dan v-offset

Ini menentukan di mana bayangan Anda jatuh. Bayangkan itu seperti menyalakan lampu sorot pada elemen Anda:

• h-offset positif memindahkan bayangan ke kanan
• h-offset negatif memindahkan bayangan ke kiri
• v-offset positif memindahkan bayangan ke bawah
• v-offset negatif memindahkan bayangan ke atas

mari lihat contoh:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px;
}

Ini menciptakan bayangan 10 pixel ke kanan dan 10 pixel ke bawah dari kotak kita.

blur

Nilai blur memperhalus tepi bayangan. Semakin tinggi angkanya, semakin kaburnya. Berikut adalah cara kita menambahkannya:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px;
}

Ini menambahkan blur 5 pixel ke bayangan kita.

spread

Spread menentukan seberapa banyak bayangan diperluas. Nilai positif membuat bayangan lebih besar, sedangkan nilai negatif membuatnya lebih kecil. Mari tambahkan ini ke contoh kita:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px 5px;
}

Ini memperluas bayangan kita sebesar 5 pixel di semua arah.

color

Akhirnya, kita dapat menentukan warna bayangan kita. Jika tidak ditentukan, nilai defaultnya adalah warna saat ini dari elemen. Mari buat bayangan kita merah:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px 5px #e74c3c;
}

Terapkan ke

Box shadow dapat diterapkan ke sebagian besar elemen HTML, tetapi biasanya digunakan pada div, gambar, dan tombol untuk menciptakan kesan kedalaman atau menyorot elemen penting.

Sintaks DOM

Jika Anda bekerja dengan JavaScript, Anda dapat mengubah box-shadow menggunakan DOM. Berikut adalah cara nya:

document.getElementById("myElement").style.boxShadow = "10px 10px 5px 5px #e74c3c";

Ini mengset properti box-shadow elemen dengan ID "myElement".

CSS box-shadow - Nilai 'inset'

Ingat saat saya menyebut nilai opsional 'inset'? Itu saatnya mengungkapkan kekuatan rahasia nya! Kata kunci 'inset' mengubah bayangan dari bayangan luar (outset) menjadi bayangan dalam. Seperti elemen Anda dipotong ke dalam halaman daripada terapung di atasnya.

Berikut adalah cara menggunakannya:

.inset-box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: inset 5px 5px 5px 0px #2980b9;
}

Ini menciptakan bayangan dalam 5 pixel ke kanan dan ke bawah, dengan blur 5 pixel.

Bayangan Ganda

Ada fakta menarik: Anda dapat menerapkan bayangan ganda ke satu elemen! Hanya pisahkan setiap bayangan dengan koma. Misalnya:

.multi-shadow {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow:
5px 5px 10px 0px #2980b9,
-5px -5px 10px 0px #e74c3c,
inset 5px 5px 10px 0px #2ecc71;
}

Ini menciptakan elemen dengan bayangan luar di bagian bawah kanan, bayangan luar di bagian atas kiri, dan bayangan dalam!

Kesimpulan

Dan begitu saja, teman-teman! Anda telah membuka kekuatan box-shadow. Ingat, seperti semua kekuatan super, gunakanlah dengan bijaksana. Bayangan yang halus dapat menambah elegansi ke desain Anda, tetapi terlalu banyak bayangan mungkin membuat halaman Anda terlihat seperti yang tertangkap dalam badai bayangan!

Praktik dengan nilai yang berbeda, gabungkannya secara kreatif, dan yang paling penting, bersenang-senang! Sebelum Anda tahu, Anda akan menjadi Shadowmaster desain web. Sampai jumpa lagi, terus coding dan tetap berbayangan!

Credits: Image by storyset