Hvordan CSS-Only Overlays Effect med Box-Shadow

Indhold overlejringer er en fremtrædende del af moderne webdesign. De hjælper dig skjul et element på en webside og senere - med brugerens godkendelse - afsløre det, og vis ekstra information eller kontroller, som f.eks. knapper bagved.

En typisk overlejring er halvtransparente, med en solid baggrundsfarve (normalt sort), og der er nogle tekst eller knapper på den, så brugerne kan se eller interagere med. Efter interaktionen (klik eller svæver) forekommer overlejringen fjernes og afslører indholdet under det.

I denne artikel tager vi et kig på, hvordan Tilføj farvet overlay til billeder ved at bruge ren CSS. Du kan se det endelige resultat på demoen nedenfor. Hold billederne for at få overlejringer til at afsløre pokemoner. Selv om dette indlæg diskuterer billeder, kan den teknik, den præsenterer, anvendes sikkert på andre indholdstyper (f.eks. Tekstblokke).

Undgå at tilføje ekstra HTML-elementer

Overlejringer skabes ofte af positionering af et ekstra HTML-element med en Gennemsigtighed værdi mindre end 1 lige over det element, der skal dækkes. Problemet er, at denne teknik indebærer brugen af ​​en ekstra element (eller pseudo-element) til overlejringen.

Hvis du ikke er en pedantisk i HTML-størrelse, er det nok ikke en stor ting at have et ekstra element til overlay, da det højst sandsynligt ikke vil beskatte båndbredden af ​​noget netværk så meget. Men at have adskille stil regler for elementer og deres overlays skader stadig CSS læsbarhed og vedligeholdelighed.

For at holde din kode i orden, og ikke at ødelægge din HTML-oversigt, er det et bedre valg at bruge en CSS-only-løsning.

Opret overlejring med box-shadow

Så hvordan kan du faktisk oprette et CSS-only overlay? Med hjælp fra box-shadow CSS ejendom. Boksen-skyggen er perfekt til dette job, da hvad er en overlay men en mørk skygge kastede over et element?

Boxskyggen har en ejendomsværdi kaldet nedfældning, hvilket får skyggen til at fremstå indad i kassens ramme.

En indsats boks-skygge med en skygge størrelse halv eller mere end halvdelen af ​​elementets bredde og højde skaber en skygge dækker hel element.

 .boks bredde: 200px; højde: 200px; box-shadow: green 0 0 0 100px input;  

Siden overlays normalt have en vis gennemsigtighed, du skal også tilføje den til bokseskyggen. Dette kan gøres ved at bruge RGBA () funktion for skyggefarve.

Det RGB del af rgba repræsenterer, rød, grøn og blå farvekanalværdier, mens -en repræsenterer alfa kanal, som er ansvarlig for gennemsigtighed.

For alfakanalen opretter en værdi på 1 en uigennemsigtig farve, mens 0 opretter en fuld gennemsigtig farve.

Ved at tildele en værdi mellem 0 og 1 til alfakanalen i rgba-farveværdien af ​​bokseskyggen, kan du lav et halvt transparent overlay.

Opret kode for demoen

Vores demo viser billeder og navne på forskellige pokemoner. Her skaber vi kun koden til Bulbasaur, den første pokemon i demoen, da de andre bliver gjort på samme måde (på Codepen kan du også tjekke koden for dem).

HTML

For HTML-filen behøver vi kun lav en boks som vi vil tilføje alt andet med CSS.

CSS

I CSS nedenfor, den .pokemon elementer viser pokemon billederne og .pokemon :: efter pseudo-elementer bærer navnet pokemon.

Siden box-shadow ejendom kan tage flere værdier for at gøre flere skygger, udover overlejringsskyggen tilføjede jeg også andre gråskygger til .pokemon og .pokemon: hover elementer til æstetik.

 / * pokemon billeder * / .pokemon width: 200px; højde: 200px; / * center indhold ved hjælp af flex box * / display: flex; retfærdiggør indhold: center; align-items: center; / * overlay * / box-shadow: 0 0 0 100px input, 0 0 5px grå; / * svejsning overgang * / overgang: box-shadow 1s;  / * pokemon navne * / .pokemon :: efter bredde: 80%; højde: 80%; display: blok; skrifttype: 16pt 'bookman old syle'; farve: hvid; grænse: 2px solid; tekst-align: center; / * center indhold ved hjælp af flex box * / display: flex; retfærdiggør indhold: center; align-items: center; / * svæveovergang * / overgang: opacitet 1s .5s;  / * afslør pokemonbillede på hover * / .pokemon: hover transition: box-shadow 1s; box-skygge: 0 0 0 5px indsats, 0 0 5px grå, 0 0 10px grå indsats;  / * skjul pokemonnavn på hover * / .pokemon: hover :: efter overgang: opacitet .5s; opacitet: 0;  

Når .pokemon elementer svæves, deres box-skygge skal ændres for at afsløre billedet bagved.

Du kan se, at .pokemon: hover vælgeren får en ny bokseskygge, der fjerner overlejret, og .pokemon: hover :: efter vælger skjuler navnet på pokemonet ved hjælp af Gennemsigtighed ejendom.

Du har måske også bemærket fravær af farveværdier i overlay box-skyggerne i .pokemon og .pokemon: hover stil regler. Overlay box-shadow farve af de enkelte pokemons skal specificeres i deres egne separate stilregler, da de er alle forskellige fra hinanden.

Som box-shadow har ingen longhand ejendom, Du kan ikke indstille sin skygge farve individuelt med noget lignende, box-shadow-farve; i stedet - vi bruger farve ejendom.

Som standard, når du giver en værdi for farve ejendom, den værdi er ansøgt om grænsen, omridset og boksskyggens farver såvel. Så du kan bare bruge farve egenskab for at tilføje farve til bokseskygge.

 #bulbasaur baggrundsbillede: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * farveværdi brugt til bokseskygge farve * / farve: rgba (71, 121, 94, 0.9);  #bulbasaur :: efter / * pokemon navn * / indhold: 'Bulbasaur';  

Farven på overlejringsskyggen bruger ovennævnte RGBA () funktion med 0,9 for alfa-værdi for at gøre overlejret gennemsigtigt.

Bortset fra farven på overlay box-skyggen tilføjer ovenstående CSS også de regler, der er individuelle for hver pokemon - billedet som baggrundsbillede og navnet.

Og det er alt sammen, vi er klar med vores CSS-kun-farvede billedoverlay. Se koden på alle pokemoner i pennen nedenfor.