Va bene bentornato.
In questo video lavoreremo sullo stile del nostro sito in questo momento.
Non è affatto vicino a come dovrebbe apparire alla fine.
Quindi confrontiamoli uno alla volta.
Ecco il nostro qui.
Quindi alcuni dei grandi cambiamenti che dobbiamo fare per arrotondare gli angoli aggiungendo qualche spaziatura qui sopra.
Modifica lo stile dei pulsanti qui.
otteniamo un effetto hover i nostri pulsanti sono decisamente orribili e non abbiamo alcun effetto di hover su di essi.
Quindi questi pulsanti non assomigliano a dei pulsanti fino a quando non passano il mouse su di essi e
Anche la posizione di loro è un po 'sbagliata.
Come puoi vedere se indovino qui ricevo il testo, ma se fossi fresco lo spazio tecnologico è già occupato rispetto
alla nostra versione se immagino che il testo spinga via tutto ai lati.
Inoltre c'è un'animazione qui.
Quindi, quando clicco su come si dissolvono lentamente sul nostro quando clicchiamo bene se clicco su uno
errato viene rimosso immediatamente.
Quindi vogliamo aggiungere una transizione a questo.
Inoltre abbiamo qui l'H-1 che ha bisogno di un po 'di lavoro sul nostro.
Ha bisogno di prendere più spazio.
Abbiamo bisogno di cambiare il colore di sfondo.
Vogliamo cambiare il carattere.
Dobbiamo assicurarci che lo span del nostro colore sia formattato correttamente, quindi è sulla sua stessa riga ed è
un font più grande.
Inoltre abbiamo bisogno di cambiare il carattere per l'intero corpo.
Quindi questi sono tutti lo stesso font.
E infine noterai che abbiamo un po 'di spazio proprio qui tra la striscia
e la fine del corpo e nella versione della soluzione non c'è spazio.
OK.
Iniziamo affrontando prima questo H-1.
Quindi andremo al mio testo sublime e andremo all'H-1 e la prima cosa che faremo è allineare le cose
nel mezzo come potete vedere nella soluzione.
Le cose sono allineate al centro.
Quindi tutto ciò che dobbiamo fare è aggiungere il centro di allineamento del testo e salvare e aggiornare.
Ok leggero miglioramento.
Avanti, cambiamo il colore di sfondo in modo che il colore sia ancora blu ma noterai che se
aggiorno la pagina in questo momento funziona perfettamente.
Ma se aggiorno di nuovo e poi vinco il gioco o clicco su nuovi colori.
Torna al nero e questo perché il nostro codice javascript sta sovrascrivendo il fatto che
stiamo impostando questo colore nero grigio scuro nel nostro javascript.
Abbiamo bisogno di trovare i luoghi in cui stiamo ripristinando questo colore che è 2 3 2 3 2 3.
Eccoci qui.
Vogliamo solo cambiare questo per essere ancora blu.
E questo è anche il momento in cui lo aggiorno, è ancora blu.
Ottengo nuovi colori.
Rimane ancora blu.
OK.
Ecco.
Ora liberiamoci di tutto lo spazio nero su entrambi i lati del nostro H-1.
Quindi nel nostro H-1 elimineremo tutto il margine marginale zero in alto e in basso a sinistra ea destra.
Quindi, nota cosa succede quando farlo.
Quello spazio nero scompare da tutte le parti eccetto per questo piccolo angolo di spazio a sinistra in alto ea destra.
E questo non viene da o H-1 che in realtà proviene dal corpo.
Quindi, per risolvere il problema, possiamo andare al corpo e dargli un margine zero.
E ora presta attenzione a questa piccola lacuna che aggiornerò e andrà via.
Quindi la nostra striscia bianca va fino in fondo proprio come fa in questa versione qui.
OK.
Ora concentriamoci sul divertimento.
Quindi il divertimento sarà lo stesso per tutti i nostri elementi.
I pulsanti e l'H-1 e lo span qui sono tutti lo stesso font con caratteri leggermente diversi.
E useremo solo uno dei font incorporati che i vaunt di sistema chiamano Avenir.
Quindi questa sarà la famiglia di font Avenir.
Questo è un font che potrebbe non funzionare su tutti i sistemi là fuori.
Quindi aggiungeremo un'altra opzione che è Mont. Serat proprio così.
Quindi finiamo con questo divertente qui che ovviamente non sembra esattamente lo stesso.
E questo dipende dal nostro peso dei font.
Quindi dobbiamo cambiare il peso di questo font perché è un H1.
L'impostazione predefinita è renderla in grassetto o avere come 700 o 800 o anche 900 caratteri di peso.
Quello che vogliamo fare è dargli peso del carattere normale.
Quindi, quando il nostro H-1 può aggiungere peso del carattere normale e salvare.
Ricaricare.
Sembra più vicino.
Ora ci sono alcune altre cose che dobbiamo cambiare.
che il nostro colore sia sulla sua stessa linea e che lo stile sia leggermente diverso fare quello.
Il primo è che questo è tutto maiuscolo e lo possiamo fare con RCSS usando text transform in maiuscolo e
salva Quindi ora guardiamo più da vicino e vogliamo anche assicurarci
Andremo qui nel nostro team e in realtà modificheremo un po 'il
vecchio.
E questo è il primo modo in cui faremo questo lavoro.
Vedremo un altro modo di farlo con Pearcey SS. Ma inizieremo disegnando questo in cui abbiamo
il grande su una riga e poi aggiungere una pausa.
per iniziare ad aggiungere alcuni ritorni e alcune interruzioni di riga e questo è tutto ciò che questo tag fa è aggiunge un'interruzione di riga.
Possiamo usare abr tag e in realtà questa non è una grande idea per quanto riguarda lo stile è un
po 'disapprovato, ma è un modo semplice e veloce
Quindi vogliamo uno dopo il Grande, vogliamo una pausa e poi la nostra durata e poi vogliamo un'altra interruzione e
quindi color game in basso e se aggiorniamo ora puoi vedere che ci stiamo avvicinando.
Ora dobbiamo concentrarci sul rendere la portata molto più grande.
Quindi questa band ha un'idea del display a colori.
Quindi andremo su R C S S e selezioneremo il display a colori proprio come questo.
Visualizzazione del colore dell'ID e quindi stiamo per dire che la dimensione del carattere è pari al 200 percento della dimensione del carattere H-1.
E se aggiorniamo, ora otteniamo dimensioni del carattere molto più grandi.
E ci stiamo avvicinando.
Abbiamo le nostre pause qui.
Noterai anche che abbiamo molto più spazio tra le righe rispetto a quello che facciamo qui.
Quindi ci sono alcune cose che possiamo fare per lavorare su questo.
Il primo è modificare l'altezza della linea.
Quindi gli daremo un'altezza di riga di 1. 1 e salvare.
E guardiamo di nuovo la nostra versione e aggiorniamo e puoi vedere che si riduce un po '.
Ma ora abbiamo perso lo spazio in alto e in basso.
Abbiamo bisogno di un po 'di spazio lì.
Quindi quello che faremo è entrare e aggiungere un po 'di padding.
Quindi aggiungeremo padding in alto e in basso solo non a sinistra ea destra e vogliamo
20 pixel in alto e in basso in modo che possiamo farlo esattamente come questo padding di 20 pixel e zero.
Avremmo anche potuto riempire i primi 20 pixel e riempire il fondo, ma questo è un modo più carino di
farlo aggiornare e puoi vedere che siamo quasi arrivati ​​ora.
Quindi la nostra intestazione sembra a posto.
Abbiamo il carattere corretto il carattere corretto in cui è tutto in maiuscolo il colore di sfondo corretto.
Assicuriamoci che, mentre gioco, il corretto aspetto sia tutto a posto.
La prossima cosa che dovremmo affrontare sono i pulsanti su questa barra di navigazione.
Quindi abbiamo sicuramente una lunga strada da percorrere per migliorarli.
La prima cosa che vogliamo fare è sbarazzarci dei confini in modo da non avere questo evidente confine
attorno al pulsante.
Vogliamo anche sbarazzarci del colore di sfondo.
Quindi non dovrebbe esserci uno sfondo come puoi vedere qui.
È solo aspettare fino al nostro passaggio o fino a quando ne selezioniamo uno.
Inoltre, vogliamo assicurarci che la famiglia di font sia la stessa di questo font qui sopra.
Quindi iniziamo.
E ho intenzione di selezionare tutti i pulsanti, quindi il pulsante e stiamo andando a dire nessun confine e salvare.
Prestare attenzione ai pulsanti quando si aggiorna.
OK.
Quindi ora non abbiamo confini.
Ma abbiamo ancora quel colore di sfondo.
Quindi ora lo stesso sfondo nessuno e salvare e aggiornare e ci stiamo avvicinando.
Quindi ora abbiamo solo testo.
E inizieremo rendendo tutto quel testo in maiuscolo come quello che abbiamo qui.
Quindi usiamo di nuovo la trasformazione del testo, basta copiare quella riga sopra l'incolla che c'è e aggiornare.
Ora i nostri pulsanti sono tutti in maiuscolo.
La prossima cosa che vogliamo fare è assicurarsi che il pulsante vada dall'inizio
alla fine del contenitore a banda div.
In questo momento occupa solo una parte dello spazio, quindi possiamo farlo impostando l'altezza al 100 percento.
Ciò significa che occuperà il 100 percento dell'elemento contenitore, come puoi vedere, che
ci avvicina molto.
Ora abbiamo bisogno di cambiare alcuni colori per cambiare la dimensione del font del peso del font e quindi
modificare l'effetto hover che non abbiamo ancora impostato.
La prossima cosa che farò sarà rendere il font un po 'più pesante e cambiare il colore per
essere ancora blu.
Quindi il peso del font farà 700 e poi il colore sarà ancora blu.
E controlliamo l'aggiornamento.
Quindi diventa un po 'più vecchio e puoi anche vedere che il colore ora è
cambiato in quello blu, lo stesso colore che abbiamo qui.
C'è un piccolo cambiamento che possiamo fare, che è quello di cambiare la spaziatura delle lettere in un pixel.
E se presti attenzione quando aggiorno, puoi vedere le cose distanziate solo un po 'tra una
lettera e l'altra.
Leslie concentriamoci sulla dimensione del carattere.
Sembrano un po 'troppo piccoli.
Quindi useremo semplicemente la dimensione del carattere e lo imposteremo per essere ereditato.
E se aggiorno, puoi vedere che ereditano la dimensione del carattere e non è necessario specificarlo esplicitamente.
Quindi diamo un'occhiata ora.
Una delle grandi differenze è che sono attualmente distribuiti in modo diverso.
Appena caricata la pagina abbiamo lo spazio qui sulla nostra versione.
Tuttavia non abbiamo questo spazio finché non clicchiamo su un pulsante.
Quindi quello che dobbiamo fare è in realtà stile lo span che è proprio qui e quella estensione è chiamata messaggio e vorremmo andare
a dare alcune proprietà per farlo occupare quello spazio e tutto ciò che dobbiamo
fare è cambiarne uno proprietà in realtà.
Quindi andremo a selezionare il nostro messaggio che è questo fan e cambieremo
la proprietà display per essere in linea.
BLOCCO Quindi, cosa succederà se aggiorno non noterai subito una grande differenza, ma è
anche perché dovremmo assegnarlo a te con un dato del 20% e salvare e aggiornare.
Ora abbiamo questa span anche se non contiene nulla che occupa il 20 percento di questo schermo.
In modo che spinga questi elementi al lato che è esattamente ciò che vogliamo.
Diamo un'occhiata e confrontiamoli.
Va bene così sembra abbastanza vicino.
Ora ciò su cui lavoreremo successivamente è far sì che la classe selezionata si abbini al colore giusto e
abbia anche il nostro effetto hover.
Quindi questo sarà nel nostro pulsante e aggiungeremo prima l'effetto hover.
Quindi tutto ciò che dobbiamo fare è aggiungere il pulsante Colan
Huffer e cambieremo il colore del carattere in bianco e il colore dello sfondo in blu acciaio.
Quindi in pratica stiamo invertendo i colori e salveremo e aggiorneremo.
Ora mentre mi muovo, puoi vedere che ottengo quell'effetto.
Perfezionare.
E la nostra classe selezionata che avremo avrà lo stesso aspetto.
Sto solo andando a copiare gli stili.
Non vi è alcuna differenza quando ci si posiziona sopra qualcosa quando è selezionato.
Dovrebbero sembrare uguali.
Quindi puoi vedere che sembra giusto e io aleggia e solo mentre sono al passaggio del mouse.
Ottiene lo sfondo blu e il colore del testo bianco.
E quando mi muovo va via.
C'è una leggera differenza.
Se passa il mouse sui pulsanti della soluzione, noti che sfuma in quel colore.
Non è solo un passaggio istantaneo alla mia versione.
Si attiva immediatamente.
Possiamo aggiustarlo usando una proprietà di transizione C Ss all'interno del selettore di pulsanti.
Stiamo per scrivere la transizione e passarla.
Due argomenti sono due valori e il primo è quello che vogliamo passare e nel nostro caso lo aggiungeremo
ad ogni proprietà e poi il prossimo è quanto tempo vogliamo che prenda.
Quindi ho intenzione di esagerare in un primo momento con due secondi.
Quindi, ancora una volta la proprietà di transizione è come possiamo dire a CSX come animare le transizioni tra cambiamenti di colore
o modifiche e proprietà delle dimensioni del carattere.
Quindi quello che ho detto qui è che ogni volta che la proprietà cambia su qualsiasi pulsante che nel nostro
caso sarà davvero solo colore e sfondo.
Quindi, ogni volta che il colore cambia e il colore dello sfondo cambia, dovrebbero passare due secondi
e vedrai quando aggiorno.
E io aleggia.
Oh, non funziona ancora.
Mi mancano i miei qui 2. 00 s.
E ora se aggiorno e al passaggio del mouse ci vogliono due secondi per dissolvenza in apertura e quando clicco per aggiungere
la classe selezionata ci vogliono anche due secondi e ci vogliono due secondi per scomparire quando parto.
Quindi due secondi sono decisamente troppo lunghi.
Penso di mirare per circa tre secondi.
Proviamo questo.
Eccoci.
Mi sembra abbastanza buono.
L'ultima cosa importante è ottenere gli angoli arrotondati su questi quadrati nel modo in cui otteniamo quegli angoli
arrotondati utilizzando una proprietà chiamata Raggio di confine.
Quindi ho i documenti mediani aperti se vuoi dare un'occhiata.
È una buona lettura
Ma ti mostrano alcuni esempi sulle diverse cose che puoi fare con board-radius.
Quindi quello che faremo è dargli un leggero raggio di confine e questi sono quadrati qui.
E diamo un'occhiata a ciò che stiamo mirando.
Quindi quelli sono ciò che vogliamo ottenere.
Quindi era una leggera leggera curva.
Andiamo alla nostra classe quadrata e assegniamo un raggio di confine e facciamo qualcosa di veramente esagerato per iniziare.
Ti mostrerò cosa succede se facciamo il 50 percento.
Abbiamo delle cerchie e potresti effettivamente preferire l'uso delle cerchie.
Stavo pensando di usarli, ma alla fine ho preferito questi quadrati arrotondati e il numero
che ho usato è il 15%.
E controlleremo e confronteremo semplicemente quelli.
OK, così va bene.
Quindici percento, ma se volessi ti mostrerò cosa succede se facciamo qualcosa come il 5 percento e
lo aggiorni.
Otteniamo angoli leggermente arrotondati.
Quindi tornerò al mio 15 refresh e ora abbiamo le nostre belle curve arrotondate, ma dobbiamo anche lavorare
per ottenere l'effetto animazione perché quando clicco su uno di questi.
Notate come quando il colore cambia si attenua, proprio come l'effetto di passaggio del mouse si dissolve in avanti e indietro.
Per riuscirci dobbiamo anche usare la proprietà di transizione ma in un modo leggermente diverso.
quadrato e l'unica cosa che vogliamo passare è il colore di sfondo o solo lo sfondo.
Quindi andrò al
E ancora facciamo un lungo periodo come 2. 0 secondi e guarda come sembra.
Quindi aggiornerò e farò clic su uno di questi.
Puoi vedere che occorrono due secondi interi per dissolversi.
Quindi non vogliamo che qualcosa duri così a lungo.
Probabilmente andrà per zero punto sei forse.
Proviamoci.
OK.
Sembra ragionevole.
Quindi puoi vedere ogni volta che lo sfondo cambia richiede 0. 6 secondi.
Ciò che è diverso però è che quando cambiano le altre proprietà non le anima come i nostri pulsanti,
dove abbiamo detto che quando una proprietà cambia, dovrebbe prendere il punto tre secondi.
Stiamo prendendo di mira solo lo sfondo e questo cambia.
Dovrebbe prendere 0. 6 secondi.
Una cosa minore di cui vogliamo essere consapevoli è che la proprietà di transizione non funzionerà in tutti i browser, così
come è stata scritta in questo momento per essere il più amichevole possibile al browser.
In realtà abbiamo bisogno di aggiungere altre due proprietà che non noteremo alcuna differenza di funzionalità, ma
solo per il supporto del browser.
Quindi la prima è la transizione di Web Kit Dasch e aggiungeremo lo stesso valore esatto qui
proprio così.
E poi abbiamo bisogno di un altro che è questo dovrebbe essere un trattino Moz M. Ozy.
Quindi questi sono in realtà prefissi del browser.
Quindi Web Kit è per Web Kit che è un motore che i browser usano come Safari.
E poi Moz e Mozy, che è una forma breve, è Zilah, su cui è basato Firefox.
Quindi questi sono solo per aggiungere un po 'più di supporto perché la proprietà di transizione non è ancora
incorporata in ogni singolo browser.
Quindi ci aggiorniamo.
Niente dovrebbe sembrare diverso.
Il nostro gioco funziona ancora allo stesso modo e otteniamo sempre la stessa
animazione e dovremmo fare la stessa cosa qui quando abbiamo completato la transizione, basta duplicare questo e cambiarlo per essere di transizione
e passare tutto a 0. 3 secondi per la transizione MOOC.
cosa che possiamo risolvere qui è il poco spazio tra la striscia e l'inizio della nostra griglia.
Un'ultima
Quindi puoi vedere che abbiamo un po 'più di spazio qui che non abbiamo qui.
E ora se ispezioniamo abbiamo un elemento che circonda la nostra griglia.
Abbiamo i nostri quadrati e abbiamo un contenitore ID div e quel contenitore div va intorno a tutti e 6 i quadrati.
Quindi possiamo usarlo e aggiungere solo una spaziatura a quel contenitore div aggiungeremo solo un margine in
alto e in basso.
Quindi penso che lo abbiamo già disegnato un po '.
Eccoci qui.
Quindi abbiamo detto che il margine è zero.
E auto quello che faremo invece è dire che il margine è 20 pixel in alto e in basso e auto a sinistra
ea destra che è come è centrato.
Quindi vogliamo che sia auto a sinistra e a destra, ma 20 pixel al massimo.
Abbiamo la nostra spaziatura.
OK, quindi abbiamo finito con lo styling per ora.