Titlul dvs. este una dintre cele mai importante părți ale paginii dvs. de pornire. Aceasta este de obicei ceea ce vedeți mai întâi și, prin urmare, ceea ce determină prima impresie. Ca orice altă primă impresie, vrei să fie bună. Acum, dacă sunteți în căutarea unui mod creativ de a vă prezenta titlul, vă veți bucura de acest tutorial, deoarece vă vom arăta cum să adăugați animații de bloc de text CSS la titlu și puteți descărca gratuit fișierul JSON de aspect!
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.
Să începem proiectarea
Adăugați secțiunea # 1
Fundal gradient
Începeți prin adăugarea unei secțiuni obișnuite la o pagină nouă sau la pagina la care lucrați. Deschideți setările secțiunii și aplicați următorul fundal de gradient:
- Culoarea 1: # f0f2b
- Culoarea 2: # c10b1a
- Tipul gradientului: liniar
- Direcția gradientului: 63deg
spaţierea
Comutați la fila de proiectare a secțiunii și aplicați următoarele valori personalizate de umplere sus și jos pe diferite dimensiuni de ecran:
- Înveliș superior: 7vw (desktop), 20vw (tabletă), 25vw (telefon)
- Garnitură de jos: 7vw (birou), 20vw (tabletă), 25vw (telefon)
frontieră
De asemenea, adăugați un chenar la secțiune.
- Lățimea marginii: 2vw (sus, stânga, dreapta)
- Lățimea marginii inferioare: 0vw
- Culoarea frontierei: #ffffff
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:
dimensionarea
Deschideți parametrii liniei și modificați parametrii de dimensionare în consecință:
- Lățime: 100%
- Lățime maximă: 100%
Adăugați un modul text la coloană
Adăugați conținut H1
Apoi adăugați un modul text cu un titlu H1 la alegere.
Adăugați etichete Div la fiecare cuvânt din titlul H1
Treceți la fila text a copiei titlului și adăugați un div diferit la fiecare cuvânt din titlu. ID-ul CSS trebuie să fie diferit pentru fiecare cuvânt.
Gata
la
Construi
Frumos
Site-uri web?
Setări text H1
Treceți la fila de proiectare a modulului și modificați setările de text H1 în consecință:
- Titlul fontului: Work Sans
- Greutatea fontului din titlu: mediu
- Culoarea textului antetului: #ffffff
- Dimensiune text antet: 4vw (desktop), 5vw (tabletă), 6vw (telefon)
- Înălțimea liniei capului: 1,4 em
spaţierea
Apoi modificați valorile marginilor pe diferite dimensiuni ale ecranului.
- Marja stângă: 20vw (birou și tabletă), 15vw (telefon)
- Marja dreaptă: 35vw (desktop), 20vw (tabletă), 15vw (telefon)
Adăugați un modul de cod la coloană
Introduceți cod CSS
Pentru ca animația blocului de text să se aplice titlului nostru, vom avea nevoie de un cod CSS. Vom adăuga acest cod CSS într-un nou modul de cod.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
spaţierea
Comutați la fila de proiectare a modulului și eliminați toate umpluturile implicite de jos.
- Marja de jos: 0px
Adăugați un modul buton la coloană
Adăugați o copie
Următorul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.
Setări buton
Treceți la fila de proiectare a modulului și modificați setările butonului în mod corespunzător:
- Utilizați stiluri personalizate pentru buton: Da
- Mărimea textului butonului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Culoarea textului butonului: #ffffff
- Culoarea fundalului butonului: # 000000
- Lățimea marginii butonului: 0px
- Fontul butonului: Work Sans
spaţierea
Apoi accesați setările de spațiere și aplicați marjele personalizate și valorile de umplere pe diferite dimensiuni ale ecranului.
- Marja de sus: 3vw (birou),
- Marja stângă: 20vw (birou și tabletă), 15vw (telefon)
- Înveliș superior: 1.2vw (desktop), 2vw (tabletă), 4vw (telefon)
- Garnitură de jos: 1.2vw (birou), 2vw (tabletă), 4vw (telefon)
- Căptușire stânga: 1.8vw (desktop), 3vw (tabletă), 6vw (telefon)
- Căptușire dreaptă: 1.8vw (birou), 3vw (tabletă), 6vw (telefon)
Animaţie
Personalizați și setările de animație.
- Stil de animație: Flip
- Direcția animației: în jos
- Întârziere animație: 2000 ms
- Intensitatea animației: 100%
- Opacitatea de pornire a animației: 100%
- Curba vitezei animației: ușurință în intrare
- Repetați animația: o dată
Adăugați secțiunea # 2
Continuați adăugând o nouă secțiune obișnuită chiar sub cea anterioară.
spaţierea
Deschideți setările secțiunii și îndepărtați captusea superioară implicită.
- Garnitură superioară: 0px
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga mai multe module, deschideți parametrii liniei și lăsați linia să ocupe întreaga lățime a containerului de secțiune.
- Lățime: 100%
- Lățime maximă: 100%
Adăugați un modul text la coloană
Adăugați conținut
Apoi, adăugați un modul text cu a cuprins descrierea la alegere.
Culoare de fundal
Adăugați o culoare albă de fundal.
- Culoare fundal: #ffffff
Setări text
Treceți la fila de proiectare a modulului și modificați setările de text în consecință:
- Font text: Work Sans
- Culoarea textului: # 9b9b9b
- Dimensiunea textului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Înălțimea liniei de text: 2.6em
spaţierea
Adăugați, de asemenea, valori de spațiere personalizate pe diferite dimensiuni de ecran.
- Marja de sus: -5vw (desktop), -20vw (tabletă), -27vw (telefon)
- Marja stângă: 20vw (birou), 13vw (tabletă), 8vw (telefon)
- Marja dreaptă: 20vw (desktop), 13vw (tabletă), 8vw (telefon)
- Înveliș superior: 5vw (desktop), 7vw (tabletă și telefon)
- Garnitură de jos: 5vw (birou), 7vw (tabletă și telefon)
- Căptușire stânga: 3vw (desktop), 5vw (tabletă), 6vw (telefon)
- Căptușire dreaptă: 3vw (birou), 5vw (tabletă), 6vw (telefon)
Cutie de umbră
Și finalizați setările modulului aplicând o umbră de casetă subtilă. Asta e!
- Cutie de umbră Box Box: 50px
- Culoare umbră: rgba (0,0,0,0,1)
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Ultimele gânduri
În acest articol, v-am arătat cum să adăugați animații cu blocuri de text CSS la titlu. Este important să vă asigurați că titlul dvs. este vizibil și citit de la început, adăugând animație la titlu vă poate ajuta cu siguranță! De asemenea, ați putut descărca gratuit fișierul JSON cu aspect. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Tradus din: ElegantThemes
