Oke, kali ini kita akan mencoba membahas tentang trik dan cara membuat gambar berubah bentuk dengan CSS3. Dengan sentuhan CSS3, objek mati bisa kita manipulasi bentuk sesuai dengan keinginan kita, misalnya gambar kotak, kita bisa buat animasi menjadi lingkaran tentunya dengan sebuah action, bisa berupa sorotan (hover) atau klik. Dan kali ini kita akan mencoba membuat sebuah gambar dan kemudian gambar tersebut akan berubah manakala disorot oleh kursor.
Bisa lihat contoh di bawah ini :
Nah, bagaiamana cara membuatnya? Sangatlah simple. Baiklah, silahkan perhatikan langkah demi langkah di bawah ini :
1. Buat sebuah halaman dengan ekstensi *.html via aplikasi text editor kesayangan anda.
2. Tuliskan script html di bawah ini :
<!DOCT TYPE HTML>
<head>
<title> Object Manipulation </title>
</head>
<body>
</body>
</html>
Nah, pada point ke dua ini, kita telah berhasil membuat sebuah kerangka halaman web sederhana dengan bantuan HTML.
3. Langkah selanjutnya adalah tentukan sebuah object dengan mengetikkan script di bawah ini tepat di bawah tag <body>.
<div class="sorot">
</div>
Pada point ke tiga, kita telah menentukan sebuah object pada halaman web kita ini. Namun object tersebut tidak akan terbaca sempurna jika kita tidak memberikan style padanya. Maka dari itu, kita akan menambahkan sentuhan CSS.
4. Selanjutnya, silahkan buat script di bawah ini tepat di atas tag </head>
<style>
.sorot { width: 300px; height: 300px;
/* Menjadikan border pojok bawah sebelah kanan melengkung 190 piksel */
-webkit-border-bottom-right-radius: 190px;
-moz-border-bottom-right-radius: 190px;
-0-border-bottom-right-radius: 190px;
border-bottom-right-radius: 190px;
/* Menjadikan border pojok atas sebelah kiri melengkung 190 piksel */
-webkit-border-top-left-radius: 190px;
-moz-border-top-left-radius: 190px;
-0-border-top-left-radius: 190px;
border-top-left-radius: 190px;
border: 9px solid black;
background: green;
}
</style>
5. Pada point ke 4, bisa kita lihat bahwa object class sorot telah ditentukan style-nya yaitu ukuran panjangxlebar nya adalah 300 piksel dengan warna hijau, garis tepi tebal berwarna hitam dan kelengkungan sudut yang telah ditentukan.
Di sini kita bisa melihat bahwa object awal kita adalah yang tergambar pada point 5. Nah, tutorial kita kali ini adalah mengubah bentuk object menjadi bentuk lain. Dan kali ini kita coba merubah radius kelengkungan sudutnya saja. Silahkan perhatikan langkah selanjutnya di bawah ini :
6. Letakkan script CSS3 berikut tepat di atas tag </style> :
.sorot:hover {
/* Menjadikan border pojok bawah sebelah kanan melengkung 70 piksel */
-webkit-border-bottom-right-radius: 70px;
-moz-border-bottom-right-radius: 70px;
-0-border-bottom-right-radius: 70px;
border-bottom-right-radius: 70px;
/* Menjadikan border pojok atas sebelah kiri melengkung 70 piksel */
-webkit-border-top-left-radius: 70px;
-moz-border-top-left-radius: 70px;
-0-border-top-left-radius: 70px;
border-top-left-radius: 70px;
background: blue;
border: 9px solid yellow;
}
Kita telah berhasil menentukan object ke dua untuk memanipulasi object kita di atas, dengan radius kelengkungan hanya mencapai 70 piksel dengan warna biru serta border tebal berwarna kuning jika object sebelumnya disorot oleh kursor.
Jika sudah, silahkan save file anda dan jalankan di web browser anda.
Namun sedikit tambahan bahwa script di atas akan merubah bentuk object dengan kecepatan 1 detik. Dan di bawah ini adalah point terakhir yaitu bagaimana cara memberikan jeda waktu sehingga perubahan object bisa sedikit terlihan bagus atau biasa dikenal dengan sebutan slow motion.
7. Tambahkan script di bawah ini tepat seletah style ".sorot {" :
-webkit-transition: 1.1s;8. Simpan dan jalankan di web browser.
-moz-transition: 1.1s;
transition: 1.1s;
Sebagai catatan saja, script di atas bisa lancar berjalan jika dioperasikan menggunakan web browser Google Chrome dan Mozilla Firefox.
Bagaimana, seru kan bermain CSS3!
Demikian pembahasan kita kali ini, silahkan lakukan improvisasi sesuai dengan daya imajinasi kalian sendiri. Selamat belajar dan semoga bermanfaat ya :)
Tidak ada komentar:
Posting Komentar