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 -


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)

3D image

URL-gambar/poster.jpg
http://4.bp.blogspot.com/-d-GsgtLa9GE/U0bbdZ6LaeI/AAAAAAAAAN0/BjKEiEKi4_A/s1600/Sahabatblogger77.jpg

URL-gambar(bg.hover).jpg
http://3.bp.blogspot.com/-T2hCajK-CQw/U0LTL--ElMI/AAAAAAAAASw/4vXnD61bT6w/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 -

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Gambar 3D Dengan CSS Box Shadow
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. Wah keren ya jadinya seperti 3 Dimensi... saya coba pelajari dulu sob. makasih sharingnya :)

    BalasHapus
  2. Hasilnya keren banget mbak (h).. Makasih tutorialnya :)

    BalasHapus
  3. wow... keren banget bos, gambar lebih dari 2 mungkin juga bisa yia bos...

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

      Hapus
  4. keren sob ... (h)
    o y ada bug tu, waktu klik ikon d atas t4 komentar :))

    BalasHapus
  5. bener2 menarik mbk efek gambar 3D nya. terima kasih telah berbagi..

    BalasHapus
  6. ijin nyimak dulu mba.. dan salam kenal :)

    BalasHapus
  7. Menarik, bisa membuat 3D. keren mbak

    BalasHapus
  8. cape jg kelilingi blog ini.., minta airnya Mba..!..:), sempat jg td ktemu dgn pak tarno..,

    menarik semua tp sayng gak bisa memahami..soalnya memang gak paham dgn kode2. sempat jg tadi culik cara buat tulisan embossnya tp keburu lepas..pas liat di judul..eee, kodenya numpuk di atas judul..cqcqcqcq..!

    Bisa g Mba, levelnya diturunkan sedikit
    ke tahap renovasi html/css (amatir mode:ON), misalnya ingin efek seperti ini, cari kode ini sisipkan ato ganti scrip berikut. Maap ya Mba,.sekadar suara hati dri yg gak ngerti kode..

    Oia..Sendal ane kelupaan di kamar sebelah..titp dulu y Mba..!, besok kembali lg ambilnya..!

    BalasHapus
    Balasan
    1. coba kelilingnya pakai ojek,pasti gak capek dech..hehe..

      ok dech, ntar akan saya permudah dalam penyerapan kodenya, biasanya ada yang bertanya kode CSS ditaruh dimana mbak.? dan HTML diletakkan dimana Mbak.?, tetapi selama ini kan banyak blog yang memberikan kode-kode seperti ini, jadi saya pikir mereka yang membaca artikel ini sudah mengetahui kode tersebut akan diletakkan dimana..?

      Hapus
  9. salam kenal ya gan :)

    kunjungi balik ya gan 168sdbet.com

    tq gan :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK