Creați un efect de afișare a imaginii numai pentru CSS cu limite transparente
A Efectul de afișare a imaginii numai pentru CSS pot fi rezolvate în moduri diferite. De fapt, este destul de ușor să codificați un design în care imaginea iese în evidență (este suprasolicitat de) fundalul său solid -doar tu plasați o imagine peste un element mai mic, cu fundal solid.
Puteți obține același rezultat dacă utilizați granițe transparente, unde păstrezi dimensiunea elementului de fundal la fel ca cea a primelor elemente și să adauge granițe transparente pentru a creați un spațiu gol ca prim plan să se reverse în.
Sunt unele avantaje în utilizarea celei de-a doua metode. Deoarece frontierele transparente oferă zonei în care prim-planul se poate depăși, putem controla direcția depășirii între marginile stânga, dreapta, de sus și de jos. De asemenea, având aceeași dimensiune atât pentru fundal, cât și pentru fundal facilitează mutarea ambelor elemente simultan de-a lungul paginii.
Pe scurt, vom vedea cum să facem asta creați un efect de afișare a imaginii numai pentru CSS folosind un fundal solid mai mic cu imaginea din prim plan care are granițe transparente. Puteți să verificați demo final de mai jos.
1. Creați codul inițial
HTML-înțelept, unul singur În CSS, folosim două variabile CSS, De asemenea, adăugăm Noi adăugați un gol Adăugăm imaginea la Pe captura de ecran de mai jos puteți vedea ce avem până acum ( Pentru a adăuga mai mic (slide-out) fundal în spatele imaginii, vom folosi celălalt pseudo-element, Creăm o altă variabilă CSS, lăţime se calculează ca înălţime se calculează ca Cu Un filtru CSS de Iată-l captura de ecran a demo-ului prestate până în prezent (cu Noi adaugă Așa cum am deja a adăugat Mai jos, puteți vedea demo final. Dacă afișați
--BGC și --întunecos pentru culoarea de fundal si dimensiuni din .foo container, respectiv. În exemplu, am folosit aceeași valoare pentru lățimea și înălțimea pentru a obține o cutie în formă de pătrat, creați variabile separate pentru înălțimea și lățimea dacă doriți un dreptunghiular.Poziția: relativă regula la .foo, astfel încât pseudo-elementele pe care le vom folosi dezvăluind imaginea, poate fi absolut pozitionata (vezi mai jos), și astfel stivuite unii pe alții. .foo -bgc: # FFCC03; --dim: 300px; lățime: var (- dim); înălțime: var (- dim); fundal-culoare: var (- bgc); poziția: relativă;
conţinut proprietate la ambele pseudo-elemente, .foo :: înainte și .foo :: după, pentru a le preda în mod corespunzător. .foo :: înainte, .foo :: după content: "; position: absolute; left: 0; top: 0;
.foo element, cele două pseudo-elemente ale sale, .foo :: înainte, .foo :: după, si al lor :planare pseudo-clase obtine o tranziție proprietate asta va fi adăugați o tranziție ușoară la ei pentru 500 de milisecunde (o jumătate de secundă). .foo, .foo: hover, .foo :: înainte, .foo :: după, .foo: hover :: înainte, .foo: hover :: după transition: transform 500ms easy-in;
2. Adăugați imaginea
.foo :: înainte pseudo-element de ca imagine de fundal, și dimensionați-o pentru a acoperi întregul pseudo-element cu lăţime și înălţime proprietăți. Noi stivă-l chiar sub .foo element folosind z-index: -1 regulă. .foo :: înainte de lățimea: 100%; înălțime: 100%; fundal: url (camel.png) centru / copertă; z-index: -1;
centru cuvinte cheie centrează imaginea, in timp ce acoperi cuvântul cheie scalarează imaginea acoperă întregul element păstrând în același timp raportul de aspect. z-index este eliminat din .foo :: înainte astfel încât să poată fi văzut):
3. Adăugați fundalul glisant
.foo :: după.--b, pentru lățimea graniței. Noi dam trei frontiere transparente la ::după pseudo-element de: sus, dreapta și fund. .foo :: după --b: 20px; lățime: calc (100% - var (- b)); înălțime: calc (100% - calc (var (- b) * 2)); frontieră: var (- b) solid transparent; frontieră-stânga: niciuna; box-shadow: inserție 0 var (- dim) 0 var (- bgc); filtru: luminozitate (.8); z-index: -2;
calc (100% - var - b)) care se întoarce lățimea totală a .foo minus lățimea totală a limitelor sale orizontale (doar la granița dreaptă, deoarece nu există limită de stânga).calc (100% - calc (var (- b) * 2)) care se întoarce înălțimea totală a .foo minus lățimea totală a marginilor sale verticale (margini de sus și de jos).box-shadow proprietate, noi, de asemenea adăugați o umbră orizontală pentru inserție de aceeași dimensiune ca .foo (care este var (- dim)).luminozitate (0.8) întunecă culoarea de fundal un pic, și în final, indicele z: -2 regulă plasează ::după pseudo-element dedesubt ::inainte de care conține imaginea.z-index îndepărtate din ambele pseudo-elemente astfel încât să poată fi văzute):
4. Adăugați transformarea
transforma proprietate la cele două pseudo-elemente, astfel încât atunci când utilizatorul se deplasează .foo, ambele pseudo-elemente sunt mișcată orizontal.tranziție proprietății tuturor elementelor la sfârșitul etapei 1, mișcarea imaginii și a fundalului acesteia sunt ambele animate. .foo: hover :: înainte, .foo: hover :: după transform: translateX (100%);
Bonus: Marja opțională
.foo alături de alte elemente pe o pagină și doriți ca aceste alte elemente să îndepărtați-vă atunci când imaginea și fundalul ei se îndepărtează, atunci adăugați o margine dreaptă de aceeași lățime ca cea a .foo la .foo: Hover element. .foo: hover marginea-dreapta: var (- dim);
