Efek Gambar 3D Dengan CSS Box Shadow

Efek Gambar 3D Dengan CSS Box Shadow - Masih dalam tutorial gambar, Merubah gambar,  kali ini SAHABAT BLOGGER 77 mengambil tema tentang Cara Mendesain Gambar menggunakan efek 3D style-code:"preserve-3d". Pada kesempatan lalu saya sudah pernah membahas tentang pengenalan CSS Box Shadow, yang detailnya Anda bisa baca pada link artikel dibawah ini

Inspiration code -

Mengenal CSS Dasar Box Shadow

Dengan CSS box shadow, saya akan coba memberikan sentuhan efek pada gambar saat hover. Sebagai bahan percobaan saya sudah mendesain beberapa gambar untuk digunakan sebagai pengganti gambar bayangan, sehingga efek bayangan pada box akan berubah menjadi gambar (image-shadow poster)

URL-gambar/poster.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyX52dRh4_TaPpFeLP8Q9qhCY8NIrv5rlmU2YB8K1PZOtz7GsXEH72iFgkhbxG5SPr56X1-meBQAdDALwyU2_xzwtDZJpqQl1GFqddjq4EE6vD6gjMwATLRis6u-R36_-lQJRY_Cw0Dc/s1600/Sahabatblogger77.jpg

URL-gambar(bg.hover).jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLwzPWQYwzNGUzdw7PLeq3XABT8ot-wcJtBhAA24C3LRRiIjlzjM0L9eRHAS3gMaa9uBxdqbC5rFn2PDcg4QPv0Wuqp6_HAy7dsU5AMAwv0RLOR7Lplh933becwRlxn6ZwFRdF6BRkmCK/s1600/still01.jpg

Hasilnya Akan terlihat seperti Tombol DEMO SHOW dibawah ini



DEMO SHOW



Jika sahabat berminat ingin membuat Efek Gambar 3D Dengan CSS Box Shadow seperti diatas, Anda cukup salin kode-kode berikut, semua kode ini sudah saya ceck ulang, dan susunannya saya uraikan kebawah untuk mempermudah Anda dalam peng-editan.


ELEMEN HTML

<div class="wrapper">
   <ul class="stage">
     <li class="scene">
        <div class="movie">
        <div class="poster">
        </div>
        <div class="info">
    <header>
<h1>File Sahabat Blogger 77</h1>
<span class="year">2014</span>
<span class="rating">11</span>
<span class="duration">April, Friday</span>
    </header>
//
.. Tulis Teks Anda Disisni..
//

         </div>
         </div>
     </li>
   </ul>
</div>

ELEMEN CSS

Pada tahap ini saya menambahkan CSS movie poster.url-image, jadi persiapkan URL-gambar Anda, atau sebagai uji coba silahkan gunakan URL gambar diatas pada kode yang saya beri warna  Orange 

.wrapper {margin: 0 auto;max-width: 960px;}
.stage {list-style: none;padding: 0;}
.scene {
   width: 260px;
   height: 400px;
   margin: 30px;
   float: left;
   perspective: 1000px;}

.movie {
   width: 260px;
   height: 400px;
   transform-style: preserve-3d;
   transform: translateZ(-130px);
   transition: transform 350ms;}

.movie:hover {transform: rotateY(-78deg) translateZ(20px);}
.movie .poster,
.movie .info {
   position: absolute;
   width: 260px;
   height: 400px;
   background-color: #fff;
   backface-visibility: hidden;}

.movie .poster  {
   transform: translateZ(130px);
   background-size: cover;
   background-repeat: no-repeat;}

.movie .info {border: 1px solid #B8B5B5;font-size: 0.67em;}
.csstransforms3d .movie::after {
   content: '';
   width: 260px;
   height: 260px;
   position: absolute;
   bottom: 0;
   box-shadow: 0 30px 50px rgba(0,0,0,0.3);
   transform-origin: 100% 100%;
   transform: rotateX(90deg) translateY(130px);
   transition: box-shadow 350ms;}

.csstransforms3d .movie:hover::after {
   box-shadow: 20px -5px 50px rgba(0,0,0,0.3);}

.info header {
   color: #FFF;
   padding: 7px 10px;
   font-weight: bold;
   height: 195px;
   background-size: contain;
   background-repeat: no-repeat;
   text-shadow: 0px 1px 1px rgba(0,0,0,1);}

.info header h1 {margin: 0 0 2px;font-size: 1.6em;}
.info header .rating {border: 1px solid #FFF;padding: 0px 3px;}

.info p {
   padding: 5px 10px;
   margin: -1.5em 0 -0.2em 0;
   font-weight: 700;
   color: #333;
   line-height: 1.4em;
   border-top: 10px solid #555;}

.movie .poster, .movie .info,
.movie .info header {transition: box-shadow 350ms;}
.csstransforms3d .movie .poster {
 box-shadow: inset 0px 0px 40px rgba(255,255,255,0);}
.csstransforms3d .movie:hover .poster {
 box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);}

.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
 box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);}

.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
 box-shadow: inset 0px 0px 40px rgba(0,0,0,0);}

.scene:nth-child(1) .movie .poster {
 background-image: url(..URL-gambar/poster.jpg);}
.scene:nth-child(1) .info header {
 background-image: url(..URL-gambar(bg.hover).jpg);}

.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {position: relative;}

@media screen and (max-width: 60.75em){
.scene {float: none;margin: 30px auto 60px;}}

Persahabatan itu bukan harus bersama dan berkumpul dengan orang-orang pintar, tetapi bersama siapapun Anda katakanlah "saya ada untuk kamu" jadi bersahabat harus berbagi, maka dari itu mari kita saling berbagi, berdiskusi, karena saya juga bisa salah dan saya pasti mengharapkan teguran dari Anda.

Semoga tutorial ini dapat bermanfaat. Terimakasih
- GOOD LUCK -