Cara Efek Hamparan Hanya CSS dengan Box-Shadow

Hamparan konten adalah bagian penting dari desain web modern. Mereka membantumu sembunyikan elemen pada halaman web, dan kemudian - dengan persetujuan pengguna - ungkapkan itu, dan menampilkan informasi atau kontrol tambahan, seperti tombol di belakangnya.

Hamparan khas adalah setengah tembus terang, dengan warna latar belakang yang solid (biasanya hitam), dan ada beberapa teks atau tombol di atasnya untuk dilihat atau berinteraksi dengan pengguna. Setelah interaksi (mengklik atau melayang) terjadi, hamparan dihapus dan mengungkapkan konten di bawahnya.

Pada artikel ini, kita akan melihat bagaimana caranya tambahkan overlay berwarna ke gambar dengan menggunakan CSS murni. Anda dapat melihat hasil akhir pada demo di bawah ini. Arahkan gambar untuk membuat hamparan mengungkapkan pokemon. Meskipun posting ini membahas gambar, teknik yang disajikannya dapat diterapkan dengan aman ke tipe konten lain (seperti blok teks).

Hindari Menambahkan Elemen HTML Tambahan

Overlay sering dibuat oleh memposisikan elemen HTML tambahan dengan sebuah kegelapan nilai kurang dari 1 tepat di atas elemen yang akan dibahas. Masalahnya adalah bahwa teknik ini melibatkan penggunaan suatu tambahan elemen (atau elemen semu) untuk overlay.

Jika Anda bukan pengguna besar ukuran HTML, memiliki elemen tambahan untuk overlay mungkin bukan masalah besar, karena kemungkinan besar itu tidak akan membebani bandwidth dari jaringan apa pun sebanyak itu. Namun memiliki terpisah aturan gaya untuk elemen & overlaynya masih merusak keterbacaan dan pemeliharaan CSS.

Untuk menjaga agar kode Anda tetap rapi, dan tidak membuat garis besar HTML Anda berantakan, itu adalah pilihan yang lebih baik untuk menggunakan solusi khusus CSS.

Buat Hamparan dengan bayangan kotak

Jadi, bagaimana Anda bisa benar-benar membuat hamparan khusus-CSS? Dengan bantuan bayangan kotak Properti CSS. Box-shadow sangat cocok untuk pekerjaan ini, karena apa yang merupakan overlay bayangan gelap menutupi elemen?

Box-shadow memiliki nilai properti yang disebut sisipan, yang menyebabkan bayangan muncul ke dalam bingkai kotak.

Kotak-bayangan inset dengan ukuran bayangan setengah atau lebih dari setengah lebar dan tinggi elemen, menciptakan bayangan itu mencakup seluruh elemen.

 .box width: 200px; tinggi: 200px; box-shadow: green 0 0 0 100px inset;  

Karena biasanya overlay memiliki transparansi, Anda perlu menambahkannya ke bayangan kotak juga. Ini dapat dilakukan dengan menggunakan rgba () berfungsi untuk warna bayangan.

Itu rgb porsi rgba, mewakili, nilai saluran warna merah, hijau dan biru, sementara Sebuah mewakili saluran alfa, yang mana bertanggung jawab atas transparansi.

Untuk saluran alpha, nilai 1 menciptakan warna buram, sementara 0 menciptakan a warna sepenuhnya transparan.

Dengan menetapkan nilai antara 0 dan 1 ke saluran alfa dari nilai warna rgba dari bayangan kotak, Anda bisa buat hamparan semi-transparan.

Buat Kode untuk Demo

Demo kami akan menampilkan gambar dan nama pokemon yang berbeda. Di sini kita hanya akan membuat kode untuk Bulbasaur, pokemon pertama dalam demo, karena yang lain dibuat dengan cara yang sama (pada Codepen Anda juga dapat memeriksa kode untuk mereka).

HTML

Untuk HTML, kita hanya perlu buat kotak dimana kami akan menambahkan yang lainnya dengan CSS.

CSS

Dalam CSS di bawah ini, the .pokemon elemen menampilkan gambar pokemon, dan .pokemon :: after pseudo-elements membawa nama pokemon.

Sejak bayangan kotak milik dapat mengambil banyak nilai untuk membuat beberapa bayangan, selain bayangan hamparan, saya juga menambahkan bayangan abu - abu lain ke .pokemon dan .pokemon: arahkan kursor elemen untuk estetika.

 / * gambar pokemon * / .pokemon width: 200px; tinggi: 200px; / * konten tengah menggunakan kotak fleksibel * / display: flex; justify-content: center; menyelaraskan item: pusat; / * overlay * / box-shadow: 0 0 0 inset 100px, 0 0 5px abu-abu; / * transisi hover-out * / transisi: box-shadow 1s;  / * nama pokemon * / .pokemon :: after width: 80%; tinggi: 80%; display: blok; font: 16pt 'bookman old syle'; warna putih; perbatasan: 2px solid; perataan teks: tengah; / * konten tengah menggunakan kotak fleksibel * / display: flex; justify-content: center; menyelaraskan item: pusat; / * arahkan transisi * / transisi: opacity 1s .5s;  / * mengungkapkan gambar pokemon di hover * / .pokemon: hover transisi: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px greet inset;  / * sembunyikan nama pokemon di hover * / .pokemon: hover :: after transisi: opacity .5s; opacity: 0;  

Ketika .pokemon elemen melayang, bayangan kotak mereka perlu berubah untuk mengungkapkan gambar di belakang.

Anda dapat melihat bahwa .pokemon: arahkan kursor pemilih mendapat bayangan kotak baru yang menghapus overlay, dan .pokemon: hover :: after pemilih menyembunyikan nama pokemon dengan menggunakan kegelapan milik.

Anda mungkin juga memperhatikan tidak adanya nilai warna di kotak - bayangan di kotak .pokemon dan .pokemon: arahkan kursor aturan gaya. Warna bayangan kotak-overlay dari masing-masing pokemon perlu ditentukan dalam aturan gaya terpisah mereka sendiri, karena mereka semua berbeda satu sama lain.

Sebagai bayangan kotak tidak memiliki properti bekas, Anda tidak dapat mengatur warna bayangannya secara individual dengan sesuatu seperti, kotak-bayangan-warna; sebagai gantinya - kami menggunakan warna milik.

Secara default, saat Anda memberikan nilai untuk warna properti, nilai itu diterapkan untuk perbatasan, garis besar dan warna kotak-bayangan demikian juga. Jadi, Anda cukup menggunakan warna properti untuk menambahkan warna ke bayangan kotak.

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

Warna bayangan overlay menggunakan yang disebutkan di atas rgba () berfungsi dengan 0,9 untuk nilai alpha untuk membuat overlay transparan.

Terlepas dari warna bayangan kotak-overlay, CSS di atas juga menambahkan aturan yang bersifat individual untuk setiap pokemon - gambar sebagai gambar latar belakang dan namanya.

Dan itu saja, kami siap dengan overlay gambar berwarna hanya CSS kami. Lihatlah kode semua Pokemon di pena di bawah ini.