Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
Slide up
Slide down
Slide right
Slide left
Slide into the top right
Slide into the bottom left
changes in the background gradient
changes at the border
changes in the background and border
changes in the opacity
changes in scale
combination of several transformations
Memahami fungsi dan kegunaan CSS3 untuk transition-transformasi memang menjadi sesuatu hal yang baru dan aku rasa wajib bagi kita untuk mempelajarinya,terutama untuk modifikasi dan mempercantik blog. Yah ... di masa ke depan kode ini mungkin saja menjadi kode yang mampu menggantikan hebatnya javascript, misalnya (dalam beberapa fungsi tertentu). Hal yang mungkin saja terjadi menilik beberapa kehebatan yang dapat kita lihat belakangan ini. Yap ... terutama dalam bentuk animasi yang ternyata cukup menjanjikan dan menakjubkan.
KODE CSS
<style type="text/css">
.testtransform, .testtransform-2 {
width: 160px;
border: 5px solid #333;
border-top: 5px solid #999;
border-bottom: 4px solid #666;
-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: #444;
margin: 20px;
text-align: center;
padding: 10px;
background: #003000;
}
.testtransform-2 {
width: 160px;
height: 160px;
background: url(http://i1125.photobucket.com/albums/l587/negrionta/mnb.png) 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;
}
.geseratas:hover {background: #00FF00;
-webkit-transform: translate(0,-20px);
-moz-transform: translate(0,-20px);
-o-transform: translate(0,-20px);
}
.geserbawah:hover {background: #00FF00;
-webkit-transform: translate(0,20px);
-moz-transform: translate(0,20px);
-o-transform: translate(0,20px);
}
.geserkanan:hover {background: #00FF00;
-webkit-transform: translate(50px,0px);
-moz-transform: translate(50px,0px);
-o-transform: translate(50px,0px);
}
.geserkiri:hover {background: #00FF00;
-webkit-transform: translate(-50px,0px);
-moz-transform: translate(-50px,0px);
-o-transform: translate(-50px,0px);
}
.geserkananatas:hover {background: #00FF00;
-webkit-transform: translate(50px,-20px);
-moz-transform: translate(50px,-20px);
-o-transform: translate(50px,-20px);
}
.geserkiribawah:hover {background: #00FF00;
-webkit-transform: translate(-50px,20px);
-moz-transform: translate(-50px,20px);
-o-transform: translate(-50px,20px);
}
.bg:hover {
background: #222;background-color:#222;
background: -moz-linear-gradient(top, #000, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#999));
}
.border:hover {
border: 5px solid #999;
border-top: 5px solid #333;
border-bottom: 4px solid #666;
}
.bgborder:hover {
background: #00FF00;
border: 5px solid #999;
border-top: 5px solid #111;
border-bottom: 4px solid #555;
}
.opa:hover {
opacity: 0.2;
}
.rotasi:hover {
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
}
.ukuran:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
}
.color:hover {#FF0000;}
.gabungan:hover {
color: #FF0000;
background: #00FF00;
border: 5px solid #444;
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);
}
.testtransform-2:hover {url(http://img.putramakkah.01/rizky/14/02/11.jpg) center no-repeat;
opacity: 1;
-moz-transform: scale(1.4) rotate(600deg) translate(25px);
-webkit-transform: scale(1.4) rotate(600deg) translate(25px);
-o-transform: scale(1.4) rotate(600deg) translate(25px);
transform: scale(1.4) rotate(600deg) translate(25px);
}
</style>
Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
Negrionta Community
KODE HTML
<div class="testtransform geseratas">Slide up</div>
<div class="testtransform geserbawah">Slide down</div>
<div class="testtransform geserkanan">Slide right</div>
<div class="testtransform geserkiri">Slide left</div>
<div class="testtransform geserkananatas">Slide into the top right</div>
<div class="testtransform geserkiribawah">Slide into the bottom left</div>
<div class="testtransform bg">changes in the background gradient</div>
<div class="testtransform border">changes at the border</div>
<div class="testtransform bgborder">changes in the background and border</div>
<div class="testtransform opa">changes in the opacity</div>
<div class="testtransform ukuran">changes in scale</div>
<div class="testtransform gabungan">combination of several transformations</div>
<div class="testtransform-2" style="float:none;margin:20px auto;"> </div>
Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
