Cara Membuat Bayangan Gambar dengan CSS3

Membuat sebuah bayangan pada sebuah elemen dengan CSS3 tidak lah sulit, tinggal bagaimana kita menyisipkan properti CSS pada elemen tersebut, berkaitan dengan efek bayangan, berikut ini akan saya jelaskan mengenai bagaimana Cara Membuat Bayangan Gambar dengan CSS3. Ada beragam elemen bisa kita manipulasi dengan menambahkan efek bayangan sebenar nya, mulai dari teks bisa kita berikan efek bayangan, nah sekarang kita akan memanipulasi sebuah gambar dengan efek bayangan, seolah-olah gambar itu sendiri seperti melayang, bagaimana cara membuatnya, simak langkah-langkah nya berikut ini.

Untuk membuat efek bayangan gambar, kalian bisa menyiapkan satu buah gambar untuk elemen nya, setelah itu tahapan selanjutnya adalah menuliskan struktur HTML seperti berikut.

<body>
	<div id="wrapper">
	   <img src="https://goo.gl/se8GlZ">
	<div/>
</body>

Pada bagian sintak img src kalian isikan gambar yang sudah kalian siapkan tadi, tahap selanjut nya adalah kita akan mendesain elemen 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;
}

Untuk penerapan efek bayangan nya kalian bisa melihat yakni pada 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 bisa mencoba manipulasi efek bayangan gambar tersebut sedemikian rupa. Setelah semua sintak diatas diketikan silahkan kalian buka pada browser masing-masing dan lihat hasilnya. Selesai

Bagaimana, cukup mudah untuk membuat bayangan gambar dengan CSS3. Baik sekian pembahasan tutorial mengenai bagaimana Cara Membuat Bayangan Gambar dengan CSS3. semoga bermanfaat, amin

Silahkan lihat Demo untuk melihat lebih jelas efek bayangan gambar nya.

Cara Membuat Bayangan Gambar dengan CSS3

Kategori