Titulli juaj është një nga pjesët më të rëndësishme të faqes tuaj kryesore. Kjo është zakonisht ajo që shihni së pari, dhe për këtë arsye ajo që përcakton përshtypjen e parë. Si çdo përshtypje tjetër e parë, edhe ju dëshironi që ajo të jetë e mirë. Tani, nëse jeni duke kërkuar një mënyrë krijuese për të paraqitur titullin tuaj, ju do të kënaqeni me këtë tutorial pasi ne do t'ju tregojmë se si të shtoni animacione të bllokut të tekstit CSS në titullin tuaj dhe gjithashtu mund të shkarkoni skedarin JSON të paraqitjes falas!
studim
Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.
Le të fillojmë modelimin
Shtoni seksionin # 1
Sfondi i gradientit
Filloni duke shtuar një seksion të rregullt në një faqe të re ose në faqen ku po punoni. Hapni cilësimet e seksionit dhe aplikoni sfondin e mëposhtëm të gradientit:
- Ngjyra 1: # f0f2b
- Ngjyra 2: # c10b1a
- Lloji i gradientit: linear
- Drejtimi i gradientit: 63deg
ndarje
Kaloni në skedën e dizajnit të seksionit dhe zbatoni vlerat e mëposhtme të personalizuara nga lart dhe në fund në madhësi të ndryshme të ekranit
- Mbushja e sipërme: 7vw (desktop), 20vw (tabletë), 25vw (telefon)
- Mbushja e poshtme: 7vw (tavolinë), 20vw (tabletë), 25vw (telefon)
kufi
Shtoni gjithashtu një kufi në seksion.
- Gjerësia e kufirit: 2vw (sipër, majtas, djathtas)
- Gjerësia e poshtme e kufirit: 0vw
- Ngjyra e kufirit: #ffffff
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:
sizing
Hapni parametrat e linjës dhe modifikoni parametrat e dimensionimit në përputhje me rrethanat:
- Gjerësia: 100%
- Gjerësia maksimale: 100%
Shtoni një modul teksti në kolonë
Shto përmbajtje H1
Pastaj shtoni një modul teksti me një titull H1 të zgjedhur tuaj.
Shtoni etiketa Div për secilën fjalë në titullin H1
Kaloni në skedën e tekstit të kopjes tuaj të titullit dhe shtoni një ndarje të ndryshme për secilën fjalë në titullin tuaj. ID-ja e CSS duhet të jetë e ndryshme për secilën fjalë.
Gati
në
Ndërtoni
E bukur
Uebfaqe?
Cilësimet e tekstit H1
Kaloni në skedën e dizajnit të modulit dhe ndryshoni përkatësisht cilësimet e tekstit H1:
- Shkronja e titullit: Sans pune
- Pesha e shkronjave të titullit: e mesme
- Ngjyra e tekstit të kokës: #ffffff
- Madhësia e tekstit të kokës: 4vw (desktop), 5vw (tabletë), 6vw (telefon)
- Lartësia e vijës së kokës: 1,4 em
ndarje
Pastaj ndryshoni vlerat e diferencës në madhësi të ndryshme të ekranit.
- Kufiri i majtë: 20vw (tavolinë dhe tablet), 15vw (telefon)
- Marzhi i duhur: 35vw (desktop), 20vw (tabletë), 15vw (telefon)
Shtoni një modul kodi në kolonë
Vendosni kodin CSS
Në mënyrë që animacioni i bllokut të tekstit të zbatohet në titullin tonë, do të na duhet disa kod CSS. Ne do ta shtojmë këtë kod CSS në një modul të ri të kodit.
<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>
ndarje
Kaloni në skedën e dizajnit të modulit dhe hiqni të gjitha mbushjet e paracaktuara të poshtme.
- Marzhi i poshtëm: 0px
Shtoni një modul butoni në kolonë
Shto një kopje
Moduli tjetër që na duhet është një modul butoni. Vendosni një kopje të zgjedhjes suaj.
Cilësimet e butonit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e butonit në përputhje me rrethanat:
- Përdorni stilet me porosi për butonin: Po
- Madhësia e tekstit të butonit: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Ngjyra e tekstit të butonit: #ffffff
- Ngjyra e sfondit të butonit: # 000000
- Gjerësia e kufirit të butonit: 0px
- Font butoni: Sans pune
ndarje
Pastaj shkoni te cilësimet e ndarjes dhe aplikoni vlera të personalizuara të marzheve dhe mbushjeve në madhësi të ndryshme të ekranit.
- Marzhi i lartë: 3vw (zyra),
- Kufiri i majtë: 20vw (tavolinë dhe tablet), 15vw (telefon)
- Mbushja e sipërme: 1.2vw (desktop), 2vw (tabletë), 4vw (telefon)
- Mbushja e poshtme: 1.2vw (tavolinë), 2vw (tabletë), 4vw (telefon)
- Mbushja e majtë: 1.8vw (desktop), 3vw (tabletë), 6vw (telefon)
- Mbushja e duhur: 1.8vw (tavolinë), 3vw (tabletë), 6vw (telefon)
gjallëri
Personalizoni gjithashtu cilësimet e animacionit.
- Stili i animacionit: Rrokullisje
- Drejtimi i animacionit: poshtë
- Vonesa e animacionit: 2000 ms
- Intensiteti i animacionit: 100%
- Perde e fillimit të animacionit: 100%
- Lakorja e shpejtësisë së animacionit: lehtësi-marrje
- Përsëritja e animacionit: një herë
Shtoni seksionin # 2
Vazhdoni duke shtuar një seksion të ri të rregullt vetëm nën atë të mëparshëm.
ndarje
Hapni cilësimet e seksionit dhe hiqni mbushjen e sipërme të paracaktuar.
- Mbushja e sipërme: 0px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar më shumë module, hapni parametrat e linjës dhe lëreni që linja të zërë tërë gjerësinë e enës së seksionit.
- Gjerësia: 100%
- Gjerësia maksimale: 100%
Shtoni një modul teksti në kolonë
Shto përmbajtje
Më pas, shtoni një modul teksti me a përmbajtje përshkrimi i zgjedhjes suaj.
Ngjyrë e sfondit
Shtoni një ngjyrë të bardhë në sfond.
- Ngjyra e sfondit: #ffffff
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:
- Shkronja e tekstit: Sans Work
- Ngjyra e tekstit: # 9b9b9b
- Madhësia e tekstit: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Lartësia e vijës së tekstit: 2.6em
ndarje
Shtoni gjithashtu vlera të personalizuara të hapësirës në madhësi të ndryshme të ekranit.
- Marzhi i lartë: -5vw (desktop), -20vw (tablet), -27vw (telefon)
- Marzhi i majtë: 20vw (tavolinë), 13vw (tabletë), 8vw (telefon)
- Marzhi i duhur: 20vw (desktop), 13vw (tabletë), 8vw (telefon)
- Mbushja e sipërme: 5vw (desktop), 7vw (tablet dhe telefon)
- Mbushja e poshtme: 5vw (tavolinë), 7vw (tablet dhe telefon)
- Mbushja e majtë: 3vw (desktop), 5vw (tabletë), 6vw (telefon)
- Mbushja e duhur: 3vw (tavolinë), 5vw (tabletë), 6vw (telefon)
Kuti me hije
Dhe plotësoni cilësimet e modulit duke aplikuar një hije delikate të kutisë. Kjo eshte!
- Fuqia e turbullimit të hijes së kutisë: 50px
- Ngjyra e hijes: rgba (0,0,0,0,1)
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Mendimet e fundit
Në këtë artikull, ne ju treguam se si të shtoni animacione të bllokut të tekstit CSS në titullin tuaj. Importantshtë e rëndësishme të siguroheni që titulli juaj është i dukshëm dhe të lexohet që nga fillimi, duke shtuar animacione në titullin tuaj patjetër që mund të ndihmojë! Ju gjithashtu keni qenë në gjendje të shkarkoni skedarin JSON të paraqitjes falas. Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
Përkthyer nga: ElegantThemes