Kako do CSS-samo prekrivne učinek s Box-Shadow

Prosojnice vsebine so pomemben del sodobnega spletnega oblikovanja. Pomagajo vam skrij element na spletni strani in pozneje - z dovoljenjem uporabnika - razkrijejo, in prikaže dodatne informacije ali kontrole, na primer gumbe za njo.

Tipičen sloj je polprosojni, z trdna barva ozadja (ponavadi je črna) in na njem je nekaj besedila ali gumbov, s katerimi lahko uporabniki vidijo ali komunicirajo. Ko pride do interakcije (klikanje ali lebdenje), prekrivna površina odstrani in razkrije vsebino pod njim.

V tem članku si bomo ogledali, kako dodajte barvno prekrivno sliko z uporabo čistega CSS. Končni rezultat si lahko ogledate spodaj. Za prikaz prekrivnih površin pokemonov se pomaknite na slike. Čeprav ta post obravnava slike, lahko tehniko, ki jo predstavlja, varno uporabimo tudi za druge vrste vsebine (kot so besedilni bloki).

Izogibajte se dodajanju dodatnih elementov HTML

Prosojnice pogosto ustvarijo pozicioniranje dodatnega elementa HTML z motnosti vrednost manj kot 1 nad elementom, ki ga želite pokriti. Problem je, da ta tehnika vključuje uporabo ekstra element (ali psevdoelement) za prekrivanje.

Če niste pedantni velikosti HTML, z dodatnim elementom za prekrivanje verjetno ni tako pomembno, saj najverjetneje ne bo veliko obdavčilo pasovne širine katerega koli omrežja. Vendar pa ima ločeno pravila stila za elemente in njihove prekrivnosti še vedno škodujejo berljivosti in vzdržljivosti CSS.

Da bi vašo kodo ohranili v redu in da ne bi zmešali svoje obrise HTML, je boljša izbira za uporabo CSS-rešitve.

Ustvari prekrivanje z box-shadow

Torej, kako lahko dejansko ustvarite prekrivni naslov samo za CSS? S pomočjo. \ T box-shadow Lastnost CSS. Box-shadow je kot nalašč za to nalogo, saj je tisti, ki je prekrivna temno senco, ki se preliva nad element?

Okno-shadow ima klicano vrednost lastnosti inset, ki povzroči pojav sence znotraj okvirja škatle.

Vstavljena senčna barva z velikostjo senc polovico ali več kot polovico širine in višine elementa ustvari senco pokriva celotno element.

 .škatla širina: 200px; višina: 200px; box-shadow: zelena 0 0 0 100px inset;  

Ker običajno prekrivajo preglednost, morate ga dodati tudi v senčno polje. To lahko storite z uporabo rgba () funkcija za barvo senc.

The rgb del rgba predstavlja vrednosti rdečega, zelenega in modrega barve, medtem ko a predstavlja kanal alfa, kateri je preglednost.

Za alfa kanal vrednost 1 ustvari motna barva, medtem ko 0 ustvari a popolnoma prozorna barva.

Z dodelitvijo vrednosti med 0 in 1 alfa-kanalu vrednosti barve rgba senčnika polja lahko ustvarite polprepustno prekrivanje.

Ustvarite kodo za predstavitev

Naš demo bo prikazal slike in imena različnih pokemonov. Tukaj bomo ustvarili samo kodo za Bulbasaur, prvo pokemon v demo, saj so ostali na enak način (na Codepen lahko tudi preverite kodo za njih).

HTML

Za HTML moramo le ustvarite polje na katero bomo dodali vse ostalo s CSS.

CSS

V spodnji CSS je .pokemon elementi prikažejo pokemon slike in .pokemon :: po psevdoelementi nosijo ime pokemon.

Odkar je box-shadow nepremičnine lahko sprejme več vrednosti Da bi prikaže več senc, poleg senčnika prekrivanja sem dodal še druge sence sive barve .pokemon in .pokemon: hover elementi za estetiko.

 / * pokemon slike * / .pokemon širina: 200px; višina: 200px; / * sredinska vsebina z uporabo box box * / display: flex; justify-content: center; align-items: center; / * prekrivanje * / box-shadow: 0 0 0 100px inset, 0 0 5px sivo; / * hover-out prehod * / prehod: box-shadow 1s;  / * pokemon imena * / .pokemon :: after širina: 80%; višina: 80%; prikaz: blok; font: 16pt 'bookman old syle'; barva: bela; obroba: 2px trdna; text-align: center; / * sredinska vsebina z uporabo box box * / display: flex; justify-content: center; align-items: center; / * hover out transition * / prehod: neprosojnost 1s .5s;  / * razkrije pokemon sliko na hover * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px siva, 0 0 10px siva inset;  / * skrij pokemon ime na hover * / .pokemon: hover :: after transition: opacity .5s; motnost: 0;  

Ko .pokemon Elementi so obrnjeni, njihova škatla s slogom se mora spremeniti, da razkrije sliko za sabo.

Vidite lahko, da .pokemon: hover izbirnik dobi novo senčno polje, ki odstrani prekrivanje, in .pokemon: hover :: after Izbirnik skrije ime pokemon z uporabo motnosti nepremičnine.

Morda ste opazili tudi neobstoj barvnih vrednosti v prekrivnih senci v škatli .pokemon in .pokemon: hover pravila. Navesti je treba barvo prekrivne škatle za posamezne pokemone v lastnih ločenih pravilih, saj so vsi različni drug od drugega.

Kot box-shadow nima nobene lastnine, ne morete nastaviti barve senc posamezno z nekaj podobnim, box-shadow-color; namesto tega - uporabljamo barve nepremičnine.

Privzeto, ko podate vrednost za barve lastnost, ta vrednost je uporablja se za obrobo, obris in barve senčnih polj prav tako. Torej lahko preprosto uporabite barve lastnost za dodajanje barve v senčno polje.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * barvna vrednost, ki se uporablja za barvno senčno polje * / barva: rgba (71, 121, 94, 0.9);  #bulbasaur :: after / * ime pokemon * / vsebina: 'Bulbasaur';  

Barva sence prekrivanja uporablja prej omenjeno rgba () funkcijo z 0,9 za vrednost alfa, da postane prekrivna prosojna.

Poleg barve prekrivne box-shadow, zgornji CSS dodaja tudi pravila, ki so individualna za vsak pokemon - slika kot slika ozadja in ime.

In to je vse, pripravljeni smo z našo prekrivno sliko samo v barvi CSS. Oglejte si kodo vseh pokemonov v peresu spodaj.