Cara Membuat Reka Bentuk Sempadan Potong dengan CSS
Dengan reka bentuk sempadan cut-out kami boleh tunjukkan kepada pengguna apa yang boleh dijumpai di bawah kawasan sempadan elemen HTML. Tugas ini biasanya diselesaikan oleh menyusun dua atau lebih elemen blok (dalam kebanyakan kes divs) saiz yang berbeza di atas satu sama lain. Pertama kali ini nampaknya merupakan penyelesaian yang mudah, tetapi ia menjadi lebih mengecewakan apabila anda ingin menggunakan semula susun atur beberapa kali, bergerak di sekitar elemen, mengoptimumkan reka bentuk untuk bergerak, atau menyelenggara kod.
Dalam jawatan ini, saya akan menunjukkan kepada anda satu penyelesaian CSS-satunya yang elegan yang digunakan hanya satu elemen HTML untuk mencapai kesan yang sama. Teknik ini juga hebat untuk diakses, kerana ia memuatkan imej latar belakang dalam CSS, dipisahkan daripada HTML.
Menjelang akhir siaran ini, anda akan tahu bagaimana memaparkan imej latar belakang di kawasan sempadan untuk mewujudkan reka bentuk sempadan cut-out anda boleh lihat di bawah. Saya juga akan menunjukkan bagaimana anda boleh membuat reka bentuk responsif menggunakan unit viewport.
Kod Permulaan
Satu-satunya keperluan di hadapan HTML adalah a blok elemen:
Kita perlu guna semula dimensi (lebar & ketinggian) dan nilai lebar sempadan div, jadi saya memperkenalkan mereka sebagai pembolehubah CSS. Pembolehubah --w merujuk kepada lebar daripada .cb blok elemen, --h menunjukkannya ketinggian, --b pergi untuk lebar sempadan, dan --b2 untuk lebar sempadan yang didarab dengan 2. Kami kemudian akan melihat penggunaan pembolehubah terakhir.
Saya mengukur saiznya Unit tersebut Mari kita tukar kod di atas dengan menambah latar belakang, dan menetapkan sempadan, ketinggian dan lebar dengan menggunakan pembolehubah CSS yang telah dipratentukan kami. Inilah caranya demo sepatutnya kelihatan seperti sekarang: Kami memerlukan imej latar belakang untuk meliputi keseluruhan kawasan Jika anda ingin memberikan imej latar belakang saiz tetap, pastikan saiz yang anda berikan membolehkannya menutup kawasan sempadan The lebar imej latar belakang [ Begitu juga dengan ketinggian imej latar belakang [ Dengan cara ini, kami telah menyusun imej latar belakang ke kawasan yang sama dengan saiz The Catatan: Jika anda menambah padding ke Inilah yang kita ada sekarang: Sekarang kita telah menutup kawasan inklusif sempadan dengan imej latar belakang, semua yang tersisa adalah menutup kawasan pusat di dalam sempadan (kawasan eksklusif sempadan) dengan warna pepejal, yang mana kita mencapai a Bayangan mendatar dengan nilai Dalam demo Codepen, anda dapat melihat sempadan putih di sekitar imej. Terdapat helah yang terkenal menggunakan kotak bayang-bayang untuk membuat pelbagai sempadan-kita boleh menggunakan teknik yang sama untuk tambah satu atau lebih sempadan berwarna pepejal untuk reka bentuk kami. Dikemas kini The Dalam demo Codepen terakhir saya, saya telah meletakkan kod untuk imej latar belakang dan warna kotak-bayangan ke dalam kelas yang berasingan. Ini adalah pilihan, tetapi boleh sangat berguna jika anda mahu guna semula susun atur reka bentuk sempadan cut-out dalam pelbagai unsur, dan menambah estetika (imej latar belakang + warna) untuk setiap elemen secara berasingan. Saya telah menambah kelas bernama Sejak Untuk menetapkan nilai Oleh kerana dimensi semua dalam unit Catatan: Jangan lupa tambah tag meta viewport ke halaman HTML anda jika anda memutuskan untuk mengoptimumkannya untuk paparan mudah alih.vw unit (anda boleh menggunakan unit tetap jika anda mahu). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Penjelasan ringkas -
vw dan vh unitvw mewakili 1/100th lebar lebar viewport. Contohnya, 50vw adalah 50 bahagian lebar paparan dihiris secara vertikal ke dalam 100 bahagian yang sama, sementara 50vh adalah 50 bahagian ketinggian viewport dihiris secara mendatar ke dalam 100 bahagian yang sama. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); latar belakang: url (bg.jpg); sempadan: var (- b) pepejal telus; ketinggian: var (- h); lebar: var (- w);
Saiz imej latar belakang
latar belakang nilai yang saya berikan: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); sempadan: var (- b) pepejal telus; ketinggian: var (- h); lebar: var (- w);
calc (var (- w) + var (- b2))] adalah jumlah lebar div [var (- w)] dan juga lebar sempadan kiri & kanan [var (- b2)].calc (var (- h) + var (- b2))] adalah jumlah ketinggian div [var (- h)] dan juga lebar sempadan atas & bawah [var (- b2)].div (termasuk kawasan sempadan).pusat kata kunci menyelaraskan imej latar belakang ke pusat div.div, ingat untuk termasuk kawasan padding kepada saiz latar belakang juga, sama dengan kawasan sempadan.
Tutup kawasan eksklusif sempadan
kotak-bayang inset. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); sempadan: var (- b) pepejal telus; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); ketinggian: var (- h); lebar: var (- w);
var (- w) merangkumi keseluruhan lebar div. Penggunaan rgba fungsi warna membolehkan beberapa ketelusan untuk ditambah dalam campuran, namun anda juga boleh menggunakan warna legam jika anda ingin menutup kawasan pusat sepenuhnya.
Tambah sempadan tambahan dengan
kotak-bayangkotak-bayang nilai ialah: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); sempadan: var (- b) pepejal telus; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) putih; ketinggian: var (- h); lebar: var (- w);
calc (var (- b) / 2) fungsi mewujudkan bayangan separuh lebar sempadan.
Pilihan: Susun atur & estetika berasingan
.poster1 kepada .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); latar belakang adalah harta pendek, Ciri-ciri perolakannya boleh ditindih / ditetapkan secara individu. Oleh itu, kita boleh menetapkannya imej latar belakang dalam .poster1, dan keluarkan nilai url daripada latar belakang harta di .cb.kotak-bayang, kita boleh guna pemboleh ubah CSS lain. The --tbgc pembolehubah memegang nilai warna kami ingin memberikan kepada kotak-bayang (lightblue dalam demo), jadi antara peraturan gaya untuk .cb kami menggantikan nilai warna kotak-bayang harta dengan var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); latar belakang: tengah / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); sempadan: var (- b) pepejal telus; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) putih; ketinggian: var (- h); lebar: var (- w);
Kod untuk mod potret
vw, ia akan kelihatan terlalu kecil apabila anda melihat reka bentuk dalam mod potret (lebar yang lebih kecil berbanding dengan ketinggian) -dengan semua peranti mudah alih berada secara lalai. Untuk menyelesaikan masalah ini, suis vw dengan vh, dan ubah saiz reka bentuk seperti yang anda lihat sesuai untuk mod potret. @media (orientasi: potret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
