Cara Membuat Efek Bayangan dengan box-shadow

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Setelah beberapa artikel sebelumnya SkripKu sudah membahas tentang PHP dan SQL, maka pada artikel kali ini kita akan membahas tentang CSS. Oke, sesuai judul diatas kali ini kita akan mencoba mengupas tentang box-shadow, fitur box-shadow ini merupakan salah satu fitur baru yang ada di CSS3. Saat pertama kali dikeluarkan, untuk menggunakan fitur ini kita harus menyebutkan kode khusus seperti -webkit-box-shadow untuk Google Chrome, kemudian -mox-box-shadow untuk Firefox, dan kode-kode ribet lainnya. Tapi sekarang, Alhamdulillah hampir semua browser sudah mulai mendukung deklarasi tunggal untuk fitur box-shadow ini. Jadi kita cukup menuliskan box-shadow: bla bla bla bla saja dan akan mengeluarkan hasil yang sama baik di Google Chrome, Mozilla Firefox, dan browser-browser modern lainnya. Jadi seperti namanya, fungsi dari box-shadow ini adalah untuk memberikan efek bayangan kepada suatu objek di halaman web. Langsung saja, syntax box-shadow kurang lebih seperti ini:

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

Keterangan

1. h-offset
     Horizontal Offset: Jika nilainya positif maka bayangan akan berada di sebelah kanan, jika negatif maka bayangan akan berada disebelah kiri.
2. v-offset
     Vertical Offset: Jika nilainya positif maka bayangan akan berada dibawah, jika negatif maka bayangan akan berada diatas.
3. blur-radius
     Blur Radius: Jika nilainya nol maka bayangan akan seperti bayangan biasa, semakin besar nilainya maka akan semakin blur bayangannya.
4. color
     Warna: Warna bayangan, kita bisa mengisinya dengan menyebutkan nama warnanya langsung seperti: red, blue, green, dll. Kita juga bisa mengisinya dengan rgb() ataupun hexadecimal. Jika ingin mencari warna yang bagus, anda bisa menggunakan Tools Color Picker yang disediakan SkripKu disini.
Informasi:
Semua contoh disini menggunakan metode Internal CSS. Baca juga: Cara Memasang CSS kedalam HTML

Contoh

     Pada contoh dibawah kita akan mencoba membuat sebuah persegi dan memberinya efek bayangan dengan box-shadow dengan nilai h-offset: 5px sehingga bayangan akan berada 5px disebelah kanan kotak, v-offset: 5px sehingga bayangan akan berada 5px dibawah kotak, Blur Radius: 5px dan warna bayangan #4791D2 (biru).

Kode HTML-nya seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SkripKu - Mengenal box-shadow</title>
        <style>
            .persegi {
            width: 100px;
            height: 100px;
            border: 1px solid #4791D2;
            box-shadow: 5px 5px 5px #4791D2;
            }
        </style>
    </head>
    <body>
        <div class="persegi"></div>
    </body>
</html>

Multiple Shadow

     Kita juga bisa memberikan beberapa efek shadow kepada suatu elemen html dengan menggunakan koma (,). Seperti pada contoh dibawah kita akan membuat sebuah persegi dengan 4 bayangan yaitu hitam, merah, biru, dan hijau:
Kode HTML-nya:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SkripKu - Mengenal box-shadow</title>
        <style>
            .kotak {
            width: 100px;
            height: 100px;
            box-shadow: 1px 1px 5px black,
            10px 10px 5px red,
            20px 20px 5px blue,
            30px 30px 5px green;
            }
        </style>
    </head>
    <body>
        <div class="kotak"></div>
    </body>
</html>
Oke, sekian tutorial kali ini.
Mohon maaf jika masih banyak kekurangan.
Terima kasih atas kunjungannya.
Wassalamu'alaikum Warahmatullahi Wabarakatuh.

8 komentar

thnks gan tutornya, kren buat kreasiin my blog. 👍

Tapi kalo skripnya gitu. Jadi kelihatan jelek dan akan mengganggu objek dibawahnya. Jadi kalo minsalnya menggunakan warna Alpha, Warna lainnya jadi kelihatan dan enak dipandang minsal :
.shadow {box-shadow: 1px 1px 5px rgba(0,0,0,0.54)}
atau untuk multiple warna
.shadow {
box-shadow: 1px 1px 5px rgba(240,0,0,0.54),
1px 1px 5px rgba(0,240,0,0.54),
1px 1px 5px rgba(0,0,240,0.54)
}

Sip, makasih kunjungannya gan :-bd

Haha iya keren gan, saya gak kepikiran pake warna Alpha @@, Makasih masukannya :-d

Nice info,bisa mempercantik web juga (y)


EmoticonEmoticon