CSS3 Transisi dan Transformasi

Posted by Tips Trick Blogger Saturday, January 8, 2011 0 comments

Langsung aja ya bro...nih beberapa kode transisi dan transformasi CSS3. Mungkin aja anda tertarik untuk menggunakannya sewaktu-waktu untuk tampil gaya atau sedikit nyentil dan menggigit di posting anda. Ini script sebenarnya bisa anda terapkan untuk beberapa tampilan, baik itu menjadi text area, blockquote, dan untuk gambar. Ok .... lanjut nyimaknya____sampai habis ya....yyyyyuuuuuhhhhhhhhuuuuuuuuuuuu........................

Coba arahkankan dulu mouse anda ke kolom di bawah ini, maka anda akan melihat hasilnya.

TRANSISI ATAS

TRANSISI BAWAH

TRANSISI KANAN

TRANSISI KIRI

TRANSISI KANAN ATAS

TRANSISI KIRI BAWAH

TRANSFORMASI BACKGROUND

TRANSFORMASI BORDER

TRANSFORMASI BACKGROUND DAN BORDER

TRANSFORMASI OPACITY

TRANSFORMASI UKURAN

TRANSFORMASI GABUNGAN

Penggunaan
Cara Pertama

Login ke blog sobat
Klik Rancangan lalu pilih Tambah Gadget
Masukkan Kode di bawah ini
Simpan

Cara Kedua

Login ke blog sobat
Klik Rancangan
Edit HTML
Masukkan kode berikut tepat di atas kode ]]></b:skin>
Simpan Template

Catatan

Cara Pertama ane rasa lebih mudah dan singkat. Keuntungan lainnya anda tidak perlu mengedit HTML karena anda masukkan menjadi gadget. Bila ingin menghapusnya akan mudah nantinya. Tapi terserah anda ingin memilih cara yang mana.
Anda bisa memasukkan kode berikut semuanya atau salahtunya saja...untuk keterangan penggunaan silahkan anda baca pada bagian bawah posting ini.....baca aja sampai habis gan biar ente mengerti....siiibbbb????

Kode yang di gunakan pada saat anda memposting...petunjuknya silahkan baca pada keterangan di bawah posting ini....lanjut bacanya yaaaa.....makasih

<div class="testtransform geseratas">TRANSISI ATAS</div>
<div class="testtransform geserbawah">TRANSISI BAWAH</div>
<div class="testtransform geserkanan">TRANSISI KANAN</div>
<div class="testtransform geserkiri">TRANSISI KIRI</div>
<div class="testtransform gesernantas">TRANSISI KANAN ATASt</div>
<div class="testtransform geserkibaw">TRANSISI KIRI BAWAH</div>
<div class="testtransform bg">TRASFORMASI BACKGROUND</div>
<div class="testtransform border">TRASFORMASI BORDER</div>
<div class="testtransform bgborder">TRASFORMASI BACKGROUND DAN BORDER</div>
<div class="testtransform opa">TRASFORMASI OPACITY</div>
<div class="testtransform ukuran">TRASFORMASI UKURAN</div>
<div class="testtransform gabungan">TRASFORMASI GABUNGAN</div>
<div class="testtransform-2" style="float:none;margin:20px auto;">TRASFORMASI-2</div>

KETERANGAN

Kode CSS

<style type="text/css">
.testtransform, .testtransform-2 { /* kode rancangan dasar tampilan keseluruhan */
width: 230px; /* besar kotak */
border: 5px solid green; /* warna border sialhkan ganti dengan warna anda */
-webkit-transition: all 1s ease-in-out; /* warna merah transisi beberapa browser */

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

font:18px Times; /* besar font dan jenis font silahkan anda ganti */
font-weight: bold; /* font dengan cetak tebal */
color: #FF0000; /* warna font bisa anda ganti dengan punya anda */
margin: 20px; /* jarak tulisan dengan sisi kiri */
text-align: center; /* letak tulisan di tengan */
padding: 10px; /* jarak tulisan dengan border atas dan bawah */
border-radius: 12px; /* merah durasi kelengkungan border untuk beberapa browser */

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

background: #A9D0F5; /* warna background bisa anda ganti dengan warna anda */
}

.testtransform-2 {

width: 180px;

height: 300px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBp51SvZ07cRir5cQ5In1YaBLWGcK7P_mtPXfNk-tfoYrZotCMHHDuv2FkwR8Kq_bH51H6-BIsyJh2nNy58JDVaDjfOjck9VoU2PaVPPCSpdIOr0mSV0yrbLgI9vmQubNzk6lfyBOW11_/s1600/gadis+muda+seksi+hot+01.jpg) /* silahkan ganti dengan fotonya */

center no-repeat;

opacity: 0.35;

-moz-transition: all 1s ease;

-webkit-transition: all 1s ease;

-o-transition: all 1s ease;

transition: all 1s ease;

}

_____kode untuk testtrasform-2_____

.geseratas:hover {

-webkit-transform: translate(0,-20px);

-moz-transform: translate(0,-20px);

-o-transform: translate(0,-20px);

}

_____kode untuk transisi atas_____

.geserbawah:hover {

-webkit-transform: translate(0,20px);

-moz-transform: translate(0,20px);

-o-transform: translate(0,20px);

}

_____kode untuk transii bawah_____

.geserkanan:hover {

-webkit-transform: translate(50px,0px);

-moz-transform: translate(50px,0px);

-o-transform: translate(50px,0px);

}

_____kode untuk transisi kanan_____

.geserkiri:hover {

-webkit-transform: translate(-50px,0px);

-moz-transform: translate(-50px,0px);

-o-transform: translate(-50px,0px);

}

_____kode untuk transisi kiri_____

.gesernantas:hover {

-webkit-transform: translate(50px,-20px);

-moz-transform: translate(50px,-20px);

-o-transform: translate(50px,-20px);

}

_____kode untuk transisi kanan atas_____

.geserkibaw:hover {

-webkit-transform: translate(-50px,20px);

-moz-transform: translate(-50px,20px);

-o-transform: translate(-50px,20px);

}

_____kode untuk transisi kiri bawah_____

.bg:hover {

background: #8181F7;

}

_____kode untuk tranformasi background_____

.border:hover {

border: 5px solid red;

}

_____kode untuk transformasi border_____

.bgborder:hover {

background: #BEF781;

border: 5px solid red;

}

_____kode untuk transformasi background dan border_____

.opa:hover {

opacity: 0.2;

}

_____kode untuk transformasi opacity_____

.rotasi:hover {

-webkit-transform: rotate(330deg);

-moz-transform: rotate(330deg);

-o-transform: rotate(330deg);

}

_____kode untuk transformasi rotasi_____

.ukuran:hover {

-webkit-transform: scale(1.3);

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

}

_____kode untuk transformasi ukuran_____

.gabungan:hover {

color: #AEB404;

background: #AC58FA;

border: 5px solid #FA5858;

opacity: 0.9;

-webkit-transform: scale(1.3) rotate(380deg) translate(30px,-20px);

-moz-transform: scale(1.3) rotate(380deg) translate(30px,-20px);

-o-transform: scale(1.3) rotate(380deg) translate(30px,-20px);

}

_____kode untuk transformasi gabungan_____

.testtransform-2:hover {

opacity: 1;

-moz-transform: scale(1.4) rotate(675deg) translate(25px);

-webkit-transform: scale(1.4) rotate(6755deg) translate(25px);

-o-transform: scale(1.4) rotate(675deg) translate(25px);

transform: scale(1.4) rotate(675deg) translate(25px);

}

_____kode untuk transformasi transform-2_____

</style>

Pilih salah satu kode untuk dimasukkan, misalkan anda memilih TRANSISI ATAS maka kodenya menjadi seperti di bawah ini.

<style type="text/css">
.testtransform, .testtransform-2 {
width: 230px;
border: 5px solid green;
-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

font:18px Times;
font-weight: bold;
color: #0000CC;
margin: 20px;
text-align: center;
padding: 10px;
border-radius: 12px;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

background: #FFFF99;
}

.geseratas:hover {

-webkit-transform: translate(0,-20px);

-moz-transform: translate(0,-20px);

-o-transform: translate(0,-20px);

}

Ketika anda ingin menggunakannya dalam postingan, masuk ke Edit HTML sebelah Compose kanan atas posting lalu masukkan kode di bawah ini (panggil kode)

<div class="testtransform geseratas">TRANSISI ATAS</div>

Silahkan ganti tulisan TRANSISI ATAS dengan tulisan yang anda inginkan atau masukkan gambar. Untuk memasukkan gambar contoh kodenya seperti berikut.

<div class="testtransform geseratas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSAlmLrlS4nPnFD5GwtdcYUD50Ljobr_iMYtjzKkEUpmKncskxFT5wb_jllD-gGD033aBnMObEBck_pIbjc-1K3gtU7TGt__zEYuJsgGr0hzwuBoU9lRc3SDzk4a9TPpsuFNS9tRwUkww/s1600/gadis+muda+seksi+hot+02.jpg"></img></div>

Ok gan...cukup sampai di sini dulu, kalau masih kurang...jangan segan-segan komentar atau meninggalkan pesan lewat Buku Tamu atau langsung lewat emal...tapi kasih tau lagi di buku tamu kalau anda sudah mengirim pesan lewat email yaaa....Makasih dan jangan lupa Comment nnnyyyuuuuuu.....

Adsense Content. bottom of article

Trick Untuk Blogger

CSS3 Transisi dan Transformasi

If You Like This Post, Share it With Your Friends & Peers

Related Posts by Categories

0 comments:

Post a Comment

Feedjit