Cara Membuat Box Shadow dengan CSS

"Om Swastiastu"

Pada suatu desain web, awalnya kita akan membuat desain menggunakan photoshop dan illustrator. Kemudian, ketika mock-up desain yang kita buat sudah jadi maka kita akan mulai memotong desain-desain tersebut menjadi gambar-gambar yang lebih kecil sehingga nantinya bisa kita pakai dalam CSS. Salah satu contoh misalnya, ketika kita membuat desain dengan efek bayangan dengan photoshop, maka kita akan memotong bagian tersebut agar nantinya ketika kita membuat sebuah kotak, kotak tersebut terdapat efek bayangannya. Membuat kotak dengan gambar seperti ini membuat website menjadi berat karena harus meload gambar, untuk membuat waktu loading yang lebih cepat, kita akan membuat efek bayangan dengan CSS.

Tetapi cara seperti ini mengakibatkan website menjadi agak berat ketika diload karena terdapat gambar-gambar yang harus ditampilkan. Namun semenjak munculnya CSS versi terbaru, yaitu CSS3, maka kita dapat membuat bayangan hanya dengan kode CSS tanpa harus menggunakan gambar. Cara kedua ini sudah semakin sering dipakai karena hampir semua browser sekarang ini sudah support dengan CSS3.

Berikut adalah format dasar membuat box shadow dengan CSS3.

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

Keterangannya adalah sebagai berikut:

1. H-shadow adalah bayangan horizonta, jika bernilai negativ, maka bayangan akan kekiri.
2. V-shadow adalah bayangan vertical, jika bernilai negativ, maka bayangan akan keatas.
3. Blur adalah jarak blur bayangan.
4. Spead adalah ukuran dari bayangan.
5. Color adalah warna bayangan.
6. Inset ini bersifat opsional, boleh ada boleh tidak, fungsinya untuk menaruh bayangan didalam box.

Untuk contoh sederhana kalian bisa lihat contoh css box shadow berikut ini:

.shadow{
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}

Itu adalah salah satu contoh penggunaan kode CSS untuk membuat efek bayangan. Berikut ini akan saya sediakan beberapa contoh bayangan yang bisa dibuat dengan CSS.

Diatas sudah ada gambar kotak dengan jenis bayangan yang berbeda-beda. Sekarang saya akan membuatkan contohnya, mulai dari kotak A sampai kotak F.

Kotak A ini tanpa menggunakan blur, sehingga bayangannya terlihat kaku.

#kotak_A{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Kotak B sama dengan kotak A, bedanya di kotak B saya berikan efek blur sebanyak 5px.

#kotak_B{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Kotak C sama dengan kotak A, dengan tambahan tambahan ukuran bayangan sebanyak 5px.

#kotak_C{
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Kotak D ini sama dengan tambahan blur dan spread sejumlah 5px.

#kotak_D{
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Kotak E ini tanpa menggunakan offset horizontal dan vertical dengan blur 5px.

#kotak_E{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Kotak F sama dengan kotak E dengan tambahan spread sejumlah 5px.

#kotak_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Bagaimana? Mudah bukan membuat box shadow dengan CSS3? Jauh lebih menghemat waktu apabila kita menggunakan gambar. Selain itu dengan CSS3, kita juga bisa mempercepat kecepatan load website kita. Apabila ada yang belum tahu tentang daftar kode warna HTML, kalian bisa melihatnya pada daftar kode warna HTML berikut ini. Semoga tutorial ini berguna.

"Om Santhi, Santhi,Santhi, Om"