Kā CSS tikai pārklāj efektu ar Box-Shadow

Satura pārklājumi ir svarīga mūsdienu web dizaina sastāvdaļa. Viņi jums palīdz slēpt elementu Web lapā un vēlāk - ar lietotāja apstiprinājumu - atklāt to, un parādīt papildu informāciju vai vadīklas, piemēram, pogas aiz tā.

Tipisks pārklājums ir daļēji caurspīdīga, ar cieta fona krāsa (parasti melnā krāsā), un tajā ir daži teksti vai pogas, lai lietotāji varētu redzēt vai mijiedarboties. Pēc mijiedarbības (noklikšķināšanas vai svārstības) parādās pārklājums izņem un atklāj saturu zem tā.

Šajā rakstā mēs apskatīsim, kā pievienot attēliem krāsainu pārklājumu izmantojot tīru CSS. Galīgo rezultātu var redzēt zemāk. Novietojiet attēlus, lai pārklājumi atklātu pokemonus. Lai gan šī ziņa aplūko attēlus, tā piedāvāto tehniku ​​var droši piemērot arī citiem satura veidiem (piemēram, teksta blokiem).

Izvairieties pievienot papildu HTML elementus

Pārklājumus bieži izveido papildu HTML elementa pozicionēšana ar dūmainība vērtība ir mazāka par 1 tieši virs elementa, kas jāaptver. Problēma ir tā, ka šī metode ir saistīta ar papildus elementam (vai pseidoelementam) pārklājumam.

Ja neesat HTML izmēra pedantisks, papildus pārklājuma elementam, iespējams, nav liela problēma, jo, visticamāk, tas netiks aplikts ar jebkuru tīkla joslas platumu. Tomēr, kam atsevišķi stila noteikumi elementiem un to pārklājumiem joprojām kaitē CSS lasāmībai un uzturēšanai.

Lai jūsu kods būtu kārtībā, nevis lai izjauktu jūsu HTML izklāstu, tā ir labāka izvēle izmantot tikai CSS risinājumu.

Izveidojiet pārklājumu ar kastes ēna

Tātad, kā jūs faktiski varat izveidot tikai CSS pārklājumu? Ar kastes ēna CSS īpašums. Kastes ēna ir ideāli piemērota šim darbam, jo ​​tas ir pārklājums tumšs ēna, kas nodota pār elementu?

Kastes ēnai ir saucamā īpašuma vērtība ieliktnis, kas rada ēnu iekšpusē no kastes rāmja.

Ieliekamās kastes ēna ar ēnu izmēru, kas ir puse vai vairāk par pusi no elementa platuma un augstuma, rada ēnu attiecas uz viss elementu.

 .lodziņš platums: 200px; augstums: 200px; kastes ēna: zaļa 0 0 0 100px ieliktņa;  

Tā parasti pārklājas pārredzamību, jums tas ir jāpievieno arī kastes ēnai. To var izdarīt, izmantojot rgba () funkcija ēnu krāsai.

The rgb daļa rgba, ir sarkanas, zaļas un zilas krāsas kanālu vērtības, bet a ir alfa kanāls, kurš ir atbild par pārredzamību.

Alfa kanālam vērtība 1 rada necaurspīdīga krāsa, kamēr 0 rada a pilnīgi caurspīdīga krāsa.

Piešķirot vērtību starp 0 un 1 no kastes ēnas rgba krāsu vērtības alfa kanāla, varat izveidojiet daļēji caurspīdīgu pārklājumu.

Izveidojiet Demo kodu

Mūsu demo parādīs dažādu pokemonu attēlus un nosaukumus. Šeit mēs tikai izveidosim kodu Bulbasaur, pirmajam pokemonam demo, jo citi tiek veikti vienādi (Codepen jūs varat arī pārbaudīt to kodu).

HTML

Par HTML ir nepieciešams tikai izveidojiet lodziņu ar kuru mēs pievienosim visu pārējo ar CSS.

CSS

Turpmāk norādītajā CSS .pokemon elementi parāda Pokemon attēlus un .pokemon :: pēc pseidoelementi satur Pokemon nosaukumu.

Kopš kastes ēna īpašums var veikt vairākas vērtības lai padarīt vairākas ēnas, bez pārklājuma ēnas es arī pievienoju citas pelēkas ēnas .pokemon un .pokemon: lidināties estētikas elementi.

 / * pokemon bildes * / .pokemon platums: 200px; augstums: 200px; / * centra saturs, izmantojot flex box * / displeju: flex; pamatot saturu: centrs; izlīdzināšanas vienības: centrs; / * overlay * / box-shadow: 0 0 0 100px ieliktnis, 0 0 5px pelēks; / * pārejas pāreja * / pāreja: kastes ēna 1s;  / * pokemon nosaukumi * / .pokemon :: pēc platums: 80%; augstums: 80%; displejs: bloks; fonts: 16pt 'bookman old syle'; krāsa: balta; robeža: 2px ciets; teksta saskaņošana: centrs; / * centra saturs, izmantojot flex box * / displeju: flex; pamatot saturu: centrs; izlīdzināšanas vienības: centrs; / * pārejiet no pārejas * / pārejas: dūmainība 1s .5s;  / * atklāj pokemon attēlu uz hover * / .pokemon: hover pāreja: box-shadow 1s; box-shadow: 0 0 0 5px ieliktnis, 0 0 5px pelēks, 0 0 10px pelēks ieliktnis;  / * paslēpt pokemon nosaukumu uz hover * / .pokemon: hover :: pēc pāreja: necaurredzamība .5s; dūmainība: 0;  

Kad .pokemon elementi ir pamanīti, viņu kaste-ēna ir jāmaina, lai atklātu atpalikušo attēlu.

Jūs varat redzēt, ka .pokemon: lidināties selektors saņem jaunu lodziņu ēnu, kas noņem pārklājumu, un .pokemon: hover :: pēc selektors slēpj Pokemon nosaukumu, izmantojot dūmainība īpašums.

Jūs, iespējams, esat pamanījuši arī krāsu vērtību trūkums pārseguma kastes ēnās .pokemon un .pokemon: lidināties stila noteikumi. Ir jānorāda atsevišķu pokemonu pārklājuma kastes-ēnas krāsa savos atsevišķos stila noteikumos, kā viņi visi atšķiras viens no otra.

Kā kastes ēna nav nekādu garo īpašumu, jūs nevarat iestatīt ēnu krāsu individuāli ar kaut ko līdzīgu, kaste-ēna krāsa; tā vietā - mēs izmantojam krāsa īpašums.

Pēc noklusējuma, kad piešķirat vērtību krāsa īpašums, šī vērtība ir piemērojami robežai, kontūrai un kastes ēnu krāsām arī. Tātad, jūs varat vienkārši izmantot krāsa īpašums, lai pievienotu krāsu kastes ēnai.

 #bulbasaur fona attēls: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * krāsu vērtība, ko izmanto kastes ēnu krāsai * / krāsa: rgba (71, 121, 94, 0,9);  #bulbasaur :: pēc / * pokemon nosaukums * / saturs: “Bulbasaur”;  

Pārklājuma ēnas krāsa izmanto iepriekšminēto rgba () darbojas ar 0,9 par alfa vērtību, lai pārklājums būtu caurspīdīgs.

Neatkarīgi no pārklājuma kastes-ēnas krāsas, iepriekšminētais CSS arī pievieno katram pokemonam individuālus noteikumus - attēlu kā fona attēls un nosaukumu.

Un tas viss, mēs esam gatavi tikai ar CSS tikai krāsainu attēla pārklājumu. Apskatiet visu pokemonu kodu zemāk esošajā pildspalvveida pilnšļircē.