Beberapa Tutorial Efek Transisi Pada Gambar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Selasa, 25 Februari 2014 0 komentar
Beberapa Tutorial Efek Transisi Pada Gambar. Cara Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja sob :

Sample Efek Bumping :



Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.post img:hover{
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);
}

Sample Efek Fade Out :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
}
.post img:hover{
opacity:0.2;
}

Sample Efek Fade In :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
opacity:0.2;
}
.post img:hover{
opacity:1;
}

Sample Efek Rotasi :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

Sample Efek Hover Zoom :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}

Sample Zoom Out :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-o-transform: scale(0.6);
-webkit-transform: scale(0.6);
}

Sample Miring Kekanan :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); -o-transform:rotate(4deg);
}

Sample Miring Kekiri :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}

Sample Efek Skew :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.post img:hover{-webkit-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}

Sample Gambar kekanan :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt);
}

Sample Gambar Memutar :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
border: 3px solid #D8D8D8;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}
.post img:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);    
}

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

1. Masuk Dasboard >> Template >> Edit HTML

2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F

3. Letakan salah satu kode CSS efek transisi di atas kode no 2

4. save dan sip dong.

Cukup mudah dong sob. Bila ada yang salah pada artikel diatas maka segera anda tulis di kotak komentar di bawah ! terimakasih atas perhatiannya.
Demikian ulasan seputar Beberapa Tutorial Efek Transisi Pada Gambar

Baca Selengkapnya ....

Menu Navigasi dengan Efek Hover Transisi CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur 0 komentar
Menu Navigasi dengan Efek Hover Transisi CSS3 | Cara Membuat Komposisi Perubahan Transisi menu Website / Blogger (blogspot) | Anda ingin rombak ganti dan upgrade template anda ?

Contoh :
Dark Theme Menu Navigasi
kode source :

<ul class="navigation">
 <li>
  <h2>Home</h2>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <h2>Tutorial</h2>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <h2>About</h2>
  <p>Who we are</p>
 </li>
 <li>
  <h2>Contact</h2>
  <p>Let me know about you</p>
 </li>
</ul>

<style>
* {margin: 0; padding: 0;}

body {
 font-family: 'Lucida Grande', helvetica, arial, sans-serif;
 font-size: 12px;color: #fff;
}

.navigation {
 margin: 200px 20px;
 background: #000000;
 overflow: hidden;
 width: 760px;

 box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
 width: 120px; border-left: 5px solid #666;
 float: left;
 cursor: pointer;
 list-style-type: none;

 padding: 10px 50px 10px 15px;

 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}

.navigation li h2 {
 font-family: georgia;
 font-weight: normal;
 font-style: italic;
 font-size: 14px;
 margin-bottom: 5px;
 line-height: 16px;
}

.navigation li p{
 font-size: 11px;
 color: #999;

 -webkit-transition: all 0.1s ease-in;
 -moz-transition: all 0.1s ease-in;
 -o-transition: all 0.1s ease-in;
}

.navigation li:hover {
 background: #fff;
 border-left: 5px solid #000;
}

.navigation li:hover h2 {
 font-weight: bold;
 color: #000;
}

.navigation li:hover p {
 color: #000;
 padding-left: 5px;
}
</style>


Contoh :
Light Theme Menu Navigasi

kode source :

<ul class="navigation">
 <li>
  <h2>Home</h2>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <h2>Tutorial</h2>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <h2>About</h2>
  <p>Who we are</p>
 </li>
 <li>
  <h2>Contact</h2>
  <p>Let me know about you</p>
 </li>
</ul>
<style>
* {margin: 0; padding: 0;}

body {
 font-family: 'Lucida Grande', helvetica, arial, sans-serif;
 font-size: 12px;
}

.navigation {
 margin: 200px 20px;
 background: #fff;
 overflow: hidden;
 width: 760px;

 box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
 width: 120px; border-left: 5px solid #666;
 float: left;
 cursor: pointer;
 list-style-type: none;

 padding: 10px 50px 10px 15px;

 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}

.navigation li h2 {
 font-family: georgia;
 font-weight: normal;
 font-style: italic;
 font-size: 14px;
 margin-bottom: 5px;
 line-height: 16px;
}

.navigation li p{
 font-size: 11px;
 color: #999;

 -webkit-transition: all 0.1s ease-in;
 -moz-transition: all 0.1s ease-in;
 -o-transition: all 0.1s ease-in;
}

.navigation li:hover {
 background: #333;
 border-left: 5px solid #000;
}

.navigation li:hover h2 {
 font-weight: bold;
 color: #fff;
}

.navigation li:hover p {
 color: #ccc;
 padding-left: 5px;
}
</style>



---------------------------------------------
kasih link :


<ul class="navigation">
 <li>
  <a href='#'><h2>Home</h2></a>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <a href='#'><h2>Tutorial</h2></a>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <a href='#'><h2>About</h2></a>
  <p>Who we are</p>
 </li>
 <li>
  <a href='#'><h2>Contact</h2></a>
  <p>Let me know about you</p>
 </li>
</ul>

----------------------------------------------------

Bila ingin mengasih tambahan :

klo mo pke submenu tinggal ditambah html:
<li class='has-sub '><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>


Cukup enak dan mudah dong sob, bila artikel diatas ada kesalahan segera tulis di kotak komentar di bawah ini sob. terima kasih. tulisan ini seputar Menu Navigasi dengan Efek Hover Transisi CSS3

Baca Selengkapnya ....
Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam