Dengan berkembangnya CSS3, ketika ini telah banyak kreasi animasi dan tampilan memukau dari sebuah halaman web dengan memanfaatkan CSS3. Selain alasannya yaitu gampang digunakan, instruksi CSS juga sanggup menghasilkan tampilan yang elegan dan animasi yang lengkap.
Tidak jarang seorang pemilik blog berusaha memperlihatkan tampilan terbaik dari blognya dengan memakai CSS. Kamu sanggup mencoba berguru CSS dengan hanya aplikasi browser di PC, baik itu Google Chrome maupun Mozilla. Baca di sini untuk mengetahuinya lebih lanjut.
Nah, dalam posting kali ini saya akan membahas wacana cara memasang imbas hover 3D pada gambar di blog dengan memakai instruksi CSS. Dengan imbas 3 dimensi ini kau akan mendapat animasi yang keren di blog kau yang akan menciptakan pengunjung terpukau. Sebagai pola pada halaman demo berikut, kau sanggup melihat pola gambar yang memakai imbas 3D dengan memakai instruksi CSS, silakan coba arahkan kursor kau diatas gambar tersebut dan lihat hasilnya.
Untuk menciptakan hal serupa di blog kau memerlukan beberapa kode, instruksi yang dipakai hanya ada dua jenis, yaitu HTML dan CSS dengan hasil yang cukup ringan kalau dibandingkan dengan imbas yang ditampilkan. Untuk sanggup memakai imbas tersebut pertama-tama kau pasang instruksi CSS imbas tersebut pada blog kau dengan membuka dashboard blogger pilih Template kemudian klik Edit HTML. Setelah itu temukan instruksi
]]></b:skin> dan tempelkan instruksi berikut diatasnya..thumb { width: 400px; height: 300px; margin: 20px auto 50px; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; /*double layered BG for lighting effect*/ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJpW2CYu5jxNJIT_S9CxazSj8pE1m82qE3ERZLC79FFWRNfmjgQDtVYYQ2WfrTPd9PDJSFsDtxyw3PvJbGByru16DGhdZ0DGCQ3AS7HdCxUe-YUO6YVDA9apFjcxFp2dh3hXfInaQ02LSX/s640/pine+tree+forest+wallpaper.jpg"); /*disabling the translucent black bg on the main image*/ background-size: 0, cover; /*3d space for children*/ transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} /*bottom surface */ .thumb a:after { /*36px high element positioned at the bottom of the image*/ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; /*inherit the main BG*/ background: inherit; background-size: cover, cover; /*draw the BG bottom up*/ background-position: bottom; /*rotate the surface 90deg on the bottom axis*/ transform: rotateX(90deg); transform-origin: bottom; } /*label style*/ .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; /*the rotation is a bit less than the bottom surface to avoid flickering*/ transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } /*shadow*/ .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; /*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/ opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; /*blurred effect using box shadow as filter: blur is not supported in all browsers*/ box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); /*pushing the shadow down and scaling it down to size*/ transform: rotateX(0) translateZ(-60px) scale(0.85); }Setelah itu kau perlu mengganti bab yang ditandai pada instruksi CSS diatas dengan URL gambar yang kau inginkan. Dengan itu selesailah pemasangan imbas 3D di blog kamu. Selanjutnya penggunaan instruksi HTML nya, pasang instruksi HTML imbas ini pada ketika menulis artikel atau posting di blog kamu, tempelkan dalam mode penulisan HTML.
<div class="thumb"> <a href="https://www.maringngerrang.com/"><span class="maringngerrang"> Blog</span></a></div>
Silakan ganti bab yang ditandai pada instruksi HTML diatas sesuai impian kamu, sesudah itu lihatlah karenanya di halaman blog. Karena efeknya hanya berlaku ketika hover, maka ketika melihatnya melalui pratinjau posting karenanya mungkin tidak terlihat kalau terdapat clicktrap. Sebaiknya publikasikan terlebih dahulu untuk melihatnya. Atau kau sanggup mencoba menghilangkan clicktrap di blogger di sini.
Apabila gambar yang diinginkan tidak tampil sesuai yang dibutuhkan harap periksa kesalahan yang mungkin ada, misal terdapat instruksi CSS yang saling tumpang tindih atau ada instruksi yang terpotong. Jika masih bermasalah coba gunakan HTML Editor untuk mencobanya terlebih dahulu.
Mungkin cukup sekian yang sanggup saya sampaikan wacana cara memasang imbas 3D pada gambar di Blogger. Semoga artikel ini sanggup bermanfaat. Silakan sampaikan komentar terbaik kau melalui komentar di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/
