Vaš je naslov jedan od najvažnijih dijelova vaše početne stranice. To je obično ono što prvo vidite, a time i ono što određuje prvi dojam. Kao i svaki drugi prvi dojam, i vi želite da bude dobar. Ako ste u potrazi za kreativnim načinom predstavljanja naslova, uživat ćete u ovom vodiču jer ćemo vam pokazati kako dodati naslove CSS tekstualnih blokova u naslov, a također možete besplatno preuzeti JSON datoteku izgleda!
pregled
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
Počnimo s dizajnom
Dodajte odjeljak br. 1
Gradijentna pozadina
Započnite dodavanjem redovnog odjeljka na novu stranicu ili na stranicu na kojoj radite. Otvorite postavke odjeljka i primijenite sljedeću pozadinu gradijenta:
- Boja 1: # f0f2b
- Boja 2: # c10b1a
- Tip gradijenta: linearni
- Smjer gradijenta: 63deg
razmak
Prebacite se na karticu dizajna odjeljka i primijenite sljedeće prilagođene vrijednosti gornjeg i donjeg ispuna na različite veličine zaslona:
- Gornja obloga: 7vw (radna površina), 20vw (tablet), 25vw (telefon)
- Donje obloge: 7vw (stol), 20vw (tablet), 25vw (telefon)
granica
Također dodajte obrub odjeljku.
- Širina obruba: 2vw (gornja, lijeva, desna)
- Širina donje granice: 0vw
- Boja obruba: #ffffff
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:
dimenzioniranje
Otvorite parametre linije i promijenite parametre za dimenzioniranje u skladu s tim:
- Širina: 100%
- Maks. Širina: 100%
Dodajte tekstualni modul u stupac
Dodajte H1 sadržaj
Zatim dodajte tekstualni modul s H1 naslovom po vašem izboru.
Svakoj riječi u naslovu H1 dodajte Div oznake
Prebacite se na karticu teksta naslovne kopije i dodajte drugačiji div svakoj riječi u naslovu. CSS ID mora se razlikovati za svaku riječ.
Spreman
na
Izgraditi
Lijep
Web stranice?
Postavke teksta H1
Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta H1:
- Naslov naslova: Work Sans
- Težina naslova: srednja
- Boja teksta zaglavlja: #ffffff
- Veličina teksta zaglavlja: 4vw (radna površina), 5vw (tablet), 6vw (telefon)
- Visina linije glave: 1,4 em
razmak
Zatim promijenite vrijednosti margina na različitim veličinama zaslona.
- Lijeva margina: 20vw (stol i tablet), 15vw (telefon)
- Desna margina: 35vw (desktop), 20vw (tablet), 15vw (telefon)
Dodajte modul koda u stupac
Umetnite CSS kôd
Da bi se animacija tekstualnog bloka primijenila na naš naslov, trebat će nam neki CSS kôd. Dodati ćemo ovaj CSS kôd novom modulu koda.
<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>
razmak
Prebacite se na karticu dizajna modula i uklonite sve zadane donje obloge.
- Donja marža: 0px
Dodajte modul gumba u stupac
Dodajte kopiju
Sljedeći modul koji nam treba je modul s gumbima. Unesite kopiju po vašem izboru.
Postavke gumba
Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke gumba:
- Upotrijebite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 1vw (radna površina), 2vw (tablet), 3vw (telefon)
- Boja teksta gumba: #ffffff
- Boja pozadine gumba: # 000000
- Širina obruba gumba: 0px
- Font gumba: Work Sans
razmak
Zatim idite na postavke razmaka i primijenite prilagođene vrijednosti margina i dodataka na različite veličine zaslona.
- Gornja marža: 3vw (ured),
- Lijeva margina: 20vw (stol i tablet), 15vw (telefon)
- Gornja obloga: 1.2vw (radna površina), 2vw (tablet), 4vw (telefon)
- Donje obloge: 1.2vw (stol), 2vw (tablet), 4vw (telefon)
- Lijeva obloga: 1.8vw (radna površina), 3vw (tablet), 6vw (telefon)
- Desna obloga: 1.8vw (stol), 3vw (tablet), 6vw (telefon)
Animacija
Prilagodite i postavke animacije.
- Stil animacije: Flip
- Smjer animacije: dolje
- Kašnjenje animacije: 2000 ms
- Intenzitet animacije: 100%
- Neprozirnost pokretanja animacije: 100%
- Krivulja brzine animacije: lakoća ulaska
- Ponavljanje animacije: jednom
Dodajte odjeljak br. 2
Nastavite dodavanjem novog redovnog odjeljka odmah ispod prethodnog.
razmak
Otvorite postavke odjeljka i uklonite zadane gornje podloge.
- Gornja obloga: 0px
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre retka i pustite da linija zauzme cijelu širinu spremnika odjeljaka.
- Širina: 100%
- Maks. Širina: 100%
Dodajte tekstualni modul u stupac
Dodajte sadržaj
Zatim dodajte tekstualni modul s a sadržaj opis po vašem izboru.
Boja pozadine
Dodajte bijelu boju pozadine.
- Boja pozadine: #ffffff
Postavke teksta
Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:
- Font teksta: Work Sans
- Boja teksta: # 9b9b9b
- Veličina teksta: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Visina retka teksta: 2.6em
razmak
Također dodajte prilagođene vrijednosti razmaka na različite veličine zaslona.
- Gornja marža: -5vw (desktop), -20vw (tablet), -27vw (telefon)
- Lijeva margina: 20vw (stol), 13vw (tablet), 8vw (telefon)
- Desna margina: 20vw (desktop), 13vw (tablet), 8vw (telefon)
- Gornja obloga: 5vw (desktop), 7vw (tablet i telefon)
- Donja obloga: 5vw (stol), 7vw (tablet i telefon)
- Lijeva obloga: 3vw (radna površina), 5vw (tablet), 6vw (telefon)
- Desna obloga: 3vw (stol), 5vw (tablet), 6vw (telefon)
Kutija sjena
I dovršite postavke modula primjenom suptilne sjene okvira. To je to!
- Jačina zamagljivanja sjene okvira: 50px
- Boja sjene: rgba (0,0,0,0,1)
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Završne misli
U ovom smo članku pokazali kako dodati naslove CSS animacija bloka teksta u naslov. Važno je osigurati da vaš naslov bude vidljiv i čita se od početka, a dodavanje animacije naslovu definitivno može pomoći! Također ste mogli besplatno preuzeti datoteku JSON izgleda. Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.
Prevedeno sa: ElegantThemes
