Hoe CSS-overlapt alleen Effect met Box-Shadow

Content-overlays zijn een prominent onderdeel van modern webdesign. Ze helpen je verberg een element op een webpagina en later - met toestemming van de gebruiker - onthul het, en extra informatie of bedieningselementen weergeven, zoals knoppen erachter.

Een typische overlay is semi-transparent, met een effen achtergrondkleur (meestal zwart) en er zijn een aantal tekst of knoppen op die gebruikers kunnen zien of gebruiken. Nadat de interactie (klikken of zweven) plaatsvindt, wordt de overlay weergegeven wordt verwijderd en onthult de inhoud eronder.

In dit artikel zullen we kijken naar hoe voeg gekleurde overlay toe aan afbeeldingen door pure CSS te gebruiken. 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 positionering van een extra HTML-element Met een ondoorzichtigheid waarde minder dan 1 recht 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.

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. Hoe dan ook scheiden stijlregels voor elementen en hun overlays zijn nog steeds schadelijk 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 de hulp 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 geworpen?

De vakschaduw heeft een eigenschapswaarde genaamd inzet, waardoor de schaduw verschijnt binnen het frame van de doos.

Een inzet vak-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 bestrijkt de geheel element.

 .vak width: 200px; hoogte: 200 px; vakschaduw: groen 0 0 0 100px inzet;  

Meestal overlays enige transparantie hebben, je moet het ook toevoegen aan de doosschaduw. Dit kan gedaan worden door de RGBA () functie voor schaduwkleur.

De rgb een deel van rgba, vertegenwoordigt, rode, groene en blauwe kleurkanaalwaarden, terwijl een vertegenwoordigt de alfakanaal, welke is verantwoordelijk voor transparantie.

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

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

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 dat alleen maar te doen maak een doos waaraan we al het andere zullen toevoegen met CSS.

CSS

In de CSS hieronder, de .pokemon elementen tonen de Pokemon-afbeeldingen en de .pokemon :: na pseudo-elementen dragen de naam van de pokemon.

Sinds de box-shadow eigendom kan meerdere waarden aannemen om te render meerdere schaduwen, naast de overlay-schaduw heb ik ook andere schaduwen van grijs toegevoegd aan de .pokemon en .pokemon: hover elementen 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 vast; text-align: center; / * centrale inhoud met behulp van een flexbox * / display: flex; justify-content: center; align-items: center; / * beweeg 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 grijs inzet;  / * verberg pokemonnaam op hover * / .pokemon: hover :: after transition: opacity .5s; dekking: 0;  

Wanneer de .pokemon elementen zijn zweven, hun doosschaduw moet veranderen om de afbeelding erachter te onthullen.

Je kunt zien dat het .pokemon: hover selector krijgt een nieuwe vak-schaduw die de overlay verwijdert, en de .pokemon: hover :: na selector verbergt de naam van de Pokemon door de ondoorzichtigheid eigendom.

Je hebt misschien ook het afwezigheid van kleurwaarden in de overlay-doos-schaduwen in de .pokemon en .pokemon: hover stijlregels. De overlay-vakschaduwkleur van de afzonderlijke Pokemons moet worden opgegeven in hun eigen aparte stijlregels, omdat ze allemaal van elkaar verschillen.

Zoals box-shadow heeft geen eigendom uit de lange termijn, je kunt de schaduwkleur niet instellen individueel met zoiets, box-shadow-color; in plaats daarvan gebruiken we de kleur eigendom.

Standaard geeft u een waarde voor de kleur eigendom, die waarde is toegepast voor de rand, de omtrek en de doos-schaduwkleuren ook. U kunt dus gewoon de kleur eigenschap om kleur toe te voegen aan vakschaduw.

 #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 overlayschaduw maakt gebruik van de eerder genoemde RGBA () functioneer 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 achtergrond afbeelding 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.