14/01/12

CSS3 | Efek Scale (Perbesaran)

CSS3 | Efek Scale (Perbesaran). Dari judulnya saja perbesaran, berarti menghasilkan perbesaran. Perbesaran seperti apa yang di hasilkan? seperti ini.


Bukan cuma gambar, tapi text juga bisa. Seperti ini

Arahkan Mouse ke sini

Bukan cuma itu saja, bahkan kotak post juga bisa. Arahkan mouse di kotak post di sini
Bisa di pasang di mana saja di dalam tag CSS anda. Sekarang yang di pertanyakan caranya? bagaimana? Step.By.Step !!!

Kode Scale yang digunakan seperti ini
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
  • -moz- di situ berfungsi untuk menampilkan scale pada browser mozzila firefox
  • -webkit- berfungsi untuk browser webkit seperti chrome, safari, dll
  • 1.05 mengartikan perbesaran hingga 1.05 dari ukuran aslinya
Dimana kita harus meletakan kode scale? di dalam tag CSS hover tentunya. Jika tidak ada tag hover yang anda inginkan maka buat sendiri. Misalnya, kotak post tidak memiliki hover maka kita harus menambahnya sendiri. Cari kode ]]></b:skin> lalu tambahkan kode ini di atasnya
.post:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
}
Nah begitu contoh sederhananya. Jika ada yang bingung atau ingin bertanya silahkan berkomentar di bawah ini saja. Terima kasih, saya akhiri wassalam
Description: Hanya Berbagi informasi tentang blogger .
Rating: 4.5