Properties Clip CSS

Gambar yang ingin ditampilkan di sebuah website terkadang ukurannya terlalu besar atau mungkin sudah pas namun ada beberapa yang dihilangkan. Ya, mau bagaimana lagi. Alhasil kita harus bertemu Photoshop untuk mengeditnya. Nah, sebenarnya tanpa bertemu Photoshop pun kita bisa tetap menampilkan gambar yang seuai dengan keinginan kita. Dalam kasus ini, gambar yang ditampilkan akan terpotong.

Lalu bagaimana cara membuatnya? Mudah saja. Tak usah menengok Editor Gambar seperti Photoshop. Cukup dengan sematkan kata "clip" di CSS, maka gambar akan terpotong. Sesingkat itu? Tentu saja tidak, itu hanyalah propertiesnya. Yang perlu dilihat adalah isi dari "value"nya. Langsung lihat saja yuk!

Ini adalah gambar aslinya :

Sekarang kita potong gambar ini menjadi setengah :

See the Pen ckEoy by Dumet_School (@dumet_school) on CodePen.

Bagaimana? Apakah berhasil?

Sama seperti margin dan padding maksud yang ada di dalam rect adalah (atas, kanan, bawah, kiri). Paham yaa. Dan properties clip ini support dengan browser minimal Chrome 1.0, IE 8.0, Firefox 1.0, Safari 1.0 dan Opera 7.0.

Semoga bermanfaat :)