• Buat yang ingin menerapkan Tulisan anti copy paste di Blog Anda, silahkan simpan kode dibawah ini diatas kode ]]></b:skin>
  • Lalu save template anda.
Pada saat anda posting artikel, silahkan anda beralih dari mode COMPOSE ke moda edit HTML. Untuk Kode dalam postingan blog, gunakan kode HTML seperti dibawah ini :
  • Setelah itu silahkan anda terbitkan artikel kemudian anda coba copas artikel anda


source : http://sin1aja.blogspot.com/
Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.


Elemen yang menggunakan CSS3 Transisi

Kode CSS diatas: :
<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi:hover
{
width:400px;
}
</style>

<div class="transisi">
Elemen yang menggunakan CSS3 Transisi</div>
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.


Efek transisi melebar kesamping sekaligus kebawah

Kode CSS diatas: :
<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi2:hover
{
width:400px;
height:300px;
}
</style>

<div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>
Contoh lainnya Efek transisi melebar kesamping sekaligus tinggi menyempit


Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode CSS diatas: :
<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 5s;
-moz-transition:width 5s; /* Firefox 4 */
-webkit-transition:width 5s; /* Safari and Chrome */
-o-transition:width 5s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
div.transisi3:hover
{
width:400px;
height:40px;
}
</style>

<div class="transisi3">
Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

Berikut contoh yang lain


Efek transisi membesar dan berputar

Kode CSS diatas: :
<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
box-shadow:0 0 5px;
border:1px solid #ddd;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.transisi4:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>

<div class="transisi4">Efek transisi membesar dan  berputar</div>

Selamat mencoba dan Semoga bermanfaat....


source:  www.carabuatwebgratis.com