◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XTechnique Crop Image Using CSS
Technique Crop Image Using CSS yaitu memotong image memakai atribut CSS
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

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/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE