Hoe CSS-overlapt alleen Effect met Box-Shadow

Content-overlays zijn een prominent onderdeel van modern webdesign. Ze helpen u een element op een webpagina te verbergen en later - met toestemming van de gebruiker - het te onthullen en extra informatie of bedieningselementen weer te geven, zoals knoppen erachter.

Een typische overlay is semi-transparant, met een effen achtergrondkleur (meestal zwart) en er zijn enkele tekst of knoppen voor gebruikers om te zien of om te gebruiken. Nadat de interactie (klikken of zweven) plaatsvindt, wordt de overlay verwijderd en wordt de onderliggende inhoud onthuld .

In dit artikel zullen we bekijken hoe u gekleurde overlay kunt toevoegen aan afbeeldingen met pure CSS. Je kunt het eindresultaat zien op de onderstaande demo. Beweeg de afbeeldingen om de overlays te maken, onthul de Pokemons. Hoewel deze post afbeeldingen bespreekt, kan de voorgestelde techniek ook veilig worden toegepast op andere inhoudstypen (zoals tekstblokken).

Vermijd het toevoegen van extra HTML-elementen

Overlays worden vaak gemaakt door een extra HTML-element te plaatsen met een opacity minder dan 1 vlak boven het element dat moet worden bedekt . Het probleem is dat deze techniek het gebruik van een extra element (of pseudo-element) voor de overlay inhoudt.

Als je geen pedantic van HTML-formaat bent, is het waarschijnlijk geen probleem om een ​​extra element voor overlay te hebben, omdat dit hoogstwaarschijnlijk niet de bandbreedte van een netwerk belast. Het hebben van afzonderlijke stijlregels voor elementen en hun overlays vormt nog steeds een nadeel voor de leesbaarheid en onderhoudbaarheid van CSS.

Om je code op orde te houden en je HTML-overzicht niet te verprutsen, is het een betere keuze om een ​​CSS-only oplossing te gebruiken.

Maak een overlay met box-shadow

Dus hoe kun je eigenlijk een alleen-CSS-overlay maken? Met behulp van de box-shadow CSS-eigenschap. De doosschaduw is perfect voor deze klus, want wat is een overlay maar een donkere schaduw over een element ?

De vakschaduw heeft een eigenschapswaarde die inset, waardoor de schaduw binnen in het kader van het kader verschijnt.

Een inzetbak-schaduw met een schaduwgrootte van de helft of meer dan de helft van de breedte en hoogte van het element, creëert een schaduw die het hele element bedekt .

 .box {width: 200px; hoogte: 200 px; vakschaduw: groen 0 0 0 100px inzet; } 

Omdat overlays meestal wat transparant zijn, moet u deze ook toevoegen aan de doosschaduw. Dit kan gedaan worden door de functie rgba() voor de schaduwkleur te gebruiken .

Het rgb gedeelte van rgba, vertegenwoordigt, rode, groene en blauwe kleurkanaalwaarden, terwijl a staat voor het alfakanaal, dat verantwoordelijk is voor transparantie .

Voor het alfakanaal maakt een waarde van 1 een ondoorzichtige kleur, terwijl 0 een volledig transparante kleur creëert.

Door een waarde tussen 0 en 1 toe te wijzen aan het alfakanaal van de rgba-kleurwaarde van de doosschaduw, kunt u een semi-transparante overlay maken .

Maak de code voor de demo

Onze demo toont de afbeeldingen en namen van verschillende Pokemons. Hier maken we alleen de code voor Bulbasaur, de eerste pokemon in de demo, terwijl de andere op dezelfde manier worden gemaakt (op Codepen kun je de code ook voor ze bekijken).

HTML

Voor de HTML hoeven we alleen een vak te maken waaraan we al het andere met CSS toevoegen.

CSS

In de CSS hieronder geven de .pokemon elementen de Pokemon-afbeeldingen weer, en de. .pokemon::after pseudo-elementen dragen de naam van de Pokémon.

Omdat de eigenschap .pokemon meerdere waarden kan gebruiken om meerdere schaduwen weer te geven, heb ik naast de overlay-schaduw ook andere schaduwen van grijs toegevoegd aan de .pokemon en .pokemon:hover voor esthetiek.

 / * Pokemon-afbeeldingen * / .pokemon {width: 200px; hoogte: 200 px; / * centrale inhoud met behulp van een flexbox * / display: flex; justify-content: center; align-items: center; / * overlay * / vakschaduw: 0 0 0 100px inzet, 0 0 5px grijs; / * hover-out overgang * / overgang: box-shadow 1s; } / * pokemonnamen * / .pokemon :: after {width: 80%; hoogte: 80%; weergave: blok; lettertype: 16pt 'bookman old syle'; kleur wit; rand: 2px solide; text-align: center; / * centrale inhoud met behulp van een flexbox * / display: flex; justify-content: center; align-items: center; / * zweeft uit overgang * / overgang: dekking 1s .5s; } / * onthullen pokemon-afbeelding op hover * / .pokemon: hover {transition: box-shadow 1s; vakschaduw: 0 0 0 5px inzet, 0 0 5px grijs, 0 0 10px grijze inzet; } / * verberg Pokemonnaam op hover * / .pokemon: hover :: after {transition: opacity .5s; dekking: 0; } 

Wanneer de .pokemon elementen .pokemon, moet hun .pokemon worden gewijzigd om de afbeelding erachter te onthullen.

Je kunt zien dat de .pokemon:hover selector een nieuwe box-shadow krijgt die de overlay verwijdert, en de .pokemon:hover::after selector verbergt de naam van de pokemon door de eigenschap opacity .

Je hebt misschien ook de afwezigheid van kleurwaarden opgemerkt in de overlay- .pokemon in de .pokemon en .pokemon:hover stijl. De overlay-vakschaduwkleur van de afzonderlijke Pokemons moet worden gespecificeerd in hun eigen afzonderlijke stijlregels, omdat ze allemaal van elkaar verschillen.

Omdat de vakschaduw geen eigenschap uit de lange hand heeft, kun je de schaduwkleur niet afzonderlijk instellen met iets als box-shadow-color ; in plaats daarvan gebruiken we de eigenschap color .

Wanneer u een waarde opgeeft voor de eigenschap color, wordt die waarde standaard ook toegepast voor de rand, de omtrek en de vak-schaduwkleuren . U kunt dus gewoon de eigenschap color gebruiken om kleur toe te voegen aan box-shadow.

 #bulbasaur {background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * kleurwaarde gebruikt voor boxschaduwkleur * / color: rgba (71, 121, 94, 0.9); } #bulbasaur :: na {/ * Pokemonnaam * / inhoud: 'Bulbasaur'; } 

De kleur van de overlay-schaduw gebruikt de eerder genoemde functie rgba() met 0, 9 voor alpha-waarde om de overlay transparant te maken.

Afgezien van de kleur van de overlay-vakschaduw, voegt de bovenstaande CSS ook de regels toe die voor elke pokemon individueel zijn - de afbeelding als background-image en de naam.

En dat is alles, we zijn klaar met onze CSS-only afbeelding-overlay met kleuren. Bekijk de code van alle Pokemons in de onderstaande pen.