Hvordan CSS-Only Overlays Effect med Box-Shadow

Innhold overlegg er en fremtredende del av moderne webdesign. De hjelper deg å skjule et element på en nettside, og senere - med brukerens godkjenning - avsløre det, og vise ekstra informasjon eller kontroller, for eksempel knapper bak den.

Et typisk overlegg er semi-gjennomsiktig, med en solid bakgrunnsfarge (vanligvis svart), og det er litt tekst eller knapper på det for brukere å se eller samhandle med. Etter at samspillet (klikker eller svinger) oppstår, blir overlegget fjernet og avslører innholdet under det.

I denne artikkelen vil vi se på hvordan du legger til farget overlegg til bilder ved hjelp av ren CSS. Du kan se det endelige resultatet på demoen nedenfor. Beveg bildene slik at overleggene avslører pokemonene. Selv om dette innlegget diskuterer bilder, kan teknikken det presenteres sikkert brukes på andre innholdstyper (for eksempel tekstblokker).

Unngå å legge til ekstra HTML-elementer

Overlegg blir ofte opprettet ved å plassere et ekstra HTML-element med en opacity mindre enn 1 rett over elementet som skal dekkes . Problemet er at denne teknikken innebærer bruk av et ekstra element (eller pseudo-element) for overlegget.

Hvis du ikke er en pedantisk i HTML-størrelse, er det sannsynligvis ikke en stor avtale å ha et ekstra element for overlegg, da det sannsynligvis ikke vil beskrive båndbredden til noe nettverk så mye. Men å ha separate stilregler for elementer og deres overlegg skader CSS lesbarhet og vedlikehold.

For å holde koden din i orden, og ikke å ødelegge HTML-oversikten, er det et bedre valg å bruke en CSS-eneste løsning.

Opprett overlegg med box-shadow

Så hvordan kan du faktisk lage et CSS-bare overlegg? Ved hjelp av box-shadow CSS-egenskapen. Boksen-skyggen er perfekt for denne jobben, siden hva er et overlegg, men en mørk skygge kastet over et element ?

Boksen-skyggen har en egenskapsverdi som kalles inset, noe som får skyggen til å vises innover av rammen av boksen .

En innskuddskoksskygge med en skyggeformat halv eller mer enn halvparten av elementets bredde og høyde, skaper en skygge som dekker hele elementet .

 .box {width: 200px; høyde: 200px; boks-skygge: grønn 0 0 0 100px innskudd; } 

Siden overlegg vanligvis har litt gjennomsiktighet, må du legge den til bokseskyggen også. Dette kan gjøres ved å bruke funksjonen rgba() for skyggefarge .

Rgb-delen av rgba representerer, rød, grønn og blå fargekanalverdier, mens a representerer alfakanalen, som er ansvarlig for gjennomsiktighet .

For alfakanalen skaper en verdi på 1 en ugjennomsiktig farge, mens 0 skaper en helt gjennomsiktig farge .

Ved å tildele en verdi mellom 0 og 1 til alfakanalen i rgba-fargeværdien i bokskyggen, kan du opprette et halvtransparent overlegg .

Lag koden for demonstrasjonen

Vår demonstrasjon vil vise bilder og navn på forskjellige pokemoner. Her lager vi bare koden for Bulbasaur, den første pokemonen i demoen, som de andre er gjort på samme måte (på Codepen kan du sjekke koden for dem også).

HTML

For HTML, trenger vi bare å lage en boks som vi vil legge til alt annet med CSS.

CSS

I CSS nedenfor viser .pokemon, og .pokemon::after pseudoelementene bærer navnet pokemon.

Siden egenskapen for .pokemon kan ta flere verdier for å gjengi flere skygger, har jeg også lagt til andre .pokemon til .pokemon og .pokemon:hover for estetikk, i tillegg til overleggskyggen.

 / * pokemon bilder * / .pokemon {width: 200px; høyde: 200px; / * senterinnhold ved hjelp av flexboks * / display: flex; begrunn-innhold: center; justeringselementer: center; / * overlegg * / boks-skygge: 0 0 0 100px innsett, 0 0 5px grå; / * sveveovergang * / overgang: bokseskygge 1s; } / * pokemonnavn * / .pokemon :: etter {bredde: 80%; høyde: 80%; skjerm: blokk; font: 16pt 'bookman old syle'; farge: hvit; border: 2px solid; tekst-align: center; / * senterinnhold ved hjelp av flexboks * / display: flex; begrunn-innhold: center; justeringselementer: center; / * sveve ut overgang * / overgang: opacity 1s .5s; } / * avslør pokemonbilde på hover * / .pokemon: hover {transition: box-shadow 1s; boks-skygge: 0 0 0 5px innsats, 0 0 5px grå, 0 0 10px gråinnsats; } / * skjul pokemonnavn på hover * / .pokemon: hover :: etter {overgang: opacity .5s; opasitet: 0; } 

Når .pokemon elementene er svevet, må .pokemon endres for å avsløre bildet bak.

Du kan se at .pokemon:hover får en ny .pokemon:hover som fjerner overlegget, og .pokemon:hover::after selector gjemmer navnet til pokemonet ved hjelp av opacity egenskapen.

Du har kanskje også lagt merke til fraværet av fargeverdier i overleggsskyggeskyggene i .pokemon og .pokemon:hover . Overlay box-skyggen fargen på de enkelte pokemons må spesifiseres i sine egne separate regler, da de er forskjellige fra hverandre.

Siden bokseskyggen ikke har noen langsiktig egenskap, kan du ikke sette sin skyggefarge enkeltvis med noe som, bokseskyggefarge ; i stedet - vi bruker color .

Som standard, når du gir en verdi for color, brukes denne verdien for grensen, omrisset og boksskyggefarger også. Så, du kan bare bruke color til å legge til farge i bokseskygge.

 #bulbasaur {bakgrunnsbilde: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * fargeverdi brukt for bokseskyggefarge * / farge: rgba (71, 121, 94, 0, 9); } #bulbasaur :: etter {/ * pokemonnavn * / innhold: 'Bulbasaur'; } 

Fargen på overleggeskyggen bruker den ovennevnte rgba() -funksjonen med 0, 9 for alfa-verdi for å gjøre overlegget gjennomsiktig.

Bortsett fra fargen på overleggskassen-skyggen, legger CSS ovenfor reglene som er individuelle for hver pokemon - bildet som background-image og navnet.

Og det er alt, vi er klare med vårt CSS-kun-fargede bildeoverlegg. Se koden til alle pokemoner i pennen nedenfor.