Selasa, 12 Maret 2013

Technique Crop Image Using CSS

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. Image yang 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

mobileGambar 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
mobile

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/

1 komentar:

  1. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!



    melbourne web designer

    BalasHapus