Katakan Cinta Dengan Tampilan Gambar Efek Rotate - Mengungkapkan rasa CINTA tidak harus dengan kata-kata, bisa juga kita katakan dengan perbuatan dan masih banyak lagi cara untuk katakan Cinta, bahkan Anda pernah melakukannya dengan pengorbanan mungkin, hehe..! karena hari ini, esok dan selamanya saya selalu cinta kepada semua rekan-rekan pecinta SAHABAT BLOGGER 77, ungkapan ini akan saya sampaikan dengan tampilan gambar efek rotate slide hover teks descripsi terspesial buat sahabat semua.
Efek Rotate pada tampilan gambar kali ini tidak jauh berbeda dengan tutorial sebelumnya tentang Membuat Efek Gambar 3D Dengan CSS Box Shadow. Style pada efek sama, namun tampilan gambar saya ubah pada model slide dengan CSS rotate3d, sehingga teks akan tertutup dengan gambar original default (gambar utama), sedangkan untuk menampilkan teks, saya menggunakan perintah cursor default hover dengan perpaduan transisi linear. Jika Anda Cinta SAHABAT BLOGGER 77, maka saya akan katakan Cinta melalui tombol DEMO SHOW dibawah ini
DEMO SHOW
Bagaimana.? romantis bukan ungkapan rasa cinta saya ini buat Anda, hehe..!!, tertarik ingin melakukan hal yang sama, berikut susunan HTML kodenya
Untuk HTML diatas boleh Anda letakkan dalam selector wilayah widget sidebar blog Anda sebagai koleksi gambar, tetapi jika untuk gambar di postingan, letakkan pada mode tulis HTML bukan yang compose. Selanjutnya tambahkan CSS berikut sebelum kode ]]></b:skin> atau <style> pada Template blog Anda
Di setiap rangkaian kode diatas, sudah saya beri tanda dengan warna yang berbeda, silahkan Anda mengantinya dengan imajinasi Anda yang lebih keren lagi, dan akhir kata saya mengucapkan terimakasih dan semoga dapat bermanfaat.
Artikel terbaru - Cara Membuat Efek Remote Link Pada Gambar
Efek Rotate pada tampilan gambar kali ini tidak jauh berbeda dengan tutorial sebelumnya tentang Membuat Efek Gambar 3D Dengan CSS Box Shadow. Style pada efek sama, namun tampilan gambar saya ubah pada model slide dengan CSS rotate3d, sehingga teks akan tertutup dengan gambar original default (gambar utama), sedangkan untuk menampilkan teks, saya menggunakan perintah cursor default hover dengan perpaduan transisi linear. Jika Anda Cinta SAHABAT BLOGGER 77, maka saya akan katakan Cinta melalui tombol DEMO SHOW dibawah ini
Bagaimana.? romantis bukan ungkapan rasa cinta saya ini buat Anda, hehe..!!, tertarik ingin melakukan hal yang sama, berikut susunan HTML kodenya
<ul class="sb77-grid"> <li> <div class="sb77-item"> <div class="sb77-info"> <div class="sb77-info-front sb77-img-1"> </div> <div class="sb77-info-back"> <h3>Teks Disini...</h3> <p> Sahabat Blogger 77<a href="#">View on Website</a> </p> </div> </div> </div> </li> </ul>
Untuk HTML diatas boleh Anda letakkan dalam selector wilayah widget sidebar blog Anda sebagai koleksi gambar, tetapi jika untuk gambar di postingan, letakkan pada mode tulis HTML bukan yang compose. Selanjutnya tambahkan CSS berikut sebelum kode ]]></b:skin> atau <style> pada Template blog Anda
.sb77-item {
width: 100%;height: 100%;
border-radius: 50%;
position: relative;cursor: default;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;}
.sb77-info{
position: absolute;
width: 100%;height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}
.sb77-info > div {
display: block;position: absolute;
width: 100%;height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;}
.sb77-info .sb77-info-back {
-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;}
.sb77-img-1 {background-image: url(URL-gambar/love-1.jpg);}
.sb77-info h3 {
color: #fff;text-transform: uppercase;
letter-spacing: 2px;font-size: 44px;
margin: 0 15px;padding: 50px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;}
.sb77-info p {
color: #fff;padding: 10px 5px;
font-style: italic;margin: -2em 30px;
font-size: 12px;
border-top: 2px dotted rgba(255,255,255,0.5);}
.sb77-info p a {
display: block;color: #fff;color: #ccc;
font-style: normal;font-weight: 700;
text-transform: uppercase;
font-size: 9px;letter-spacing: 1px;
padding-top: 4px;font-family: Helvetia;}
.sb77-info p a:hover {color: #fff222;color: magenta;}
.sb77-item:hover .sb77-info-front {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;}
.sb77-item:hover .sb77-info-back {
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
opacity: 1;}
.sb77-grid {
margin: 20px 0 0 0;
padding: 0;list-style: none;
display: block;text-align: center;width: 100%;}
.sb77-grid:after,
.sb77-item:before {content: '';display: table;}
.sb77-grid:after {clear: both;}
.sb77-grid li {
width: 220px;height: 220px;
display: inline-block;margin: 15px;}
KETERANGAN...
Di setiap rangkaian kode diatas, sudah saya beri tanda dengan warna yang berbeda, silahkan Anda mengantinya dengan imajinasi Anda yang lebih keren lagi, dan akhir kata saya mengucapkan terimakasih dan semoga dapat bermanfaat.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Katakan Cinta Dengan Tampilan Gambar Efek Rotate
Ditulis oleh= Devy
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 >>
(c)
BalasHapusterbalas berarti.
Hapusterbalas apanya neh
Hapusmeans ... that you really like me...mwnya..! =p~,,, emot yg gigit mawar mana Dev..!
HapusIni patut untuk dicoba ya mbak boleh nanti saya akan praktekan saja langsung hehe ..
BalasHapusMantap banget atampilan efek rotatenya. perlu di coba nich :)
BalasHapuswah... keren banget bos...
BalasHapussangat cocok dipasang sbagai thumb post yia bos, hehehe...
baiklah, anak buah!
Hapusjika pada widget pop post, efek seperti ini digunakan sebagai pengganti tooltip bos..
Hapusoh gitu yia, tooltip apaan sih bos?
Hapustooltip itu serangkaian teks pada sebuah objek sebelum objek tersebut di klik, jika pop post dengan thumb gambar biasanya ada descripsi singkat yang menerangkan link tersebut, namun pada tutorial ini descripsi tersebut saya gantikan dengan efek rotate, jadi sebelum objek tersebut diklik maka saat tersorot mouse tampilan objek akan berganti dengan descripsi teks seperti diatas
Hapusweisszz, mantep banget nih Mbak Devy.
BalasHapusterus, saya masih relevan nggak ya pake ginian?
wah bagus banget efeknya dan tentunya yang lebih saya suka adalah tidak menggunakan javascript
BalasHapusaku cinta kamu meski harus jungkir balik. hehe makin kreatif aja mbk Defy
BalasHapusbagus bagus he he tapi kira kira menambah berat loading ndak ya
BalasHapusWaah keren juga nih, jadi lebih atraktif dan dinamis tentunya itu jadi memukau, saya coba dulu kalau gitu.
BalasHapuslha ini yang namanya kreatif bisa mengungkapkan cinta dengan gambar...
BalasHapusasyik juga ya ngeblog bisa sambil mengugkapkan cinta :D
BalasHapusIni yang dimaksud css rotate itu ya Mbak...?
BalasHapusSaya belum ngerti demonya. Ketika disorot gambarnya berubah. Kalau tanpa disorot mouse, gambar bisa berubah-ubah enggak ya Mbak seperti di blogku yang dari kompas itu... :)
untuk menampilkan sesuatu dalam satu area objek,bukan hanya dengan rotate efek mas, rotate dikatakan karena efek yang tampil dari atas menggulung kebawah (rotasi) dengan perintah hover, jadi efek akan tampil saat mouse melintasi objek,
Hapussedangkan untuk membuat gambar yang berubah-ubah tanpa perintah mouse, kita bisa gunakan transisi animasi dengan delay waktu pergantian gambar, jadi gambar akan berganti secara otomatis dengan jarak waktu delay yang sudah kita tentukan.
contohnya lihat pada link ini
http://sahabatblogger77.blogspot.com/2014/03/efek-slide-show-otomatis-pada-gambar.html
memang benar-benar kreatif sekaliiiiiiii, saya salut dengan mbak devy
BalasHapusterimakasih mas atas pujiannya, saya juga masih belajar kok mas, buktinya sampai saat ini template saya belum juga kelar dikerjakan,,hehe
Hapus