10 (Lebih Banyak) Trik CSS yang Mungkin Anda Abaikan

Ada banyak cuplikan CSS yang dapat digunakan pengembang web untuk mencapai hasil tertentu, dan kemudian ada trik CSS yang dapat Anda gunakan untuk hal-hal seperti menyelaraskan konten secara vertikal. Dengan CSS sebagai entitas yang terus berkembang, berkali-kali kami menemukan trik CSS keren yang menyenangkan untuk diketahui.

Dalam posting hari ini, saya memperkenalkan Anda 10 atribut dan trik CSS lainnya yang mungkin tidak Anda ketahui.

1. Tulis Secara Vertikal

Ada atribut CSS yang disebut mode penulisan yang menerima salah satu dari tiga nilai ini; horizontal-tb, vertikal-rl dan vertikal-lr.

horizontal-tb adalah default dan itu menyebabkan tipikal aliran teks horizontal kiri ke kanan dalam suatu elemen.

Itu vertikal-* Namun nilai untuk aliran blok vertikal, menyebabkan teks ditulis dari atas ke bawah oleh browser. Di vertikal-rl, baris baru ditambahkan di sebelah kiri yang sebelumnya dan sebaliknya untuk vertikal-lr.

Ini berguna untuk menampilkan bahasa seperti Cina dan Jepang yang biasanya ditulis dari atas ke bawah dan juga untuk saat Anda ingin menampilkan teks secara vertikal untuk menghemat ruang horisontal, seperti dalam header tabel.

catatan: Jika Anda ingin mengontrol arah setiap huruf, Anda dapat menggunakan orientasi teks untuk membalikkannya atau menyamping, sesuai keinginan.

 -mode penulisan webkit: vertikal-rl; -ms-writing-mode: tb-rl; mode penulisan: vertikal-rl; 

2. Gunakan Kembali Nilai Warna

Kata kunci warna saat ini membawa nilai warna atribut dan dapat digunakan dalam atribut lain yang menerima nilai warna seperti Latar Belakang.

div background: linear-gradient (90deg, currentColor 50%, black 50%);… warna: # FFD700; / * currentColor adalah # FFD700 * / 

3. Blend Backgrounds

Suatu elemen dapat memiliki lebih dari satu latar belakang (warna latar belakang dan banyak gambar latar belakang). Itu latar belakang-campuran-mode memadukan semuanya bersama sesuai mode blending yang diberikan. Ada total 16 mode campuran saat ini.

background-campuran-mode: perbedaan; 

4. Blend Elements

mix-blend-mode memadukan konten dan latar belakang elemen yang tumpang tindih. Chrome tampaknya tidak mendukung semua mode walaupun Firefox mendukungnya.

campur-campur-mode: warna; 

Saya mengambil dua elemen, sebuah img menunjukkan gambar bunga mawar dan a menjangkau dengan latar belakang grafis, susun mereka dan terapkan beberapa mode campuran-campuran.

5. Abaikan Acara Pointer

Anda bisa membuat elemen tidak menyadari peristiwa pointer dengan menggunakan atribut tunggal yang disebut pointer-events. Dengan memberi pointer-events nilai dari tidak ada dalam suatu elemen, ini mencegahnya dari menjadi target untuk menunjuk peristiwa. Termasuk dukungan IE11 +.

Dalam demo berikut, ada kotak centang di bawah dua gambar yang saling bertumpuk. Kedua gambar membawa pointer-events: tidak ada, memungkinkan kita mengklik kotak centang yang terkubur di bawahnya. Berdasarkan keadaan kotak centang yang dicentang, gambar yang diinginkan ditampilkan sementara yang lainnya disembunyikan.

6. Hiasi Kotak Split

Biasanya ketika sebuah kotak terbelah (seperti ketika elemen inline menyaksikan garis pecah), tepi-tepi bagian yang terbelah tidak memiliki gaya kotak apa pun dan terlihat diiris. Untuk menghindarinya, Anda bisa menggunakan box-decoration-break: clone.

Sekarang untuk menindaklanjutinya dengan contoh dan pengingat "Natal di cakrawala" awal, inilah daftar Santa Rusa semua diketik dalam satu menjangkau! Ho! Ho! Ho!

Catatan: Meskipun IE modern mendukung kotak-hiasan-istirahat, di tepi batas bagian split, rendering tidak mulus dan latar belakang terlihat diiris. Tapi itu membuat bayangan kotak baik, itulah sebabnya saya menggunakan bayangan kotak untuk perbatasan dan latar belakang. Ada juga tidak adanya padding horizontal di tepi di IE yang Anda mungkin ingin mengisi dengan spasi.

7. Perkecil Elemen Tabel

visibilitas: kolaps adalah atribut yang dibuat hanya untuk elemen tabel, seperti baris dan kolom. Jika digunakan pada hal lain, itu akan berperilaku seperti visibilitas: disembunyikan. Chrome memperlakukannya seperti tersembunyi bahkan untuk elemen tabel.

Ketika Anda menetapkan visibilitas: kolaps pada elemen tabel, itu disembunyikan dan ruangnya diisi oleh konten terdekat - seperti bagaimana ia akan berperilaku menggunakan display: tidak ada sebagai gantinya.

Tapi tidak seperti itu display: tidak ada yang mengubah tata letak tabel setelah menghapus ruang, tata letak tetap sama visibilitas: kolaps. Anda dapat melihat cara kerjanya lebih detail di sini.

8. Buat Kolom

Anda dapat membuat tata letak kolom untuk konten Anda menggunakan kolom atribut. Ini memungkinkan Anda menentukan berapa banyak kolom (hitungan kolom) dan bagaimana lebar masing-masing kolom (lebar kolom) harus dirender dalam suatu elemen.

Jika konten selain teks, seperti misalnya gambar, maka Anda harus mengingat lebarnya masing-masing untuk kolom. Untuk contoh berikut, saya hanya menggunakan hitungan kolom untuk menentukan berapa banyak kolom yang saya inginkan.

-webkit-kolom-count: 2; -moz-kolom-hitung: 2; jumlah kolom: 2; 

9. Buat Elemen Resizeable

Suatu elemen dapat dibuat dapat diubah ukurannya (secara vertikal, horizontal atau keduanya) dengan atribut CSS3 mengubah ukuran . Resizeability di a textarea dapat dinonaktifkan menggunakan yang sama.

mengubah ukuran: vertikal; ukuran: horisontal; mengubah ukuran: keduanya; ukuran: tidak ada; 

10. Buat Pola

Mungkin ada beberapa gradien CSS3 (baik linear & radial) untuk satu elemen dan mereka dapat ditumpuk satu sama lain untuk membuat pola. Ini memungkinkan kita untuk buat latar belakang yang bagus untuk elemen tanpa menggunakan gambar eksternal. Membuatnya berfungsi mungkin membutuhkan sedikit latihan.