Cum se efectuează doar suprapunerile CSS cu Box-Shadow

Suprapuneri de conținut sunt o parte proeminentă a designului web modern. Ei te ajută ascunde un element pe o pagină web și mai târziu - cu aprobarea utilizatorului - dezvăluiți-o, și să afișeze informații sau comenzi suplimentare, cum ar fi butoanele din spatele acesteia.

O suprapunere tipică este semitransparent, cu culoarea fundalului solid (de obicei, negru) și există un text sau butoane pe care utilizatorii să le poată vedea sau să le interacționeze. După ce apare interacțiunea (clic sau deplasare), suprapunerea este eliminat și dezvăluie conținutul sub el.

În acest articol, vom analiza cum să procedăm adăugați o suprapunere colorată imaginilor prin utilizarea CSS pură. Puteți vedea rezultatul final pe demo-ul de mai jos. Plasați cursorul imaginilor pentru a face ca suprapunerile să dezvăluie pokemonii. Deși acest post discută despre imagini, tehnica pe care o prezintă poate fi aplicată în condiții de siguranță și pentru alte tipuri de conținut (cum ar fi blocurile de text).

Evitați adăugarea de elemente suplimentare HTML

Suprapunerile sunt create frecvent de poziționarea unui element HTML suplimentar cu un opacitate valoare mai mică de 1 chiar deasupra elementului care trebuie acoperit. Problema este că această tehnică implică utilizarea unui suplimentar element (sau pseudo-element) pentru suprapunere.

Dacă nu sunteți un pedant de dimensiune HTML, având un element suplimentar pentru suprapunere nu este probabil o afacere mare, deoarece cel mai probabil nu va impozita lățimea de bandă a oricărei rețele atât de mult. Cu toate acestea separa regulile de stil pentru elementele și suprapunerile acestora încă dăunează citirii și mentenabilității CSS.

Pentru a vă păstra codul în ordine și nu pentru a vă împiedica conturul HTML, este o alegere mai bună să utilizați o soluție numai pentru CSS.

Creați suprapunere cu box-shadow

Deci, cum puteți crea o suprapunere cu CSS? Cu ajutorul box-shadow Proprietatea CSS. Umbra de box este perfectă pentru acest job, deoarece ceea ce este o suprapunere, dar o umbra întunecată aruncată peste un element?

Caseta de umbră are o valoare de proprietate numită medalion, care provoacă apariția umbrei în interiorul cadrului casetei.

O umbră de cutie cu o mărime a umbrei de jumătate sau mai mult de jumătate din lățimea și înălțimea elementului creează o umbră care acoperă întreg element.

 .caseta width: 200px; înălțime: 200px; box-shadow: verde 0 0 0 100px inset;  

Deoarece suprapunerile de obicei să aveți o anumită transparență, trebuie să îl adăugați și la umbra cutiei. Acest lucru se poate face folosind RGBA () funcție pentru culoarea umbrei.

rgb parte din rgba, reprezintă valorile canalului de culori roșu, verde și albastru, în timp ce A reprezintă canal alfa, care este responsabilă de transparență.

Pentru canalul alfa, o valoare de 1 creează un culoarea opacă, în timp ce 0 creează o culoare transparentă.

Prin atribuirea unei valori între 0 și 1 canalului alfa al valorii de culoare rgba a umbrei cutiei, puteți creați o suprapunere semi-transparentă.

Creați codul pentru demonstrație

Demo-ul nostru va arăta imaginile și numele diferitelor pokemoni. Aici vom crea doar codul pentru Bulbasaur, primul pokemon din demo, pe măsură ce ceilalți sunt făcuți în același mod (pe Codepen puteți verifica și codul pentru ei).

HTML

Pentru HTML, avem nevoie doar de creați o cutie la care vom adăuga totul cu CSS.

CSS

În CSS de mai jos, .pokemon elementele afișează imaginile pokemon și .pokemon :: după pseudo-elementele poartă numele pokemonului.

Din moment ce box-shadow proprietate pot lua mai multe valori pentru a fac mai multe umbre, pe lângă umbra suprapusă, am adăugat și alte umbre de gri .pokemon și .pokemon: Hover elemente pentru estetică.

 / * poze pokemon * / .pokemon width: 200px; înălțime: 200px; / * Centrul conținutului utilizând flex box * / display: flex; justify-content: centru; align-items: center; / * suprapunere * / box-shadow: 0 0 0 100px inset, 0 0 5px gri; / * hover-out tranziție * / tranziție: box-shadow 1s;  / * nume pokemon * / .pokemon :: după width: 80%; înălțime: 80%; afișare: bloc; fontul: 16pt 'bookman old syle'; culoare albă; frontieră: 2px solid; text-align: centru; / * Centrul conținutului utilizând flex box * / display: flex; justify-content: centru; align-items: center; / * hover out tranziție * / tranziție: opacitate 1s .5s;  / * dezvăluie poza pokemon pe hover * / .pokemon: hover tranziție: box-shadow 1s; box-shadow: 0 0 0 inscripția 5px, 0 0 5px gri, 0 0 10px gray inset;  / * ascunde numele de pokemon pe hover * / .pokemon: hover :: după transition: opacity .5s; opacitate: 0;  

Cand .pokemon elementele sunt plutind, umbra lor de box trebuie să se schimbe pentru a dezvălui imaginea din spatele ei.

Puteți vedea că .pokemon: Hover selectorul primește o nouă umbră care elimină suprapunerea și .pokemon: hover :: după selector ascunde numele pokemonului folosind opacitate proprietate.

S-ar putea să fi observat de asemenea absența valorilor de culoare în caseta de suprapunere-umbre în .pokemon și .pokemon: Hover reguli de stil. Este necesar să se precizeze culoarea umbrei suprapus-casetă a pokemonilor individuali în propriile lor reguli de stil separate, deoarece toate sunt diferite unul de celălalt.

La fel de box-shadow nu are nici o proprietate lungă, nu puteți seta culoarea umbrei individual cu ceva asemănător, box-shadow-culoare; în schimb - folosim culoare proprietate.

În mod implicit, când dați o valoare pentru culoare proprietate, acea valoare este aplicate pentru graniță, schiță și culoarea umbra în cutie de asemenea. Deci, puteți folosi pur și simplu culoare proprietate pentru a adăuga culoarea la umbra cutiei.

 #bulbasaur imagine-imagine: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * Valoarea culorii folosită pentru culoarea umbrei în cutie * / culoare: rgba (71, 121, 94, 0.9);  #bulbasaur :: după / * pokemon name * / content: 'Bulbasaur';  

Culoarea umbrei suprapuse utilizează cele menționate mai sus RGBA () funcția cu 0,9 pentru valoarea alfa pentru a face transparența transparentă.

În afară de culoarea casetei de suprapunere, CSS de mai sus adaugă și regulile individuale fiecărui pokemon - imaginea imagine de fundal și numele.

Și asta e totul, suntem pregătiți cu suprapunerea imaginilor colorate numai de CSS. Uitați-vă la codul tuturor pokemonilor din stiloul de mai jos.