La prossima cosa che affronteremo è lo sfondo del corpo.
E questo in realtà non è un'immagine di sfondo, anche se ne abbiamo trovato uno che sembrava così che
avrebbe funzionato bene.
Ma in realtà è un gradiente che CSX sta aggiungendo per me.
Quindi, in sostanza, possiamo scrivere gradienti lineari e invece di scriverli da soli, vi mostrerò una
grande risorsa che ha delle sfumature di colore pre-fatte che possiamo lavorare con le quali possiamo
aggiornare e modificare sul nostro proprio.
Quindi si chiama gradienti dot com.
E poi ha una serie di diversi gradienti che possiamo usare i tasti freccia per vederne alcuni.
Così ho solo passato fino a quando ne ho trovato uno che mi piaceva.
Quindi diciamo che volevo usare questo tutto quello che dobbiamo fare è cliccare su ottenere codice CSSA o
premere il tasto invio e quindi copiare questo codice in un blocco appunti e quindi selezioneremo il corpo.
Quindi, corpo e incolla.
Quindi è solo una riga ma ci sono tutti i diversi prefissi del browser.
Quindi, per Internet Explorer per Firefox per Chrome per Opera tutti questi diversi prefissi.
Ma cosa fa
Stiamo impostando lo sfondo sul gradiente lineare e stiamo selezionando due colori e diverse percentuali
di quei colori e anche l'angolo.
Quindi lascia che ti mostri come appare ora se aggiorniamo i nostri.
Abbiamo questa bella sfumatura.
Quindi possiamo continuare a giocare lì.
Puoi dare un'occhiata a qualcun altro e sentiti libero di usare il tuo.
Quello che ho deciso è chiamato Bora-Bora proprio qui.
Quindi copieremo quella copia negli appunti e sostituiremo questo codice.
Tutto questo qui con quel nuovo gradiente che ancora una volta è solo un altro gradiente lineare che qualcun
altro ha scritto in due colori diverse percentuali di ciascuno.
E salveremo.
E vai a dare un'occhiata ora.
E noi andiamo.
Quindi ci stiamo avvicinando.
La prossima grande cosa su cui dobbiamo lavorare sono le icone.
Quindi abbiamo un'icona positiva.
E ciò che fa è mostrare e nascondere il modulo e poi abbiamo il cestino.
Vedo che abbiamo anche bisogno di includere quelle icone fanno parte di una libreria chiamata font.
Eccezionale.
Quindi vai a font fantastico e solo google per il sito Web è Fonte impressionante.
La capisco.
E tutto ciò che è è una raccolta di un mucchio di icone.
Quindi lascia che ti mostri se guardiamo sotto le icone c'è un enorme elenco di tutte le diverse icone che possiamo
usare così puoi vederle.
Quindi abbiamo bisogno di includere questa libreria all'interno della nostra applicazione in modo che possiamo andare a scaricarlo proprio
lì e fare clic su Download o potremmo anche fare un font.
Stupendo CDN e usa solo uno di questi CDN.
O uno avrebbe funzionato.
Quindi, per motivi di varietà, dato che hanno già scaricato la query di Jay, userò il CD e qui copierò il link.
pagina indice Timo e ho bisogno di aggiungere un tag link perché è un file CSSA quindi non è in realtà un file javascript
o un font ma è un file C Ss e io salverò e quello che fa è in realtà mi dà un
sacco di classi che sono pre-costruite e pre-fatte che posso quindi aggiungere agli elementi quindi ti mostrerò alcuni esempi.
Poi andrò alla mia
Se si desidera utilizzare dire la batteria scarica o tre quarti della batteria tutto ciò che dobbiamo sapere è che la classe è chiamata f un
trattino di batteria a cruscotto 3 dash courters Quindi abbiamo bisogno di aggiungere uno basta copiare il codice qui
da qualche parte nella nostra applicazione.
Mettiamolo nell'H-1.
È un tag occhio che sta per icona e noi diamo una lezione e non dobbiamo mettere nulla qui.
Lo lasciamo vuoto e questo rappresenta il fantastico Rifan.
dell'icona e salverà l'aggiornamento e ora abbiamo quell'icona della batteria piuttosto che l'icona della batteria a tre quarti.
E poi questo è il nome
Vogliamo il segno più e il cestino della spazzatura, quindi andremo qui e all'interno della H-1 manterremo l'icona e
manterremo la classe ma vogliamo F. UN. dash plus e sentiti libero di usare la tua icona.
Se continui a trovarti fantastico e ne trovi un altro che ti piace perché potremmo usare
anche una icona simile a una matita o una matita e un foglio e se fossi fresco e ora
avessi il segno più che è andato in stile e in movimento a destra e tutto ciò che dobbiamo fare è selezionare
prima, quindi selezioneremo il cane.
F un pochino più e galleggerà proprio così e si aggiornerà e ora è finito nel sito giusto.
Ora affrontiamo i bidoni della spazzatura e non abbiamo ancora intenzione di occuparci dell'animazione.
Stiamo solo per far comparire il bidone della spazzatura invece di una X.
Quindi torniamo indietro e sui nostri spand ci sbarazzeremo effettivamente delle X e all'interno dello
span aggiungeremo un altro e-tag e l'e-TAG avrà una classe di FAA e il nome di l'icona del bidone
della spazzatura è il cestino di FAA Dasch, copiamo quello sull'altro span e questo è solo per l'esistente da usare quando la pagina
viene caricata ma otteniamo tre bidoni della spazzatura per i nuovi.
Abbiamo ancora a che fare con l'ex.
Allora, vogliamo andare qui al nostro Javascript.
E quando ne diamo uno nuovo, non vogliamo aggiungere uno span con X.
Vuoi aggiungere un'icona e dobbiamo assicurarci che le nostre citazioni non interferiscano.
Quindi se usiamo le virgolette singole e salviamo e ora dovremmo avere un'icona del cestino all'interno dello span.
Quindi aggiungiamone di nuovi.
Eccoci.
E posso ancora fare clic perché sono ancora all'interno di un intervallo.
Quindi è un elemento icona invece di un intervallo.
Quindi faccio clic su evento ancora funzionante.
Ora lavoriamo su questa semplice animazione e questo è tutto fatto con C valuta che gli span qui sono effettivamente
nascosti quando la pagina viene caricata.
Hanno una ricchezza pari a zero.
E quando passo il mouse, stiamo effettivamente aumentando la larghezza a 40 pixel e quindi la stiamo animando
usando la proprietà di transizione.
Quindi proviamo un po 'di quello.
Apri il nostro file CSSA e la prima cosa che faremo è che lo stile si estende così a
lungo e daremo loro un colore di sfondo di quel colore rosso che è e 7 4 C 3 C e si aggiornerà.
E ora abbiamo lo sfondo rosso intorno ad esso.
La prossima cosa che faremo è dare loro un'altezza di 40 pixel che non sembra fare ancora molto ma una
volta aggiunte alcune altre proprietà noterai una differenza.
Aggiungiamo un margine a destra di 20 pixel e torniamo indietro.
Ora questo ci dà lo spazio che volevamo qui.
Quindi diamo loro il centro di allineamento del
testo che è solo una piccola differenza sugli span qui.
Le icone all'interno di una cosa importante sono rendere l'icona troppo bianca in modo da renderla bianca.
Tutto ok.
Quindi ti mostrerò come farli apparire come i primi senza l'animazione, in modo che siano
sempre lì.
E poi li faremo animare in modo che siano nascosti finché non ci aggiriamo.
Quindi ci stiamo avvicinando ma abbiamo bisogno di questi per occupare più spazio in verticale e in orizzontale.
Quindi aggiungerò un 40 pixel che alla fine andremo a zero e imposteremo il display a due
blocchi di linea.
E aggiorno ora.
E quello sembra giusto.
Quindi la prossima cosa è fare l'animazione.
E il modo in cui funziona ci permetterà di impostare la larghezza a zero.
Quindi tutte queste campate hanno uno zero fino a che non aleggia su un alleato e poi lo
aumentiamo con 40 in quell'arco.
Quindi facciamolo ora.
e non solo sull'ampiezza, ma quando passiamo al passaggio del mouse su un alleato, vogliamo selezionare l'intervallo che si trova all'interno di un alleato su
cui si sta librando.
Ho intenzione di impostare con lo zero e poi quando passiamo sopra un alleato
Quindi imposteremo con 40 pixel proprio così.
E torniamo alla nostra versione e aggiorniamo.
Puoi vedere che gli span ora non ci sono più.
E quando alzo il mouse e sparo appare la span e il pulsante funziona.
Quindi la prossima funzione è animarla in modo che non appaia immediatamente e per farlo
useremo solo la proprietà di transizione.
secondi e lo renderemo lineare, che si riferisce solo all'andamento, il che significa che si muoverà a una velocità costante.
Quindi nello span aggiungeremo il punto zero di transizione due
E noi andiamo.
Abbiamo la nostra bella animazione.
C'è un piccolo elemento che mi infastidisce qui, che è quello che l'icona mostra anche quando lo span
è largo zero pixel.
Quindi è davvero difficile da vedere, ma guarda l'icona qui.
È ancora lì, anche quando non ci sto passando sopra.
Quindi, quello che faremo è impostare l'opacità dello span su zero e poi impostarlo su uno quando ci si passa sopra.
Quindi opacità zero e poi opacità 1. 0 quando ci fermiamo.
E questo dovrebbe prendersene cura.
Quindi ora non possiamo vedere le icone.
Eccolo e poi scompare e svanisce anche perché la proprietà di transizione sta
influenzando tutto.
Quindi facciamolo 2. 2 secondi e ti mostrerò.
Notate come si attenua e poi si attenua.
Quindi questa è una versione molto lenta.
E faremo solo 0. 2.
C'è una piccola cosa fastidiosa che ci è rimasta, ovvero se si guarda da vicino
o si aumenta la dimensione c'è un piccolo spazio tra l'input e quindi questo elenco l'UL.
Ma il divario scompare quando mi concentro lì ora a filo.
E poi quando non sono concentrato torna indietro.
Quindi, per risolvere il problema, aggiungeremo un piccolo bordo invisibile che in realtà avrà
un colore solo un piccolo bordo di R. G. be 0 0 0 0 0 0 che prendiamo semplicemente lo stesso spazio
del nostro confine quando siamo concentrati.
Quindi torneremo indietro e apprezzeremo l'input che abbiamo qui e gli diamo un bordo di R-Ga solido a tre pixel.
zero zero zero zero.
Così finirà per darci un confine invisibile.
Ma notate che mi aggiornerò proprio ora che poco spazio va via.
Quindi ora non è solo il bordo a filo quando lo abbiamo messo a fuoco, ma c'è anche un confine che ci
aiuta a farla risuonare che in realtà non vediamo