Mengenal CSS Clip Property

Hello sobat,sudah cukup puaskah dengan template" yang baru saja saya buat kemarin?
nah kali ini saya akan menunjukan beberapa Analisa saya tentang dasar-dasar CSS Clip property yang mungkin menjadi kategori tingkat menengah-lanjut dari sekian banyak css property yang diketahui,karena masih sangat jarang css ini digunakan penerapanya,tetapi kalau kita akali,mungkin sangat bermanfaat.


Apakah itu CSS Clip property,dan apakah fungsinya?
Awalnya juga saya kurang mengerti tentang css ini,tetapi setelah melihat hasil contoh penggunaanya,ternyata dapat memotong gambar,atau kalau menurut saya sebagai masking pada gambar karena gambar bukan benar-benar dipotong tetapi hanya menampilkan sebagian gambar yang dapat diatur berapa pixel gambar dipotong dari sisi atas,bawah,kanan dan kiri.
penggunaan css ini mendukung pada semua browser dengan versi terbaru.

Seperti apakah perintah CSSnya ,contohnya seperti dibawah ini :

clip: rect(50px, 450px, 250px, 200px);

Yang berarti :

clip: rect(Atas, kanan, bawah, kiri);

Apa maksudnya saya artikan atas,kanan bawah dan kiri?
sebenarnya cara kerjanya sama dengan padding,tetapi difungsikan pada css clip property.yaitu batas jarak pada suatu objek.

Menggunakan css Clip property akan bekerja dengan syarat posisi objek/element harus absolute.jika tidak,maka css tidak akan bekerja.dan terkadang jika salah satu atau 2 padding css clip yang bernilai 0,maka gambar tidak akan tampil.

CSS

Position:absolute;

CONTOH :

Gambar awal tanpa css clip Property.




Sesudah menggunakan css clip Property.

CSS

clip: rect(50px, 450px, 250px, 200px);
position: absolute;

HTML

<div class="joclip">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" /></a></div>

Berdasarkan Contoh gambar diatas yang menggunakan css clip property,sebenarnya hampir mirip dengan fungsi autoreadmore yang bisa mengatur ukuran foto pada posting,tetapi bedanya dengan css ini,kita dapt mengatur sisi gambar yang mana yang akan dipotong,tetapi tergantung dari ukuran foto itu juga,pada contoh gambar diatas berukuran 608px x 346px yang berarti gambar yang akan dipotong harus ada batasnya juga,misalkan kita memasang foto dengan ukuran kecil 300px,tetapi nilai css clipnya kita beri yang besar lebih dari 300px,maka gambar tersebut tidak akan ada yang dipotong.


Oia,karena posisi objek diatas absolute,artinya posisi objek itu bebas dan dapat menutupi objek dibelakangnya,tetapi karena saya tahu posisi membuat objek ini posisinya bebas,maka saya menambahkan html diluar gambar ini dengan posisi relative.

Dan susunan htmlnya menjadi seperti dibawah ini.

HTML

<div class="joclipwarp">
<div class="joclip">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" /></a></div>
</div>

CSS joclip warp,sebagai pembatas ruang joclip,sehingga objek tidak akan keluar batas terhadap css ini.

.joclipwarp {
position: relative;
width: 636px;
min-height:400px;
height: auto;
border: 1px dashed #ddd;
}

nah,bagaimana kalau kita coba rubah nilainya menjadi :
clip: rect(200px, 0, 0, 400px);

Hasilnya:

Ta-da,hasilnya tidak ada~
karena itu saya katakan sebelumnya,jika ada salah 1 atau 2 nilai padding yang 0,maka gambar tidak muncul.

Ayo kita coba tes lagi menjadi clip: rect(40px, 260px, 150px, 80px);

dan hasilnya :

Nah,berdasarkan Hasil diatas,bisa saya gambarkan bagaimana bisa seperti itu,berikut hasil analisa saya :

Benarkah? mungkin hasil diatas bisa berbeda dengan refrensi web lain,tapi hasil diatas adalah hasil berdasarkan percobaan~

Untuk meyakinkan analisa saya,silakan anda menggunakan tools developer atau dengan klik kanan pada objek gambar diatas,lalu pilih inspect element pada html joclip3 dan css .joclip3 gambar tersebut,dan coba ubah nilainya,lalu perhatikan sisi mana yang akan mengecil atau memanjang.

Setelah saya coba mengganti" nilainya,ternyata memang benar,tetapi ada kala jika nilai padding pada bagian kiri lebih besar daripada padding kanan,maka gambar akan benar-benar hilang seperti pada contoh pertama tadi.begitu juga dengan padding atas dan bawah.

Hasil contoh :

yah,bisa saya simpulkan bahwa menggunakan css ini kita tidak bisa asal menebak berapa nilai padding pada css clip property,karena bisa saya gambar malah tidak muncul.dan saya rasa bagian padding yang sangat penting terletak pada bagian bawah dan kanan saja,mengapa?karena ketika saya mengganti nilainya menjadi seperti ini

clip: rect(0px, 640px, 360px, 0px);

Yang terjadi adalah gambar jadi full dan tidak terpotong,contoh bisa dilihat pada demo selanjutnya.


Nah,itu tadi baru dasarnya untuk pemotongan gambar,bagaimana kalau kita modifikasi dengan menambahkan hover efek?

hasilnya bisa dilihat dibawah ini:

CSS

.joclip1 {
position: absolute;
clip: rect(50px, 450px, 250px, 200px);
-webkit-transition: all 1s ease;
display: block;
}
.joclip1:hover {
clip: rect(0px, 640px, 360px, 0px);
}

HTML

<div class="joclip1">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnYvq8nBdQzSJfsD6yy4tLSpoublTtfRApe02lwJwR4zJ06RMr8NwjJV8nt_b6wqst865GZlyjUbuOfYEmAgpvIsSJ8qWSOlSdms5x4x_h8uu9Ov8pyP5iAfMEn91Xuo7OBu3OLra6KyC/s1600/tamako-market.jpg" /></a></div>

kenapa pada contoh diatas saat dihover,ukuran menjadi full? seperti yang saya katakan tadi diatas,dengan css clip yang saya letakan pada hover efek,serta css transition 1 sekon/detik agar mendapatkan timing animasi yang diinginkan:

clip: rect(0px, 640px, 360px, 0px);

Bagian padding bawah dan kanan paling berpengaruh untuk membuat gambar tidak terpotong atau membuat nilainya lebih besar daripada ukuran gambar.jika kita coba sebaliknya misal 640px, 0px, 0px, 360px ,maka gambar tidak akan muncul yang artinya masking menutupi seluruh gambar.



next level? saya rasa segini dulu hasil analisa saya,karena penjelasanya dapat lebih rumit lagi,sebenarnya karena posisi objek tersebut absolute,saya jadi dapat banyak ide untuk animasi hover efek menggunakan css clip property dengan menambahkan background warna,border,margin,posisi left,top,right,bottom dan dapat di gabung/kaleborasikan dengan fungsi css lainya dengan teknik css lebih lanjut,mungkin bisa menjadi photo gallery,thumbnail,slider dengan full hover effeck,dll. tapi jika anda coba mencari sumber informasi atau refrensi di google,sudah ada banyak yang mengembangkan trik ini,misal :

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

http://www.ibloomstudios.com/articles/misunderstood_css_clip

http://www.w3schools.com/cssref/pr_pos_clip.asp

http://1plusdesign.com/articles/css-clip-property-inline-image-sprites

Demikian penjelasan saya mengenai CSS Clip Property,mungkin agak bingung dengan penjelasan saya,tetapi anda dapat juga melihat tutorial dari web lain mengenai css ini.salah atau benar,tidak masalah,yang terpenting kita dapat belajar sedikit dan memahami cara kerja css ini clip ini,dan menerapkanya pada template" saya selanjutnya.ingin belajar juga? silakan anda praktekan sendiri di rumah~xD
Arigatou Gozaimasu~