✔ Cara Menciptakan Box Shadow Pada Blog Terlengkap

Kali ini akan membagikan sebuah tutorial yaitu :

Cara Membuat Box Shadow Pada Blog Terlengkap

dan Berikut ini yakni isyarat CSS dasar untuk menciptakan 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 yakni ukuran offset sumbu X.

10px yang ke dua yakni offset sumbu Y.

7px yakni tingkat blur.

#222 yakni warna bayangan.

Sobat juga dapat menuliskan nilai offset negatif untuk menciptakan bayangan menuju ke arah sebaliknya.
Cara penerapannya dapat diletakkan secara top down ataupun inline ibarat 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 teladan kesannya 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; 

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: