Bayu Abdillah: Belajar css clip

Kamis, 06 Agustus 2015

Belajar css clip

Pernah mendengar tentang css yang namanya clip? Yup. Menurut saya, clip itu sama seperti masking. Yaitu menampilkan sebagian dari seluruh objek. Css ini biasanya digunakan pada gambar ataupun div. Sintaksnya seperti ini :


clip: rect(top, right, bottom, left);

Sintaks rect di atas berarti kotak. Maksudnya, kita akan me-masking berdasarkan ukuran kotak tersebut.Oh iya, saya sarankan objek yang di-masking position-nya bernilai absolute. Sebagai contoh, kita akan menggunakan gambar di bawah :

Tapi sebelumnya, kita buat div yang akan menampung gambarnya dulu. Kemudian gambarnya.


<div class="kotak">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
</div>

Setelah itu, css-nya.


<style type="text/css">
.kotak{
  width: 500px;
  height: 428px;
  border: solid 2px lime;
  background-color: gray;
}
.kotak img{
  position: absolute;
  clip: rect(50px,250px,210px,75px);
}

Kalau digabungin, lengkapnya menjadi seperti ini :


<!doctype html>
<html>
<head>
  <title>clip</title>
  <style type="text/css">
  .kotak{
    width: 500px;
    height: 428px;
    border: solid 1px lime;
    background-color: gray;
  }
  .kotak img{
    position: absolute;
    clip: rect(50px,250px,210px,75px);
  }
  </style>
</head>
<body>
  <div class="kotak">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
  </div>
</body>
</html>

Bagaimana, menarik bukan?

Ingat! Jangan biarkan right dan atau bottom bernilai nol. Jika salah satu atau keduanya bernilai nol, maka gambar atau div yang di-masking akan menghilang (gak kelihatan). Tentang berapa nilai yang harus digunakan untuk top, right, bottom, dan left, silahkan ber-eksperimen sendiri. Dengan begitu, kalian akan lebih paham.
top-nya bernilai nol.


clip: rect(0px,250px,210px,75px);

left-nya bernilai nol.


clip: rect(50px,250px,210px,0px);

right-nya bernilai nol. Atau bottom-nya bernilai nol.


clip: rect(50px,0px,210px,75px);


clip: rect(50px,250px,0px,75px);

Kalau menurut saya, right harus lebih besar daripada left dan bottom harus lebih besar daripada top. Kalian juga bisa menambahkan efek hover ataupun animasi. Sekarang, kita coba buat efek hover. Cukup menambahkan


transition: all 2s ease-in-out;


.kotak img:hover{
  clip: rect(0px,500px,428px,0px);
}

Hasil penambahannya menjadi seperti ini :


<!doctype html>
<html>
<head>
  <title>clip</title>
  <style type="text/css">
  .kotak{
    width: 500px;
    height: 428px;
    border: solid 1px lime;
    background-color: gray;
  }
  .kotak img{
    position: absolute;
    clip: rect(50px,250px,210px,75px);
  }
  </style>
</head>
<body>
  <div class="kotak">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
  </div>
</body>
</html>

Kalau mau yang lebih bagus, silahkan gunakan imajinasi kalian untuk berkreasi. Selamat berkreasi.... Masih bingung? silahkan download contohnya di sini.

Bayu Abdillah

Kamis, 06 Agustus 2015

Belajar css clip

Tidak ada komentar:

Posting Komentar