Artikel ini memperkenalkan 5 properti CSS yang berguna. Anda pasti sudah familiar dengannya, tapi mungkin akan jarang menggunakannya. Saya tidak berbicara tentang menantikan properti CSS3 baru, saya berbicara tentang properti CSS2 lama seperti clip, min-height, white-space, curosr dan display yang didukung secara luas oleh semua browser. Jadi jangan lewatkan artikel ini karena mungkin akan sangat berguna bagi Anda.
1. Klip CSS
Properti klip seperti topeng. Ini memungkinkan Anda untuk menutupi konten elemen halaman menggunakan persegi panjang. Untuk memotong elemen: Anda harus menentukan properti posisinya sebagai absolut, lalu menentukan nilai atas, kanan, bawah, dan kiri relatif terhadap elemen tersebut.
.gif)
Contoh kliping gambar ( demo )
Contoh berikut menunjukkan cara menggunakan properti clip untuk menutupi gambar. Pertama, tentukan elemen <div> sebagai position:relative, lalu tentukan elemen <img> sebagai position:absolute, dan atur nilai rect sesuai kebutuhan sebenarnya.
.gif)
.klip {
posisi: relatif;
tinggi: 130 piksel;
lebar: 200 piksel;
batas: solid 1px #ccc;
}
.klip img {
posisi: mutlak;
klip: persegi(30px 165px 100px 30px);
}
Pengubahan ukuran dan kliping gambar ( demo )
Dalam contoh ini saya akan menunjukkan cara mengubah ukuran dan memotong gambar. Gambar stok berbentuk persegi panjang dan saya ingin memotongnya hingga 50% dari ukurannya untuk membuat thumbnail format persegi. Jadi saya menggunakan properti lebar dan tinggi untuk mengubah ukuran gambar, dan properti klip untuk menutupinya. Kemudian gunakan atribut left untuk memindahkan gambar 15px ke kiri.
.gif)
.
galeri li {
mengapung: kiri;
margin: 0 10 piksel 0 0;
posisi: relatif;
lebar: 70 piksel;
tinggi: 70 piksel;
batas: padat 1px #000;
}
.galeri img {
lebar: 100 piksel;
tinggi: 70 piksel;
posisi: mutlak;
klip: persegi(0 85px 70px 15px);
kiri: -15 piksel;
}