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

Posting ini mungkin menjadi contoh yang baik untuk frase "nenek Pengajaran menyedot telur" ... Karena ini hanya BASIC CSS Stuff. Tetapi bagi mereka, seperti saya menyadari, ini mungkin menjadi berkah tersembunyi. Saya selalu berpikir (saya bisa kehilangan pekerjaan saya karena mengatakan ini), itu HANYA mungkin menyimpan beberapa bagian dari isi halaman HTML statis (artinya, posisinya tetap ADANYA pada Geser Window), menggunakan beberapa script pintar, Melakukan semua ilmiah perhitungan untuk menemukan posisi yang dinamis, menjebak peristiwa Window.scroll dan pengaturan timeout dll

Pernah berpikir itu bisa sederhana seperti ini .... Di sini di CSS / HTML di bawah, saya memiliki empat blok statis, satu tetap ke setiap extrimities halaman, TOP, KANAN, KIRI BAWAH dan ... tentu saja ... Anda dapat memilih salah satu atau lebih jika perlu menjadi ...

CSS
Statis {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; posisi:. Ixed;
}
# Isi {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}

# Wrap {-l top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6; kanan: 0;}

HTML
id="contents"> <div Anda isi halaman utama </ div>
<div id="wrap-b" class="static">
Static Content di bagian bawah halaman
</ Div>
<div id="wrap-t" class="static">
Static Content di Atas Halaman
</ Div>

<div id="wrap-l" class="static">
Static Content pada Halaman meninggalkan
</ Div>
<div id="wrap-r" class="static">
Static Content di sebelah kanan halaman
</ Div>

Lihat sampel wroking sini

Ketika saya membaca artikel ini di A List Apart " Positioning Absolute Faux
oleh Eric Sol ", saya tidak kurang dari IMPRESSED. Saya juga tertekan majorly, menyebabkan, jujur ​​saya bertanya-tanya, mengapa cant saya datang dengan sesuatu yang hebat seperti ini.

Biasanya, ketika kita membuat layout CSS, kita menggunakan "POSISI" atau "Floats", atau kombinasi yang sangat buruk dari keduanya. Eric Sol dan timnya mendefinisikan sebelah teknik yang sempurna tipe baru dari teknik tata letak CSS, yang mereka telah dibaptis sebagai "Positioning Absolute Faux" setelah teknik kolom palsu yang mensimulasikan keberadaan kolom.

Anda tahu bahwa masalah kita semua CSS pengembang harus dengan tata letak disintegrasi (Perubahan konten tidak terduga yang menyebabkan seluruh kolom untuk membungkus, ketika kita menggunakan layout melayang) ... Nah! Sepertinya Sejarah!
Teknik tata letak masih sangat muda, dan harus dibuang ke tempat sampah oleh semua guru CSS luar sana, sebelum menjadi sebuah standar tertulis un. Saya senang untuk menggunakannya SEKARANG! ... Dan saya sudah ke tengah mengkonversi sebelumnya bermasalah / mengambang saya un-tentu layout ke dalam layout FAP sudah ... dan saya senang untuk mengatakan "kami sudah menggunakan Positioning Absolute Faux untuk situs blog juga" ... GO mencobanya, SEKARANG!

Kudos Eric!