Kotak Efek Berbayang dengan CSS3 Box-Shadow


Diatas bukan gambar, tapi contoh dari Box-Shadow.

Kode :

.box1{
width:40px;
height:40px;
background:????;
box-shadow:0px 42px 0px red, 0px -42px 0px green, 42px 0px 0px yellow, -42px 0px 0px white, -42px -42px 0px blue, 42px 42px 0px AntiqueWhite, 42px -42px 0px Aqua, -42px 42px 0px Aquamarine, -84px 0px 0px Beige, -84px -42px 0px BlueViolet, -84px 42px 0px Brown, -126px 0px 0px BurlyWood, -126px 42px 0px CadetBlue, -126px -42px 0px Coral, 84px 0px 0px CornflowerBlue, 84px -42px 0px DarkGoldenRod, 84px 42px 0px DarkGreen; 
}

Penjelasan :

box-shadow: horizontal vertikal blur warna;

Contoh diatas saya tidak memakai blur, sehingga seperti kotak asli.


lengkapnya :

box-shadow: horizontal vertikal blur ukuran warna tampilan;


Lihat dari warna asli kotak tersebut atau background ???. Jika anda mengetahui mana yang asli, jawab dengan berkomentar.




box-shadow:0px 22px 30px red, 0px -22px 30px green, 22px 0px 30px blue, -22px 0px 30px yellow; 



box-shadow:22px 22px 0 white, -22px -22px 0 white, 22px -22px 0 white, -22px 22px 0 white;



box-shadow:140px 0 0 60px white, -140px 0 0 60px white; 



0 comments:


Posting Komentar


Creative Commons License
Kotak Efek Berbayang dengan CSS3 Box-Shadow by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2012/12/kotak-efek-berbayang-dengan-css3-box.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.