Kuidas CSS-ainult katab efekti Box-Shadow'ga

Sisu ülekatted on kaasaegse veebidisaini silmapaistev osa. Nad aitavad sind peita element veebisaidil ja hiljem - kasutaja nõusolekul - paljastada, ja kuvada lisateavet või juhtnuppe, näiteks nuppe selle taga.

Tüüpiline kattekiht on pooleldi läbipaistev, koos tahke taustavärv (tavaliselt must) ja seal on mõned tekstid või nupud, mida kasutajad saavad näha või nendega suhelda. Pärast interaktsiooni (klõpsamist või libistamist) ilmub ülekate eemaldatakse ja sisu avastatakse selle all.

Selles artiklis vaatame, kuidas seda teha lisage piltidele värviline ülekate kasutades puhast CSS-i. Allpool on näidatud demo lõpptulemus. Liigutage pilte, et kattematerjalid pokemoneid paljastada. Kuigi see postitus käsitleb pilte, saab selle esitatavat tehnikat ohutult rakendada ka teistele sisutüüpidele (nt tekstiplokkidele).

Vältige ekstra HTML-elementide lisamist

Katted on sageli loodud täiendava HTML-elemendi paigutamine koos läbipaistmatus väärtus on väiksem kui 1 paremale, mis on kaetava elemendi kohal. Probleem on selles, et see meetod hõlmab Lisa elementi (või pseudoelementi).

Kui te ei ole HTML-formaadis pedantne, ei pruugi ülekatte täiendav element olla tõenäoliselt suur asi, sest tõenäoliselt ei maksustata selle võrgu ribalaiust nii palju. Kuid omada eraldi elementide ja nende ülekatte stiilieeskirjad kahjustavad endiselt CSS-i loetavust ja hooldatavust.

Koodi järjekorras hoidmiseks ja mitte HTML-i kontuuri segamiseks on parem valik kasutada ainult CSS-i lahendust.

Loo ülekate koos kast-vari

Niisiis, kuidas saate tegelikult luua ainult CSS-põhise kattega? . \ T kast-vari CSS-i omadus. Kasti vari on selle töö jaoks ideaalne, sest mis on ülekatte, aga tume vari, mis on üle elemendi?

Kasti varjus on nimiväärtus sisetükk, mis põhjustab varju ilmumist kasti raami sissepoole.

Sisseehitatud kasti vari, mille varju suurus on pool või rohkem kui elementi laiusest ja kõrgusest, loob varju hõlmab terve element.

 .kast laius: 200 px; kõrgus: 200 px; kast-vari: roheline 0 0 0 100px sisend;  

Kuna tavaliselt kattub läbipaistvust, peate selle ka kasti varju lisama. Seda saab teha kasutades rgba () varju värvi funktsioon.

The rgb rgba osa, tähistab punast, rohelist ja sinist värvi kanali väärtust a tähistab alfa-kanal, mis on läbipaistvuse eest.

Alfa-kanali jaoks loob väärtus 1 läbipaistmatu värv, 0 loob a täielikult läbipaistev värv.

Määrates väärtuse vahemikus 0 kuni 1 kasti varju rgba värvi väärtuse alfa-kanalile, saate seda teha luua läbipaistva kattega.

Looge Demo kood

Meie demo näitab erinevate pokemonite pilte ja nimesid. Siin me loome ainult koodi Bulbasaurile, esimesele demo pokemonile, nagu teised on tehtud samamoodi (Codepenil saate ka nende koodi vaadata).

HTML

HTML-i jaoks on vaja ainult looge kast millele lisame kõik muu koos CSS-iga.

CSS

Allpool toodud CSS-is .pokemon elemendid näitavad pokemon pilte ja .pokemon :: pärast pseudoelemendid kannavad pokemon nime.

Alates kast-vari vara võib võtta mitmeid väärtusi selleks, et muutke mitmeid varje, peale kattevärvi lisasin ka teistele varjude hallile .pokemon ja .pokemon: hover esteetika elemendid.

 / * pokemon pildid * / .pokemon laius: 200 px; kõrgus: 200 px; / * keskosa sisu kasutades flex box * / display: flex; õigustada sisu: keskus; joondamine: keskus; / * overlay * / box-shadow: 0 0 0 100px sisestatud, 0 0 5px hall; / * hover-out üleminek * / üleminek: box-shadow 1s;  / * pokemon nimed * / .pokemon :: pärast laius: 80%; kõrgus: 80%; kuva: plokk; font: 16pt 'bookman old syle'; värv: valge; piir: 2px tahke; teksti joondamine: keskus; / * keskosa sisu kasutades flex box * / display: flex; õigustada sisu: keskus; joondamine: keskus; / * ülemineku väljalülitamine * / üleminek: läbipaistmatus 1s .5s;  / * paljastada pokemon pilt hover * / .pokemon: hover üleminek: box-shadow 1s; box-shadow: 0 0 0 5px sisetald, 0 0 5px hall, 0 0 10px hall inset;  / * peida pokemon nimi hover * / .pokemon: hover :: pärast üleminek: läbipaistmatus .5s; läbipaistmatus: 0;  

Kui .pokemon elemendid on hovered, nende box-shadow vaja muuta, et paljastada pilt taga.

Näete, et .pokemon: hover valija saab uue kasti-varju, mis eemaldab ülekate ja .pokemon: hover :: pärast valija peidab pokemoni nime kasutades läbipaistmatus vara.

Võib-olla olete ka märganud värviväärtuste puudumine ülekatte kasti-varjud .pokemon ja .pokemon: hover stiili reeglid. Tuleb täpsustada individuaalsete pokemonite kasti-varju värv omaette stiilieeskirjades, sest nad kõik erinevad üksteisest.

Nagu kast-vari tal ei ole ühtegi pikaajalist vara, te ei saa selle vari värvi seadistada individuaalselt midagi sellist, kast-vari-värv; selle asemel - me kasutame värv vara.

Vaikimisi, kui annate väärtuse värv vara, see väärtus on taotletakse piiri, kontuuri ja kasti-varju värve samuti. Nii saate lihtsalt kasutada värv omadus lisada värvi kasti varju.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * värvi väärtus, mida kasutatakse kasti varju värviks * / värv: rgba (71, 121, 94, 0,9);  #bulbasaur :: pärast / * pokemon nimi * / sisu: 'Bulbasaur';  

Ülekatte varju värv kasutab eespool mainitud rgba () toimib koos 0,9-ga alfa-väärtuse jaoks, et teha ülekatte läbipaistev.

Peale ülemise kasti-varju värvi lisab ülalolev CSS ka iga pokemonile individuaalsed reeglid - pilt nagu taustapilt ja nimi.

Ja see on kõik, me oleme valmis ainult meie CSS-iga värvilise kujutise kattega. Vaadake alltoodud pensüsteli kõigi pokemonite koodi.