Mengekspresikan TI

Mengapa saya ingin memahami ini? Humm ...!

Sebagian besar penulis CSS akan setuju bahwa properti Klip CSS mungkin salah satu yang paling sering digunakan un-properti CSS. Itu sangat benar bagi saya juga dan yang paling senang untuk mengabaikan hal itu, sampai aku mulai memodifikasi MooTools DUA Knob (Pin) Komponen Slider (dengan Indikator Range) .

Ada saran yang baik dari salah satu pengguna untuk memodifikasi komponen Komponen Slider menggunakan gambar backgroud terpotong (melawan sebuah divisi lebar variabel) untuk menunjukkan kisaran slider. Jadi tiba saatnya saya untuk memasuki menyenangkan tapi un-charter (untuk saya ofcourse) perairan properti Klip CSS.

Nah! betapa sulitnya bisa? Tidak sama sekali ... YA dan TIDAK. Sintaks untuk menggunakan properti Klip CSS adalah cukup tegak tapi arti / usuage sedikit croocked. Dengan memori seperti saya, setiap kali saya duduk untuk pengerjaan ulang pada Script Slider saya ... saya harus tokeep merujuk kembali ke penggunaan properti CLIP, untuk mengingatkan diri logika bahwa saya telah dibuat dalam script saya .... Oleh karena itu! diperkirakan pena ke bawah, dengan harapan untuk mengingatnya masa depan (dan juga untuk kepentingan mereka yang tampaknya boggled oleh Properti Klip CSS)

Apa Klip CSS lakukan?

Klip adalah bagian dari modul efek visual dari CSS 2.1. Secara sederhana, tugasnya adalah untuk menempatkan jendela terlihat di atas sebuah obyek yang sedang dipotong, maka kliping gambar dan membuat thumbnail tanpa harus membuat file-file tambahan (saya sudah menempatkan fitur ini untuk penggunaan yang lebih baik dalam Komponen Slider )

Menggunakan properti Klip CSS, Anda dapat membuat kliping menggunakan bentuk rect. Seperti banyak Properti CSS lainnya (seperti margin, dll padding), menggunakan rect memerlukan empat koordinat Atas, Kanan, Bawah, Kiri (TRBL). Sifat croocked properti ini mencerminkan bila anda melihat lebih dekat bagaimana klip menghitung wilayah kliping, menggunakan keempat koordinat (mengirim otak menjadi melemparkan untuk sementara waktu). Sekarang untuk membingungkan Anda bagian bawah mulai dari atas, dan kanan dimulai dari kiri. . Anda lihat apa yang saya katakan? .... Oleh karena itu posting ini ...

Ini sedikit kebingungan dapat dengan mudah menghilang, dengan penjelasan visual dari properti Klip / rect CSS seperti di bawah ini!

CSS Klip Persyaratan

Tugas kami sudah mulai adalah untuk klip gambar Miniatur berikut ke gambar persegi mencari (dan juga gambar sudut lebar)

Asli Thumbnal / Gambar	Klip Persyaratan untuk sqaure Thumbmail

CSS Klip Hasil

Lihat Demo | Unduh sourcefiles