Video: Cara Membuat Tinggi Kolom Sama Menggunakan Jquery 2024
Alih-alih harus menggunakan hingga empat gambar terpisah untuk memberi ilusi bentuk melengkung di situs Anda, dengan CSS3 Anda sekarang dapat membuat wadah dengan sudut melengkung! Inilah kodenya, yang memiliki deklarasi CSS3 yang didukung penuh di bagian atas diikuti oleh duplikat yang diawali untuk browser lainnya:
#box {border-radius: 20px; / * untuk Mozilla Firefox * / -moz-border-radius: 20px; / * untuk Safari & Google Chrome * / -webkit-border-radius: 20px;}
Anda dapat menggunakan gaya border-radius pada objek apa pun termasuk gambar persegi panjang. Semakin besar jumlah piksel, semakin lebar tepi.
Sebelum CSS3, jika Anda ingin memiliki beberapa kolom di halaman Anda, Anda memerlukan elemen pelampung di dalam kontainer atau posisi mereka secara mutlak relatif terhadap wadah induk. Sekarang, dengan CSS3, Anda dapat dengan mudah membuat beberapa kolom dalam satu wadah dengan menggunakan properti kolom dengan menetapkan nilai untuk jumlah kolom dan lebar celah, baik dengan atau tanpa aturan vertikal di antara keduanya.
# box1 {/ * untuk peramban yang tidak memerlukan awalan * / kolom-hitungan: 4; kolom-gap: 30px; kolom-rule: 3px solid #fff; / * untuk Mozilla Firefox * / -moz-column-count: 4; -moz-column-gap: 30px; -moz-column-rule: 3px solid #fff; / * untuk Safari & Google Chrome * / -webkit-kolom-hitungan: 4; -webkit-kolom-gap: 30px; -webkit-kolom-aturan: 3px solid #fff;}
Ilustrasi menunjukkan perbandingan satu lapisan dengan menggunakan gaya multikolumn dan tata letak lain tanpa kolom. Untuk informasi lebih lanjut tentang bagaimana Anda dapat lebih mengontrol tampilan beberapa kolom Anda, lihat Quirksmode.