Hur CSS-Only Overlays Effect med Box-Shadow

Innehållsöverlagringar är en framträdande del av modern webbdesign. De hjälper dig göm ett element på en webbsida och senare - med användarens godkännande - avslöja det, och visa extra information eller kontroller, t.ex. knappar bakom den.

En typisk överlagring är semi-transparent, med en fast bakgrundsfärg (vanligtvis svart), och det finns lite text eller knappar på det för användare att se eller interagera med. Efter samspelet (klicka eller svävar) inträffar överlagret tas bort och avslöjar innehållet under den.

I den här artikeln tar vi en titt på hur man gör det lägg till färgat överlag till bilder genom att använda ren CSS. Du kan se det slutliga resultatet på demo nedan. Häng bilderna för att få överlagren att avslöja pokemonerna. Även om det här inlägget diskuterar bilder, kan tekniken presenteras säkert på andra innehållstyper (t.ex. textblock).

Undvik att lägga till extra HTML-element

Överlagringar skapas ofta av positionering av ett extra HTML-element med en opacitet värde mindre än 1 precis ovanför det element som ska täckas. Problemet är att denna teknik innebär användningen av en extra element (eller pseudo-element) för överläggningen.

Om du inte är en pedantik i HTML-format, är det förmodligen inte en stor sak att ha ett extra element för överlagring, eftersom det troligtvis inte kommer att skatta bandbredd på något nätverk så mycket. Men med separat stilregler för element och deras överlagringar skadar fortfarande CSS läsbarhet och underhåll.

För att hålla koden i ordning och att inte röra din HTML-skiss upp är det ett bättre val att använda en CSS-only-lösning.

Skapa överlagring med box-shadow

Så hur kan du faktiskt skapa ett CSS-bara överlag? Med hjälp av box-shadow CSS-egenskapen. Boxskuggan är perfekt för det här jobbet, eftersom det är en överläggning men en mörk skugga kastas över ett element?

Boxskuggan har ett fastighetsvärde som heter infälld, vilket får skuggan att dyka upp inåt ramens ram.

En insatsboxskugga med en skuggstorlek som är halv eller mer än hälften av elementets bredd och höjd skapar en skugga som täcker hel element.

 .lådan bredd: 200px; höjd: 200px; boxskugga: grön 0 0 0 100px inset;  

Eftersom överlag oftast ha lite insyn, du måste lägga till den i rutskuggan också. Detta kan göras genom att använda RGBA () funktion för skuggfärg.

De rgb del av rgba, representerar, röda, gröna och blåa färgkanalvärden, medan en representerar alfakanal, vilket är ansvarig för öppenhet.

För alfakanalen skapar ett värde av 1 en opak färg, medan 0 skapar a helt transparent färg.

Genom att tilldela ett värde mellan 0 och 1 till alfakanalen i rgba-färgvärdet för boxskuggan kan du skapa en halvtransparent överlagring.

Skapa kod för demo

Vår demo visar bilder och namn på olika pokemoner. Här skapar vi bara koden för Bulbasaur, den första pokemonen i demoen, som de andra görs på samma sätt (på Codepen kan du kolla in koden för dem också).

html

För HTML-filen behöver vi bara skapa en låda till vilket vi lägger till allt annat med CSS.

CSS

I CSS nedan, den .pokemon element visar pokemonbilderna och .pokemon :: efter pseudo-element bär namnet pokemon.

Sedan box-shadow fast egendom kan ta flera värden för att göra flera skuggor, förutom överlagringsskuggan har jag också lagt till andra gråskuggor till .pokemon och .pokemon: hover element för estetik.

 / * pokemon bilder * / .pokemon width: 200px; höjd: 200px; / * center innehåll med flex box * / display: flex; rättfärdiga innehåll: center; align-items: center; / * överlägg * / boxskugga: 0 0 0 100px inset, 0 0 5px grå; / * sväva övergång * / övergång: box-skugga 1s;  / * pokemonnamn * / .pokemon :: efter bredd: 80%; höjd: 80%; display: block; typsnitt: 16pt 'bokman gammal syle'; färg vit; gräns: 2px solid; text-align: center; / * center innehåll med flex box * / display: flex; rättfärdiga innehåll: center; align-items: center; / * sväva övergång * / övergång: opacitet 1s .5s;  / * avslöja pokemonbild på sväva * / .pokemon: sväva övergång: box-skugga 1s; boxskugga: 0 0 0 5px inset, 0 0 5px grå, 0 0 10px grå inset;  / * göm pokemonnamn på sväva * / .pokemon: sväva :: efter övergång: opacitet .5s; opacitet: 0;  

När .pokemon elementen svävar, deras boxaskugga behöver ändras för att avslöja bilden bakom.

Du kan se att .pokemon: hover väljaren får en ny boxskugga som tar bort överlägget och .pokemon: hover :: efter väljaren döljer namnet på pokemonet med hjälp av opacitet fast egendom.

Du kanske också har märkt det frånvaron av färgvärden i överlagringsboxens skuggor i .pokemon och .pokemon: hover stil regler. Överlagringsboxens skuggfärg på de enskilda pokemonerna måste anges i sina egna separata stilregler, som de är alla olika från varandra.

Som box-shadow har ingen långsiktig egendom, Du kan inte ställa in sin skuggfärg individuellt med något liknande, box-shadow-färg; istället - vi använder Färg fast egendom.

Som standard, när du anger ett värde för Färg egendom, det värdet är Ansökt om gränsen, konturerna och boxskuggans färger också. Så, du kan helt enkelt använda Färg egenskap för att lägga till färg till boxskugga.

 #bulbasaur bakgrundsbild: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * färgvärde som används för boxskuggfärg * / färg: rgba (71, 121, 94, 0,9);  #bulbasaur :: efter / * pokemon namn * / innehåll: 'Bulbasaur';  

Färgen på överlagringsskuggan använder det ovan nämnda RGBA () funktionen med 0,9 för alfa-värde för att göra överlaget transparent.

Bortsett från färgen på överlagringsboxskuggan, lägger ovanstående CSS också de regler som är individuella för varje pokemon - bilden som bakgrundsbild och namnet.

Och det är allt, vi är redo med vår CSS-bara färgade bildöverlagring. Ta en titt på koden för alla pokemoner i pennan nedan.