Cara Membuat Box Shadow Pada Blog Terlengkap

Menarik Lainnya

Kali ini Om Ipoel akan membagikan sebuah tutorial yaitu :

Cara Membuat Box Shadow Pada Blog Terlengkap

dan Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:

CSS Bayangan Outset

div {
  -webkit-box-shadow:10px 10px 7px #222;
  -moz-box-shadow:10px 10px 7px #222;
  box-shadow:10px 10px 7px #222;
}

CSS Bayangan Inset

div {
  -webkit-box-shadow:inset 10px 10px 7px #222;
  -moz-box-shadow:inset 10px 10px 7px #222;
  box-shadow:inset 10px 10px 7px #222;
}

10px yang pertama adalah ukuran offset sumbu X.

10px yang ke dua adalah offset sumbu Y.

7px adalah tingkat blur.

#222 adalah warna bayangan.

Sobat juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya.
Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down Inline
<style>
#kotak-1 {
  -webkit-box-shadow:10px 10px 7px #222;
  -moz-box-shadow:10px 10px 7px #222;
  box-shadow:10px 10px 7px #222;
}
</style>
<div id='kotak-1'>OBJEK</div> <div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'>OBJEK</div>

Box Shadow Outset (Bayangan diluar Kotak)

BOX 1

-webkit-box-shadow: 10px 5px 7px #222;
-moz-box-shadow: 10px 5px 7px #222;
box-shadow: 10px 5px 7px #222;

BOX 2

-webkit-box-shadow: 0 10px 7px #222;
-moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;

BOX 3

-webkit-box-shadow: 10px 0 7px #222;
-moz-box-shadow: 10px 0 7px #222;
box-shadow: 10px 0 7px #222;

BOX 4

-webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;

BOX 5

-webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;

BOX 6

-webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;

BOX 7

-webkit-box-shadow: 10px 5px 0 #222;
-moz-box-shadow: 10px 5px 0 #222;
box-shadow: 10px 5px 0 #222;

BOX 8

-webkit-box-shadow:-10px -5px 0 #222;
-moz-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;

Perhatikan yang berwarna merah, itu yang perlu diperhatikan dalam pembuatan box-shadow outset.

Lihat lebih lengkap contoh hasilnya dibawah ini :

Result

-webkit-box-shadow: inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222;
-moz-box-shadow: inset 0 10px 7px #222;
box-shadow: inset 0 10px 7px #222;

-webkit-box-shadow: inset 10px 0 7px #222;
-moz-box-shadow: inset 10px 0 7px #222;
box-shadow: inset 10px 0 7px #222;

-webkit-box-shadow: inset 0 0 7px #222;
-moz-box-shadow: inset 0 0 7px #222;
box-shadow: inset 0 0 7px #222;

-webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;

-webkit-box-shadow: inset 0 0 20px #f10c0c;
-moz-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;

-webkit-box-shadow: inset 10px 5px 0 #222;
-moz-box-shadow: inset 10px 5px 0 #222;
box-shadow: inset 10px 5px 0 #222;

-webkit-box-shadow: inset -10px -5px 0 #222;
-moz-box-shadow: inset -10px -5px 0 #222;
box-shadow: inset -10px -5px 0 #222;