Menggunakan Clip Property pada CSSBy Arul Ajeh - Hay berjumpa lagi sahabat setia ATC Arul Ajeh, Pada Artikel kali ini dengan judul Menggunakan Clip Property pada CSSBy Arul Ajeh, kami telah menyiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi artikel Artikel Web Programming, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Menggunakan Clip Property pada CSSBy Arul Ajeh
link : Menggunakan Clip Property pada CSSBy Arul Ajeh

Menggunakan Clip Property pada CSSBy Arul Ajeh

Anda mungkin pernah mendengar tentang properti clip pada CSS. Property ini memiliki beberapa fitur unik, dan pada artikel ini saya akan menjelaskan bagaimana menggunakan property ini. Pada bagian akhir artikel, Anda bisa menemukan link menuju ke halaman demo di mana terdapat beberapa foto yang digunakan untuk membuat animasi dari properti ini.

Sintaks

Untuk menggunakannya, Anda bisa menulis kode seperti di bawah ini:

1
.selector{




2
    position: absolute;




3
    clip: rect(110px, 160px, 170px, 60px);




4
}

Hal pertama yang perlu diketahui tentang clip adalah properti ini hanya dapat diterapkan pada elemen dengan position: absolute. Syarat tersebut mungkin menjadi kelemahan dari properti ini, tetapi terlepas dari hal itu, properti ini tetap menarik untuk dijadikan eksperimen.
Bagian selanjutnya pada sintaks di atas adalah properti clip itu sendiri. Nilainya berupa jenis shape yang telah ditentukan, atau “auto”. Nilai “auto” merupakan default untuk semua elemen. Jika anda mendefinisikan suatu jenis shape (saat ini hanya persegi panjang/rect yang diizinkan), Anda bisa melakukannya dengan menambahkan fungsi “rect ()”, dengan mengisi nilai yang mendefinisikan bentuk tersebut, dapat berupa nilai positif atau negatif dengan urutan top, right, bottom, left.

Nilai fungsi rect()

Nilai yang dimasukkan pada fungsi rect () mungkin membingungkan pada awalnya. Pada dasarnya nilai-nilai tersebut mewakili offset atas, kanan, bawah, dan kiri, seperti aturan pada margin dan padding. Dengan kata lain, dalam contoh di atas, nilai pertama menempatkan garis imajiner secara horizontal 110px dari atas (nilai pertama) dan 170px secara horizontal dari atas (nilai ketiga). Nilai kedua menempatkan sebuah garis imajiner 160px vertikal dari kiri, dan nilai terakhir menempatkan garis imajiner 60px vertikal dari kiri. Jika masih membingungkan Anda, mungkin gambar ini akan membantu:

Gambar di atas menggunakan semacam guide pada Photoshop untuk menunjukkan Anda di mana nilai-nilai masing-masing akan menempatkan garis imajiner secara berpotongan. Daerah yang lebih terang pada gambar adalah bagian yang akan terlihat. Sisanya akan disembunyikan. Perlu dicatat bahwa IE6 dan IE7 menfukung properti ini, tetapi bukan menggunakan koma sebagai pemisah antar nilai clipping, melainkan spasi.

Animasi Galeri Menggunakan Clip

Properti klip termasuk dalam daftar properti W3C yang bisa di-animasi-kan, seperti pada contoh berikut agar Anda bisa melihat bagaimana properti clip ini bekerja pada animasi menggunakan CSS3 transition: Lihat demo.
Sumber: http://www.impressivewebs.com

Selesai deh Artikel Menggunakan Clip Property pada CSSBy Arul Ajeh

Sekian dulu ya artikel Menggunakan Clip Property pada CSSBy Arul Ajeh kali ini, Semoga bisa memberi manfaat untuk kalian semua. Oke, sampai berjumpa lagi di artikel lainnya.

Anda saat ini membaca artikel Menggunakan Clip Property pada CSSBy Arul Ajeh dengan url http://advancedteamcode.blogspot.com/2014/04/menggunakan-clip-property-pada-cssby.html

Tweet