Informasi bermanfaat bagi blogger yang kontennya berisikan sebuah gambar, dengan width & height telah dipatok paten, kemudian gambar tersebut akan diterangkan detail-detail bagian per bagian! Biasanya blog komersil dagangan ;)) Pasti kalian bingung dengan apa yg dimaksud sama AA Koben :-/ Jadi begini...
Ada sebuah image dengan spesifikasi 500px x 333px. Kemudian disini kita akan memotong bagian dari full image menjadi potongan-potongan pendek.
Gambar mobile diatas akan kita crop menjadi 8 detil bagian menggunakan gambar yang sama!
Ada sebuah image dengan spesifikasi 500px x 333px. Kemudian disini kita akan memotong bagian dari full image menjadi potongan-potongan pendek.
Imageyang dipakai tetap memakai satu! Teknik crop image using CSS <- taraaa...tema postingan kali ini :) Memang jika dijelaskan memakai kata-kata sedikit loading, lihat demo biar jelas.
Full Image
Gambar mobile diatas akan kita crop menjadi 8 detil bagian menggunakan gambar yang sama!UPDATE
Ternyata kita dapat melakukan trik ini dengan memakai CSS clip Property
Contoh
Resource: http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class
http://djogzs.blogspot.com/2013/01/mengenal-css-clip-property.html
Extras: http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/
Ternyata kita dapat melakukan trik ini dengan memakai CSS clip Property
Contoh
Resource: http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class
http://djogzs.blogspot.com/2013/01/mengenal-css-clip-property.html
Extras: http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...