Bagaimana Kesan CSS-Only Overlays dengan Box-Shadow

Lapisan kandungan adalah bahagian penting dalam reka bentuk web moden. Mereka membantu anda menyembunyikan unsur pada halaman web, dan kemudian - dengan kelulusan pengguna - mendedahkannya, dan memaparkan maklumat atau kawalan tambahan, seperti butang di belakangnya.

Lapisan biasa adalah separa lutsinar, dengan warna latar pepejal (biasanya hitam), dan ada beberapa teks atau butang di atasnya untuk pengguna dapat melihat atau berinteraksi. Selepas interaksi (mengklik atau melayang) berlaku, tindanan akan dikeluarkan dan mendedahkan kandungan di bawahnya.

Dalam artikel ini, kita akan melihat cara untuk tambahkan tindanan berwarna ke imej dengan menggunakan CSS tulen. Anda boleh melihat hasil akhir pada demo di bawah. Arahkan imej untuk membuat lapisan mendedahkan pokemon. Walaupun jawatan ini membincangkan imej, teknik yang dibentangkannya boleh digunakan dengan selamat untuk jenis kandungan lain (seperti blok teks).

Elakkan Menambah Unsur HTML Tambahan

Lapisan sering dibuat oleh meletakkan elemen HTML tambahan dengan kelegapan nilai kurang daripada 1 tepat di atas elemen yang akan dilindungi. Masalahnya ialah teknik ini melibatkan penggunaan sesuatu tambahan elemen (atau pseudo-elemen) untuk overlay.

Sekiranya anda bukan seorang pengarang saiz HTML, mempunyai elemen tambahan untuk overlay mungkin bukan masalah besar, kerana kemungkinan besar tidak akan membebankan bandwidth dari setiap rangkaian yang banyak. Walau bagaimanapun, berasingan Peraturan gaya untuk elemen & lapisan mereka masih membahayakan kebolehbacaan CSS dan kebolehkerjaan.

Untuk memastikan kod anda teratur, dan tidak membuang garis panduan HTML anda, pilihan yang lebih baik untuk menggunakan penyelesaian CSS sahaja.

Buat Overlay dengan kotak-bayang

Jadi, bagaimanakah anda boleh membuat hamparan CSS sahaja? Dengan bantuan kotak-bayang Harta CSS. Kotak-bayangan itu sempurna untuk tugas ini, kerana apa itu overlay tetapi bayangan gelap diletakkan di atas elemen?

Kotak bayangan mempunyai nilai harta yang dipanggil inset, yang menyebabkan bayangan muncul di dalam bingkai kotak.

Kotak bayang-kotak dengan bayang-bayang yang berukuran separuh atau lebih daripada separuh lebar dan ketinggian elemen itu, mewujudkan bayangan itu merangkumi keseluruhannya elemen.

 .kotak lebar: 200px; ketinggian: 200px; box-shadow: green 0 0 0 100px inset;  

Sejak kerap kali biasanya mempunyai ketelusan, anda perlu menambahnya ke kotak bayang juga. Ini boleh dilakukan dengan menggunakan rgba () fungsi untuk warna bayang-bayang.

The rgb bahagian rgba, mewakili, nilai saluran warna merah, hijau dan biru, sementara a mewakili saluran alfa, iaitu bertanggungjawab untuk ketelusan.

Untuk saluran alfa, nilai 1 mencipta warna legap, manakala 0 mencipta a warna telus sepenuhnya.

Dengan memberikan nilai antara 0 dan 1 ke saluran alpha nilai warna rgba bayang kotak, anda boleh buat lapisan telus telus.

Buat Kod untuk Demo

Demo kami akan menunjukkan imej dan nama-nama pokemon yang berbeza. Di sini kita hanya akan membuat kod untuk Bulbasaur, pokemon pertama dalam demo, kerana yang lain dibuat dengan cara yang sama (di Codepen anda boleh menyemak kod untuk mereka juga).

HTML

Untuk HTML, kita hanya perlu buat kotak yang mana kita akan menambah segala-galanya dengan CSS.

CSS

Dalam CSS di bawah, yang .pokemon elemen memaparkan imej pokemon, dan .pokemon :: selepas unsur-unsur pseudo membawa nama pokemon.

Sejak itu kotak-bayang harta boleh mengambil berbilang nilai untuk memberi bayang berganda, selain bayangan hamparan, saya juga menambahkan bayang-bayang yang lain ke kelabu .pokemon dan .pokemon: hover unsur-unsur untuk estetika.

 / * gambar pokemon * / .pokemon width: 200px; ketinggian: 200px; / * kandungan pusat menggunakan kotak flex * / paparan: flex; justify-content: center; align-items: center; / * overlay * / box-shadow: 0 0 0 100px inset, 0 0 5px grey; / * peralihan hover-out * / transisi: box-shadow 1s;  / * pokemon names * / .pokemon :: after width: 80%; ketinggian: 80%; paparan: blok; font: 16pt 'bookman old syle'; warna: putih; sempadan: pepejal 2px; teks-align: center; / * kandungan pusat menggunakan kotak flex * / paparan: flex; justify-content: center; align-items: center; / * melayang peralihan * / peralihan: kelegapan 1s .5s;  / * mengungkapkan gambar pokemon pada hover * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px inset kelabu;  / * sembunyikan nama pokemon pada hover * /. pokemon: hover :: after transition: opacity .5s; kelegapan: 0;  

Apabila .pokemon unsur-unsur yang dibentangkan, bayang-bayang kotaknya perlu diubah untuk mendedahkan imej di belakang.

Anda boleh melihat bahawa .pokemon: hover pemilih mendapat kotak bayang baru yang membuang lapisan, dan .pokemon: hover :: after pemilih menyembunyikan nama pokemon dengan menggunakan kelegapan harta.

Anda juga mungkin perasan ketiadaan nilai warna dalam bungkusan-bayang-bayang di dalam .pokemon dan .pokemon: hover peraturan gaya. Warna overlay kotak-bayangan dari pokemon individu perlu ditentukan dalam peraturan gaya berasingan mereka sendiri, kerana mereka semua berbeza dari satu sama lain.

Sebagai kotak-bayang tidak mempunyai sebarang harta tanah, anda tidak boleh menetapkan warna bayangannya secara individu dengan sesuatu seperti, kotak-bayang-warna; sebaliknya - kami menggunakannya warna harta.

Secara lalai, apabila anda memberikan nilai untuk warna harta, nilai itu memohon sempadan, garis besar dan warna kotak-bayangan juga. Jadi, anda boleh menggunakannya warna harta untuk menambah warna kepada kotak bayang-bayang.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * nilai warna yang digunakan untuk kotak warna bayangan * / warna: rgba (71, 121, 94, 0.9);  #bulbasaur :: selepas / * nama pokemon * / kandungan: 'Bulbasaur';  

Warna bayangan hamparan menggunakan yang disebutkan di atas rgba () berfungsi dengan 0.9 untuk nilai alpha untuk membuat lapisan terlampau.

Selain daripada warna kotak bayangan yang overlay, CSS di atas juga menambah peraturan yang individu untuk setiap pokemon - imej sebagai imej latar belakang dan nama itu.

Dan itu sahaja, kami bersedia dengan overlay imej berwarna kami yang hanya CSS. Lihatlah kodok semua pokemon di pen di bawah.