10 (Lagi) CSS Trik Anda Mungkin Diabaikan
Terdapat banyak coretan CSS yang dapat digunakan oleh pemaju web untuk mencapai hasil tertentu, dan kemudian terdapat helah CSS yang dapat Anda gunakan untuk hal-hal seperti menjajarkan kandungan secara vertikal. Dengan CSS sebagai entiti yang sentiasa berubah, waktu dan masa lagi kita tersandung apabila trik CSS yang sejuk yang menyeronokkan untuk mengetahui.
Dalam jawatan hari ini, saya memperkenalkan anda 10 lagi atribut dan helah CSS yang mungkin anda tidak tahu.
1. Tulis Menegak
Terdapat atribut CSS dipanggil menulis-mod yang menerima salah satu daripada tiga nilai ini; mendatar-tb, menegak-rl dan menegak-lr.
mendatar-tb adalah lalai dan ia menyebabkan aliran teks mendatar khas ke kiri mendatar dalam elemen.
The menegak- * nilai bagaimanapun adalah untuk aliran blok menegak, menyebabkan teks ditulis dari atas ke bawah oleh pelayar. In menegak-rl, garisan baru ditambahkan ke kiri dari yang sebelumnya dan sebaliknya menegak-lr.
Ini berguna untuk memaparkan bahasa seperti Cina dan Jepun yang biasanya ditulis dari atas ke bawah dan juga untuk apabila anda ingin memaparkan teks secara menegak untuk menjimatkan ruang mendatar, seperti dalam tajuk jadual.
Catatan: Sekiranya anda mahu mengawal arah arahan masing-masing, anda boleh menggunakan orientasi teks menjadikannya tegak atau mendatar, seperti yang dikehendaki.
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; menulis-mod: menegak-rl;
2. Gunakan semula Nilai Warna
Kata kunci currentColor membawa nilai warna atribut dan boleh digunakan dalam atribut lain yang menerima nilai warna seperti latar belakang.
div latar belakang: linear-gradient (90deg, currentColor 50%, hitam 50%); ... warna: # FFD700; / * currentColor is # FFD700 * /
3. Campurkan Latar Belakang
Unsur boleh mempunyai lebih daripada satu latar belakang (warna latar belakang dan banyak imej latar belakang). The modul-gabungan-mod menggabungkan semuanya bersama-sama mengikut mod campuran yang diberikan. Terdapat sejumlah 16 mod gabungan pada masa ini.
background-blend-mode: difference;
4. Elemen Blend
campuran-gabungan-campuran menggabungkan kandungan dan latar belakang unsur bertindih. Chrome nampaknya tidak menyokong semua mod walaupun Firefox tidak berfungsi.
campuran-gabungan-mod: warna;
Saya mengambil dua elemen, iaitu img menunjukkan imej mawar dan a span dengan latar belakang grafik, menumpuk mereka dan memohon beberapa mod campuran-gabungan.
5. Abaikan Acara Pointer
Anda boleh membuat elemen yang tidak dapat menyedari sebarang peristiwa penunjuk dengan menggunakan satu atribut yang dipanggil penunjuk peristiwa. Dengan memberi penunjuk peristiwa nilai tiada dalam satu elemen, ini menghalangnya daripada menjadi sasaran peristiwa penunjuk. Sokongan IE11 + disertakan.
Dalam demo berikut, terdapat kotak centang di bawah dua imej yang disusun di atas satu sama lain. Kedua-dua imej itu dibawa penunjuk: tiada, membolehkan kami mengklik kotak semak dikebumikan di bawahnya. Berdasarkan keadaan yang ditandai kotak pilihan, imej yang dikehendaki ditunjukkan sementara yang lain tersembunyi.
6. Hiaskan Kotak Split
Biasanya apabila kotak berpecah (seperti apabila elemen garis sebaris menyaksikan baris pecah), bahagian tepi berpecah tidak mempunyai gaya kotak dan kelihatan dihiris. Untuk mengelakkannya, anda boleh menggunakannya box-decoration-break: clone.
Sekarang untuk mengikuti dengan contoh dan peringatan awal "Krismas di cakrawala", inilah senarai Santa's Reindeer yang semuanya ditaip dalam satu span! Ho! Ho! Ho!
Catatan: Walaupun IE moden tidak menyokong box-decoration-break, di pinggir sempadan bahagian perpecahan, rendering tidak lancar dan latar belakang kelihatan dihiris. Tetapi ia menyebabkan kotak-bayang Baiklah, itulah sebabnya saya menggunakan bayang-bayang kotak untuk kedua-dua sempadan dan latar belakang. Terdapat juga ketiadaan padding mendatar di tepi di IE yang anda mungkin ingin isi dengan ruang.
7. Runtuh Elemen Jadual
penglihatan: runtuh adalah atribut yang dibuat hanya untuk elemen jadual, seperti baris dan lajur. Jika digunakan pada apa-apa lagi ia akan berkelakuan seperti itu penglihatan: tersembunyi. Chrome walaupun merawatnya tersembunyi walaupun untuk elemen jadual.
Apabila anda menetapkan penglihatan: runtuh pada elemen jadual, ia tersembunyi dan ruangnya dipenuhi oleh kandungan berhampiran - seperti bagaimana ia akan berkelakuan menggunakan paparan: tiada sebaliknya.
Tetapi tidak seperti paparan: tiada yang mengubah susun atur jadual selepas mengeluarkan ruang, susun atur tetap sama penglihatan: runtuh. Anda dapat melihat bagaimana ia berfungsi dengan lebih terperinci di sini.
8. Buat Lajur
Anda boleh membuat susun atur lajur untuk kandungan anda menggunakan lajur atribut. Ia membolehkan anda menentukan berapa banyak lajur (kiraan jumlah lajur) dan bagaimana setiap lajur lebar (lebar lajur) hendaklah diberikan dalam satu elemen.
Sekiranya kandungannya adalah selain daripada teks, seperti misalnya imej, maka anda perlu mengingat lebarnya masing-masing pada lajur. Untuk contoh berikut, saya hanya digunakan kiraan jumlah lajur untuk menentukan berapa banyak lajur yang saya mahu.
-webkit-column-count: 2; -moz-column-count: 2; kiraan lajur: 2;
9. Buat Elemen Resizeable
Unsur boleh dibuat resizeable (menegak, mendatar atau kedua-duanya) dengan atribut CSS3 saiz semula . Kelebihan semula dalam a textarea boleh dimatikan menggunakan yang sama.
saiz semula: menegak; saiz semula: mendatar; saiz semula: kedua-duanya; saiz semula: tiada;
10. Buat Corak
Terdapat banyak kecerunan CSS3 (kedua-dua linear & radial) untuk satu elemen dan mereka boleh ditimbun satu sama lain untuk membuat corak. Ini membolehkan kita untuk membuat latar belakang yang bagus untuk elemen tanpa menggunakan imej luaran. Membuatnya berfungsi mungkin memerlukan sedikit amalan.
