-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Membuat Perspektif Shadow dengan CSS3

Ternyata CSS3 itu banyak juga yang mesti dipelajari, banyak yang aneh-aneh dan menarik buat dipelajari, karena ini bukan magic, tapi memang ada ilmunya untuk membuat sesuatu menjadi terlihat menarik, untuk berikutnya adalah Cara Membuat Perspektif Shadow dengan CSS3, yang saya baca dari rudyazhar.com seorang blogazinst yang hebat menurut saya dalam menguasai CSS3.
Untuk demonya bisa dilihat dibawah ini :

  • Silahkan  klik untuk melihat efek

Berikut adalah cara membuat beserta penjelasan yang Mas Rudy azhar jelaskan :

  • Pertama-tama pembuatan CSS untuk area gambar :
#gambar {
    display: block;
    height: 310px;
    margin: 20px auto;
    position: relative;
    width: 410px; cursor: pointer
}
Disini kita lebihkan masing-masing 10px untuk lebar dan tingginya.
  • Berikutnya pembuatan efek box-shadow serta transform: perspective dengan menggunakan pseudo element.
#gambar:before {
    background: hsla(0,0%,0%,.5);
    bottom: -10px;
    content: '';
    height: 300px;
    left: 85px;
    position: absolute;
    right: 85px;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
            box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
    -webkit-transform: perspective(500) rotateX(45deg);
       -moz-transform: perspective(500) rotateX(45deg);
        -ms-transform: perspective(500) rotateX(45deg);
         -o-transform: perspective(500) rotateX(45deg);
            transform: perspective(500) rotateX(45deg);
}
 
  • Selanjutnya menambah efek gambar saat disorot dengan membuat warna border lebih gelap. 
#gambar:hover, #gambar:focus {
    border-color: #666;
}

  • Membuat gambar dan bayangan (shadow) saat di klik akan bergerak
#gambar:active {
    top: 2px;
}
#gambar:active:before {
    bottom: -6px;
    left: 87px;
    right: 87px;
}
  •  Terakhir, gambarnya kita bingkai lagi agar lebih menarik.
#gambar {
    background: #f6f6f6;
    border: 1px solid #aaa;
    display: block;
    height: 300px;
    padding: 4px;
    width: 400px;
    z-index: 1;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
 
  • Berikut adalah CSS secara keseluruhannya : 
#gambar {
    display: block;
    height: 310px;
    margin: 20px auto;
    position: relative;
    width: 410px; cursor: pointer
}
#gambar:before {
    background: hsla(0,0%,0%,.5);
    bottom: -10px;
    content: '';
    height: 300px;
    left: 85px;
    position: absolute;
    right: 85px;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
            box-shadow: 0 0 20px 20px hsla(0,0%,0%,.5);
    -webkit-transform: perspective(500) rotateX(45deg);
       -moz-transform: perspective(500) rotateX(45deg);
        -ms-transform: perspective(500) rotateX(45deg);
         -o-transform: perspective(500) rotateX(45deg);
            transform: perspective(500) rotateX(45deg);
}
#gambar:hover, #gambar:focus {
    border-color: #666;
}
#gambar:active {
    top: 2px;
}
#gambar:active:before {
    bottom: -6px;
    left: 87px;
    right: 87px;
}
#gambar {
    background: #f6f6f6;
    border: 1px solid #aaa;
    display: block;
    height: 300px;
    padding: 4px;
    width: 400px;
    z-index: 1;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

  • Cara pemanggilannya pada HTML :
<div id="gambar"><img src="http://lorempixum.com/400/300/"/></div>

Selesai..., semoga bermanfaat.

Show 0 Comments
Categories: ,

Leave a Reply