Kako CSS samo prekriva efekt s Box-Shadow

Slojevi sadržaja su istaknuti dio modernog web dizajna. Oni vam pomažu sakriti element na web-stranici, a kasnije - uz odobrenje korisnika - otkriti, i prikazati dodatne informacije ili kontrole, kao što su gumbi iza njega.

Tipičan sloj je polu prozirno, s boja pozadine (obično crno), a na njemu se nalazi tekst ili gumbi koji korisnici mogu vidjeti ili komunicirati. Nakon interakcije (klikanje ili lebdenje) dolazi do preklapanja uklanja se i otkriva sadržaj ispod nje.

U ovom članku pogledat ćemo kako dodajte obojeni preklop na slike pomoću čistog CSS-a. Konačni rezultat možete vidjeti u nastavku. Lebdite slike da bi slojevi otkrili pokemone. Iako ovaj post raspravlja o slikama, tehnika koju predstavlja može se sigurno primijeniti i na druge vrste sadržaja (kao što su tekstualni blokovi).

Izbjegavajte dodavanje dodatnih HTML elemenata

Slojeve često stvaraju pozicioniranje dodatnog HTML elementa s neprozirnost vrijednost manja od 1 odmah iznad elementa koji treba pokriti. Problem je u tome što ova tehnika uključuje upotrebu jednog ekstra element (ili pseudo-element) za prekrivanje.

Ako niste pedantan HTML veličina, imati dodatni element za prekrivanje vjerojatno nije velika stvar, jer najvjerojatnije neće toliko opteretiti propusnost bilo koje mreže. No ima odvojen pravila stila za elemente i njihove slojeve još uvijek štete čitljivosti i održivosti CSS-a.

Da bi vaš kôd bio u redu, a ne da biste zabrljali svoj HTML obris, bolji je izbor koristiti CSS-rješenje.

Izradite preklapanje s kutija-sjena

Kako zapravo možete stvoriti sloj samo za CSS? Uz pomoć kutija-sjena CSS svojstvo. Box-shadow je savršen za ovaj posao, jer ono što je sloj, ali tamna sjena baca se nad element?

Box-shadow ima vrijednost svojstva umetak, što uzrokuje pojavljivanje sjene unutar okvira okvira.

Umetnuta sjena u boji s veličinom sjene pola ili više od polovice širine i visine elementa stvara tu sjenu pokriva čitav element.

 .kutija širina: 200px; visina: 200px; kutija-sjena: zelena 0 0 0 100px umetak;  

Obično se prekrivaju imaju neku transparentnost, morate ga dodati i u sjenku okvira. To se može učiniti pomoću RGBA () funkcija za boju sjene.

rGB dio rgba, predstavlja vrijednosti crvenog, zelenog i plavog kanala, dok predstavlja alfa kanal, koji je odgovoran za transparentnost.

Za alfa kanal, vrijednost 1 stvara neprozirna boja, dok 0 stvara a potpuno transparentna boja.

Dodjeljivanjem vrijednosti između 0 i 1 alfa-kanalu rgba vrijednosti boje sjene kutije, možete stvorite poluprozirni sloj.

Napravite kôd za demo

Naš demo prikazat će slike i nazive različitih pokemona. Ovdje ćemo napraviti samo kôd za Bulbasaur, prvi pokemon u demo verziji, budući da su ostali napravljeni na isti način (na Codepenu možete pogledati i kod za njih).

HTML

Za HTML, samo trebamo stvorite okvir na što ćemo dodati sve ostalo s CSS-om.

CSS

U CSS-u ispod, .Pokemon elementi prikazuju pokemon slike i .Pokemon :: poslije pseudo-elementi nose naziv pokemon.

Od kutija-sjena svojstvo može imati više vrijednosti da bi prikazati više sjena, Osim sjene, dodao sam i druge sjene sive boje .Pokemon i .Pokemon: hover elementi za estetiku.

 / * pokemon slike * / .pokemon širina: 200px; visina: 200px; / * središte sadržaja pomoću flex box * / display: flex; justify-content: centar; align-items: centar; / * preklapanje * / kutija-sjena: 0 0 0 100px umetak, 0 0 5px sivo; / * hover-out prijelaz * / prijelaz: box-shadow 1s;  / * pokemon imena * / .pokemon :: after width: 80%; visina: 80%; prikaz: blok; font: 16pt 'bookman old syle'; boja: bijela; granica: 2px čvrsta; poravnavanje teksta: centar; / * središte sadržaja pomoću flex box * / display: flex; justify-content: centar; align-items: centar; / * hover out tranzicija * / prijelaz: neprozirnost 1s .5s;  / * otkriva pokemon sliku na hover * / .pokemon: hover transition: box-shadow 1s; kutija-sjena: 0 0 0 5px umetak, 0 0 5px siva, 0 0 10px sivi umetak;  / * sakrij pokemon ime na hover * / .pokemon: hover :: after transition: opacity .5s; neprozirnost: 0;  

Kada .Pokemon elementi se okreću, njihova kutija sjena treba se promijeniti kako bi se otkrila slika iza sebe.

Možete vidjeti da je .Pokemon: hover selektor dobiva novu kutiju-sjena koja uklanja sloj i .Pokemon: hover :: poslije Izbornik skriva ime pokemona pomoću tipke neprozirnost svojstvo.

Možda ste također primijetili odsutnost vrijednosti boja u pokrovnim sjenama u kutiji .Pokemon i .Pokemon: hover pravila stila. Potrebno je navesti prekrivnu boju sjena u kutiji pojedinih pokemona u vlastitim posebnim pravilima stila, jer su svi međusobno različiti.

Kao kutija-sjena nema dugotrajne imovine, ne možete postaviti boju sjene pojedinačno s nečim sličnim, kutija-sjena-boja; umjesto toga - koristimo boja svojstvo.

Prema zadanim postavkama, kada date vrijednost za boja vrijednost, vrijednost primjenjuju se za rubove, obrise i boje kutije također. Dakle, možete jednostavno koristiti boja svojstvo za dodavanje boje u box-shadow.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * vrijednost boje koja se koristi za boju sjena u boji * / boja: rgba (71, 121, 94, 0.9);  #bulbasaur :: after / * ime pokemena * / sadržaj: 'Bulbasaur';  

Boja prekrivene sjene koristi gore spomenuto RGBA () funkcija s 0,9 za alfa vrijednost kako bi sloj bio proziran.

Osim boje sloja box-shadow, gornji CSS također dodaje pravila koja su pojedinačna za svaki pokemon - slika kao pozadinska slika i ime.

I to je sve, spremni smo s našim prekrivanjem slike u boji samo za CSS. Pogledajte kôd svih pokemona u olovci ispod.