Cara Membuat Bayangan Gambar dengan CSS3
Membangun sebuah bayangan di sebuah unsur dengan CSS3 tak lah sulit, tinggal bagaimana kita menyisipkan properti CSS di unsur tersebut, berkaitan dengan efek bayangan, berikut ini akan saya jelaskan mengenai bagaimana Cara Membuat Bayangan Gambar dengan CSS3. Ada beragam unsur dapat kita manipulasi dengan menambahkan efek bayangan sebenar nya, mulai dari teks dapat kita berikan efek bayangan, nah sekarang ini kita akan memanipulasi sebuah gambar dengan efek bayangan, seolah-olah gambar itu sendiri seperti melayang, bagaimana cara membuatnya, simak strategi nya berikut ini.
Bagi merancang efek bayangan gambar, kalian dapat menyiapkan satu buah gambar bagi unsur nya, setelah itu tahapan berikutnya yaitu menuliskan struktur HTML seperti berikut.
<body>
<div id=wrapper>
<img src=https://goo.gl/se8GlZ>
<div/>
</body>
Di bagian sintak img src kalian isikan gambar yang telah kalian siapkan tadi, tahap selanjut nya yaitu kita akan mendesain unsur gambar agar terlihat rapi dan menarik dengan sintak CSS3 berikut.
body {
background: #FFF;
}
#wrapper {
padding: 0 10px;
position: relative;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%);
margin:auto;
width: 400px;
}
#wrapper img {
border: 10px solid #A8CB17;
border-radius: 5px;
box-shadow: 15px 0 20px -20px #A8CB17, -15px 0 20px -20px #A8CB17;
z-index: -1;
}
#wrapper:before {
background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7))
repeat scroll 0 0 padding-box, -moz-element(#wrapper) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
content: ;
height: 105px;
left: 0;
padding: 1px 0;
position: absolute;
top: 220px;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
width: 360px;
}Bagi penerapan efek bayangan nya kalian dapat melihat yakni di sintak ini.
#wrapper:before {
background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7))
repeat scroll 0 0 padding-box, -moz-element(#wrapper) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
content: ;
height: 105px;
left: 0;
padding: 1px 0;
position: absolute;
top: 220px;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
width: 360px;
}Kalian dapat mencoba manipulasi efek bayangan gambar tersebut sedemikian rupa. Setelah seluruh sintak diatas diketikan silahkan kalian buka di browser masing-masing dan lihat hasilnya. Selesai
Bagaimana, lumayan gampang bagi merancang bayangan gambar dengan CSS3. Bagus demikianlah pembahasan panduan mengenai bagaimana Cara Membuat Bayangan Gambar dengan CSS3. semoga bermanfaat, amin
Silahkan lihat Demo bagi melihat lebih jelas efek bayangan gambar nya.
Sumber https://kursuswebsite.org
