Cara Membuat Efek Bayangan box Shadow Keren dengan CSS

Kadek
0 Komentar
0

Cara Membuat Efek Bayangan box Shadow Keren dengan CSS

Cara Membuat Efek Bayangan box shadow dengan CSS

Pada Kesempatan kali ini saya akan share sebuah Tutorial tentang membuat efek bayangan Box Shadow dengan CSS. pada artikel sebelumnya saya juga pernah menjelaskan Cara membuat efek tulisan bayangan keren dengan css. mungkin ada sobat sobat yang ingin bertanya apa itu CSS? Sebenarnya CSS itu kode pemograman yang bisa menghias dan mengatur gaya seperti keunikan dan keindahan. mungkin semakin dalam kita belajar CSS, akan semakin besar rasa ingin tau kita tentang apa saja yang bisa di lakukan oleh CSS ini.

Oke sobat, Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek :

CSS Shadow Outset :

div {
  -webkit-box-shadow:10px 10px 7px #808; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #808;    /* Firefox */
  box-shadow:10px 10px 7px #808;         /* W3C */
}

CSS Shadow Inset :

div {
  -webkit-box-shadow:inset 10px 10px 7px #808; /* Safari & Chrome */
  -moz-box-shadow:inset 10px 10px 7px #808;    /* Firefox */
  box-shadow:inset 10px 10px 7px #808;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu X, 10px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur, #808 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 :

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

Inline :
<div style='-webkit-box-shadow:10px 10px 7px #808;-
moz-box-shadow:10px 10px 7px #808;box-shadow:10px 
10px 7px #808;'>OBJEK</div>

Dan ini adalah beberpa contoh kode box shadow atau efek bayangan yang dapat sobat gunakan di blog :
-webkit-box-shadow: 10px 5px 7px #808;
-moz-box-shadow: 10px 5px 7px #808;
box-shadow: 10px 5px 7px #808;


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


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


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


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


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


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


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


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


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


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


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


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


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

Sekian Cara membuat efek bayangan box shadow dengan css, Semoga bermanfaat bagi sobat sobat semua. Selamat mencoba dan Terimakasih.
← NewerOlder →

Fitur Lagu