Cum se utilizează umbrele casetei ca fundaluri glisante pe Hover

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să utilizați umbrele de cutie ca fundaluri glisante pe hover. Ne vom ocupa de trei exemple diferite care arată uimitor pe pagina de pornire a pachetului personal de machetare stilist, dar posibilitățile pe care le aveți sunt cu adevărat nelimitate. Vom recrea fiecare dintre fundalele de glisare pas cu pas folosind doar opțiunile încorporate ale Divi.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial și în diferitele sale exemple, să aruncăm o privire asupra rezultatului.

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Încărcați pagina principală a pachetului de machete de stilist personal în pagina nouă

Începeți adăugând o pagină nouă pe site-ul dvs. web și încărcați aspectul paginii de pornire Personal Stylist. Deși vom folosi acest aspect pentru a realiza toate cele trei exemple prezentate mai sus, puteți utiliza această abordare pentru orice tip de aspect sau site web la care lucrați.

Recreați exemplul nr. 1

Buton Culoare umbră

Să începem să recreăm primul exemplu! Acest exemplu vă ajută să evidențiați secțiunea erou. Primul lucru pe care trebuie să-l faceți este să deschideți modulul buton pe care îl puteți găsi în prima coloană și să schimbați culoarea umbrelor casetei. Facem acest lucru pentru a ne asigura că culoarea se potrivește bine cu umbra cutiei roz pe care o vom adăuga la cursor.

Setări secțiune

Culoare de fundal implicită

Continuați deschizând setările secțiunii. Asigurați-vă că culoarea de fundal implicită rămâne aceeași.

• Culoarea fundalului: # 2a2a2a

Plasați cursorul pe culoarea de fundal

Schimbați cursorul de fundal.

• Culoare fundal: #ffffff

Default Box Shadow

Continuați adăugând o umbră de casetă implicită la secțiune.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Culoare umbră: rgba (255,137,159,0,82)
• Box Shadow Position: Umbra interioară

Hover Box Shadow

Schimbați poziția orizontală a umbrei casetei. Adăugați orice valoare la alegere.

• Poziție orizontală a umbrei cutiei: 800 px

Dacă doriți ca efectul de glisare să apară de sus în jos, puteți schimba în schimb poziția verticală a umbrei casetei.

• Box Shadow Vertical Position: 650px

Tranziții

Nu în ultimul rând, reduceți durata tranziției în fila avansată pentru a crea o tranziție rapidă între culoarea fundalului și fundalul glisat în umbră.

• Durata tranziției: 200ms
• Curba vitezei de tranziție: ușurință

Recreați exemplul nr. 2

Modificați primul modul de text

Plasați cursorul pe Setări text

Trecem la următorul exemplu! Deschideți modulul de text pe care îl puteți găsi în prima coloană și schimbați culoarea textului la cursor.

• Culoarea textului: deschis

Plasați mouse-ul peste frontieră

Continuați schimbând culoarea chenarului în cursorul mouse-ului în fila de proiectare.

• Culoare margine: rgba (255,137,159,0,82)

Default Box Shadow

Apoi, accesați setările de umbră a casetei și adăugați o umbră de casetă implicită.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Culoare umbră: rgba (255,137,159,0,82)
• Box Shadow Position: Umbra interioară

Hover Box Shadow

Schimbați poziția orizontală pe hover.

• Poziție orizontală a umbrei cutiei: 520 px

Tranziții

Nu în ultimul rând, măriți durata tranziției în fila avansată pentru a crea o tranziție lină.

• Durata tranziției: 700 ms
• Curba vitezei de tranziție: ușurință

Copiați și lipiți stilurile modulului în al treilea modul text

Folosim aceleași stiluri de module și pentru al treilea modul de text. Pentru a economisi timp, pur și simplu vom copia stilurile de module ale primului modul de text și le vom lipi pe al treilea modul de text.

Modificați al doilea modul de text

Setări text

Cu toate acestea, al doilea modul de text este ușor diferit. Deschideți modulul și accesați setările de text. Singurul lucru pe care va trebui să-l faceți este să schimbați culoarea textului la cursor.

• Culoarea textului: deschis

Plasați mouse-ul peste frontieră

Continuați mergând la setările de margine și schimbând culoarea chenarului în cursă.

• Culoare margine: rgba (255,137,159,0,82)

Default Box Shadow

E timpul să adăugați fundalul de glisare! Începeți adăugând o umbră de casetă implicită folosind următoarele setări:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Culoare umbră: rgba (255,137,159,0,82)
• Box Shadow Position: Umbra interioară

Hover Box Shadow

Schimbați poziția verticală a umbrei casetei pe cursor.

• Box Shadow Vertical Position: 500 px

Tranziții

Nu în ultimul rând, creșteți și durata de tranziție a acestui modul text.

• Durata tranziției: 700 ms
• Curba vitezei de tranziție: ușurință

Recreați exemplul nr. 3

Schimbați setările rândului

Dimensionare

Trecem la următorul și ultimul exemplu! Începeți prin deschiderea setărilor de rând și faceți câteva modificări la setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2

Spațiere

Continuați adăugând și câteva rânduri personalizate la rând.

• Căptușeală stângă: 10vw
• Garnitura dreapta: 10vw
• Coloana 2 Căptușeală stângă: 15vw (Desktop), 0vw (Tabletă și telefon)

Default Box Shadow

Apoi, adăugați o umbră de casetă implicită la rând.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Culoare umbră: # ff899f
• Box Shadow Position: Umbra interioară

Hover Box Shadow

Schimbați poziția orizontală pe hover.

• Poziție orizontală a umbrei cutiei: 50 px

Tranziții

De asemenea, modificăm durata tranziției și întârzierea tranziției în fila avansată.

• Durata tranziției: 1000 ms
• Întârziere de tranziție: 700 ms
• Curba vitezei de tranziție: ușurință

Modificați setările secțiunii

Eliminați dimensionarea

După ce ați terminat modificarea setărilor rândului, continuați și deschideți setările secțiunii. Treceți la fila de proiectare și resetați lățimea făcând clic dreapta și făcând clic pe reset.

Eliminați chenarul

Faceți același lucru și pentru lățimea chenarului.

Default Box Shadow

Continuați adăugând o umbră de casetă implicită.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Culoare umbră: # 2a2a2a
• Box Shadow Position: Umbra interioară

Hover Box Shadow

Schimbați poziția orizontală a umbrei casetei pe cursor.

• Poziție orizontală a umbrei cutiei: 60 px

Tranziții

Și pentru a termina proiectarea, măriți durata tranziției în fila avansată.

• Durata tranziției: 1000 ms

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra celor trei exemple diferite pe care le-am recreat pas cu pas.

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Gânduri finale

În această postare, v-am arătat cum să utilizați umbrele cutiei ca fundaluri glisante numai cu opțiunile încorporate ale Divi. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, în care încercăm să punem ceva suplimentar în cutia de instrumente în fiecare săptămână. Sperăm că acest tutorial vă va inspira să utilizați umbrele cutiei într-un mod unic și creativ. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!