Cara Membuat Desain Perbatasan Cut-out dengan CSS
Dengan desain batas cut-out kami dapat menunjukkan kepada pengguna apa yang dapat ditemukan di bawah area perbatasan elemen HTML. Tugas ini biasanya diselesaikan oleh menumpuk dua atau lebih elemen blok (dalam banyak kasus divs) dari berbagai ukuran di atas satu sama lain. Pertama, ini tampaknya merupakan solusi yang mudah, tetapi akan lebih membuat frustrasi ketika Anda ingin menggunakan kembali tata letak beberapa kali, bergerak di sekitar elemen, mengoptimalkan desain untuk seluler, atau mempertahankan kode.
Dalam posting ini, saya akan menunjukkan kepada Anda solusi elegan yang hanya menggunakan CSS hanya satu elemen HTML untuk mencapai efek yang sama. Teknik ini juga bagus untuk aksesibilitas memuat gambar latar belakang di CSS, dipisahkan dari HTML.
Pada akhir posting ini, Anda akan tahu caranya menampilkan gambar latar belakang di area perbatasan untuk membuat desain batas cut-out Anda bisa lihat di bawah. Saya juga akan menunjukkan bagaimana Anda dapat membuat desain responsif menggunakan unit viewport.
Kode awal
Satu-satunya persyaratan di depan HTML adalah a elemen blok:
Kita harus melakukannya penggunaan kembali nilai dimensi (lebar & tinggi) dan lebar perbatasan div, jadi saya memperkenalkan mereka sebagai variabel CSS. Variabel --w menunjukkan lebar dari .cb elemen blok, --h menunjukkan itu tinggi, --b berlaku untuk lebar perbatasan, dan --b2 untuk lebar perbatasan dikalikan dengan 2. Kita nanti akan melihat penggunaan variabel terakhir.
Saya mengukur Unit Mari kita tingkatkan kode di atas dengan menambahkan latar belakang, dan mengatur batas, tinggi dan lebar dengan menggunakan variabel CSS yang telah ditentukan sebelumnya. Beginilah seharusnya bentuk demo sekarang: Kita membutuhkan gambar latar belakang mencakup seluruh area Jika Anda ingin memberikan gambar latar ukuran tetap, pastikan ukuran yang Anda berikan memungkinkannya untuk menutupi area perbatasan Itu lebar gambar latar belakang [ Demikian pula halnya dengan ketinggian gambar latar belakang [ Dengan cara ini, kami telah mengukur gambar latar belakang ke area yang sama dengan ukuran Itu catatan: Jika Anda menambahkan padding ke Inilah yang kami miliki saat ini: Sekarang kita telah membahas area inklusif perbatasan dengan gambar latar belakang, yang tersisa hanyalah tutupi area tengah di dalam perbatasan (area perbatasan-eksklusif) dengan warna solid, untuk itu kami meraih a Bayangan horizontal dengan nilai Dalam demo Codepen, Anda bisa melihat perbatasan putih di sekitar gambar. Ada trik terkenal menggunakan bayangan kotak untuk membuat beberapa batas-kita bisa menggunakan teknik yang sama untuk tambahkan satu atau lebih garis tepi berwarna untuk desain kami. Diperbaharui Itu Dalam demo Codepen terakhir saya, saya telah menempatkan kode untuk gambar latar belakang dan warna kotak-bayangan ke dalam kelas yang terpisah. Ini adalah pilihan, tetapi bisa sangat berguna jika Anda mau menggunakan kembali tata letak desain batas cut-out dalam beberapa elemen, dan tambahkan estetika (gambar latar belakang + warna) untuk setiap elemen secara independen. Saya telah menambahkan kelas bernama Sejak Untuk mengatur nilai Karena dimensi semua ada di unit catatan: Jangan lupa tambahkan tag meta viewport ke halaman HTML Anda jika Anda memutuskan untuk mengoptimalkannya untuk tampilan seluler.ay unit (Anda dapat menggunakan unit tetap jika Anda mau). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Penjelasan cepat -
ay dan vh unitay mewakili 1/100th dari lebar viewport. Contohnya, 50vw adalah 50 bagian dari lebar viewport diiris secara vertikal menjadi 100 bagian yang sama, sementara 50vh adalah 50 bagian dari ketinggian viewport diiris secara horizontal menjadi 100 bagian yang sama. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg); perbatasan: var (- b) solid transparan; tinggi: var (- h); lebar: var (- w);
Ukuran gambar latar belakang
Latar Belakang nilai yang saya berikan: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); latar belakang: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); perbatasan: var (- b) solid transparan; tinggi: var (- h); lebar: var (- w);
calc (var (- w) + var (- b2))] adalah jumlah dari lebar div [var (- w)] dan lebar batas kiri & kanan [var (- b2)].calc (var (- h) + var (- b2))] adalah jumlah dari ketinggian div [var (- h)] dan lebar batas atas & bawah [var (- b2)].div (termasuk daerah perbatasan).pusat kata kunci menyelaraskan gambar latar belakang ke pusat kota div.div, ingat untuk termasuk area padding untuk ukuran latar belakang juga, sama dengan area perbatasan.
Menutupi area eksklusif perbatasan
bayangan kotak sisipan. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); latar belakang: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); perbatasan: var (- b) solid transparan; box-shadow: inset var (- w) 0 0 rgba (0,120.237, .5); tinggi: var (- h); lebar: var (- w);
var (- w) mencakup seluruh lebar div. Penggunaan rgba fungsi warna memungkinkan transparansi untuk ditambahkan dalam campuran, namun Anda juga dapat menggunakan warna buram jika Anda ingin sepenuhnya menutupi area tengah.
Tambahkan batas ekstra dengan
bayangan kotakbayangan kotak nilainya adalah: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) pusat / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); perbatasan: var (- b) solid transparan; box-shadow: inset var (- w) 0 0 rgba (0,120.237, .5), 0 0 0 calc (var (- b) / 2) putih; tinggi: var (- h); lebar: var (- w);
calc (var (- b) / 2) fungsi menciptakan bayangan setengah dari lebar perbatasan.
Opsional: Tata letak & estetika terpisah
.poster1 ke .poster1 --tbgc: rgba (0,120.237, .5); background-image: url ("http://bit.ly/2eQBij2"); Latar Belakang adalah properti singkatan, sifatnya yang lama dapat diganti / diset secara individual. Karenanya, kita dapat mengatur gambar latar belakang di .poster1, dan hapus nilai url dari Latar Belakang properti di .cb.bayangan kotak, kita bisa gunakan variabel CSS lainnya. Itu --tbgc variabel memegang nilai warna kami ingin memberikan kepada bayangan kotak (lightblue dalam demo), jadi di antara aturan gaya untuk .cb kita ganti nilai warna dari bayangan kotak properti 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)); perbatasan: var (- b) solid transparan; kotak-bayangan: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) putih; tinggi: var (- h); lebar: var (- w);
Kode untuk mode potret
ay, itu akan terlihat terlalu kecil ketika Anda melihat desain dalam mode potret (lebar relatif lebih kecil dari ketinggian) -yang semua perangkat seluler secara default. Untuk mengatasi masalah ini, beralih ay dengan vh, dan mengubah ukuran desain seperti yang Anda inginkan untuk mode potret. @ media (orientasi: potret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
