Hvordan CSS-Only Overlays Effect med Box-Shadow

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

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

I denne artikkelen vil vi se på hvordan legg til farget overlegg til bilder ved å bruke 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 som presenteres sikkert brukes på andre innholdstyper (for eksempel tekstblokker).

Unngå å legge til ekstra HTML-elementer

Overlegg er ofte opprettet av posisjonering av et ekstra HTML-element med en opasitet verdi mindre enn 1 rett over elementet som skal dekkes. Problemet er at denne teknikken innebærer bruk av en 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 mest sannsynlig vil det ikke beskatte båndbredden til noe nettverk så mye. Men å ha skille stilregler for elementer og overleggene deres, 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? Med hjelp av box-shadow CSS eiendom. Boksen-skyggen er perfekt for denne jobben, siden det er et overlegg, men en mørk skygge kastet over et element?

Boksen-skyggen har en eiendomsverdi kalt innfelt, som forårsaker at skyggen vises innover av rammen av boksen.

En innsatsboksskygge med en skyggeformat halv eller mer enn halvparten av elementets bredde og høyde, skaper en skygge som dekker hel element.

 .boks bredde: 200px; høyde: 200px; boks-skygge: grønn 0 0 0 100px innskudd;  

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

De rgb del av rgba, representerer, rød, grønn og blå fargekanalverdier, mens en representerer alfakanal, som er ansvarlig for åpenhet.

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

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

Opprett 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 ut 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, den .pokemon elementene viser pokemonbildene, og .pokemon :: etter pseudo-elementer bærer navnet pokemon.

Siden box-shadow eiendom kan ta flere verdier for å gjengi flere skygger, foruten overleggeskyggen, la jeg også til andre gråskygger til .pokemon og .pokemon: hover elementer for estetikk.

 / * pokemon bilder * / .pokemon width: 200px; høyde: 200px; / * senterinnhold ved hjelp av flexboks * / display: flex; begrunn-innhold: center; justeringselementer: senter; / * overlegg * / boks-skygge: 0 0 0 100px innskudd, 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; grense: 2px solid; tekstjustering: center; / * senterinnhold ved hjelp av flexboks * / display: flex; begrunn-innhold: center; justeringselementer: senter; / * sveve ut overgang * / overgang: opacity 1s .5s;  / * avslør pokemon bilde 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, deres bokseskygge må endres for å avsløre bildet bak.

Du kan se at .pokemon: hover velgeren får en ny bokseskygge som fjerner overlegget, og .pokemon: hover :: etter Selector skjuler navnet på pokemonet ved å bruke opasitet eiendom.

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

Som box-shadow har ingen longhand eiendom, Du kan ikke sette sin skyggefarge individuelt med noe som helst, box-shadow-farge; i stedet - vi bruker farge eiendom.

Som standard, når du gir en verdi for farge eiendom, den verdien er søkt på grensen, omrisset og boksskyggefargene også. Så, du kan bare bruke farge eiendom for å 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 / * pokemon navn * / innhold: 'Bulbasaur';  

Fargene på overleggeskyggen bruker ovennevnte RGBA () Fungerer med 0,9 for alfa-verdi for å gjøre overlegget gjennomsiktig.

Bortsett fra fargen på overleggskassen-skyggen, legger CSS-tillegget også de reglene som er individuelle for hver pokemon - bildet som bakgrunnsbilde og navnet.

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