Quindi la prossima cosa che vogliamo fare è aggiungere il testo in alto, quindi è necessario che assomigli a questo.
E fortunatamente questo è relativamente semplice rispetto alla creazione di questa griglia di immagini.
Quindi la prima cosa che dobbiamo fare è ottenere il font.
Questo font si chiama Railway.
È uno dei font di Google che abbiamo visto finora.
Quindi ho intenzione di andare su Google Fonts e cercare reale.
Eccoci qui.
È il top che uso qui e poi ho intenzione di andare avanti e prendere il normale.
E facciamo anche 800.
E poi includeremo questo
nel nostro HMO.
Quindi ora abbiamo accesso a quel font e quindi tutto ciò che dobbiamo fare è aggiungere il testo.
Prima di tutto, quindi, ne farò un paragrafo e metterò il mio nome che è quello che avevo
qui separato da una barra.
Possiamo dirti di mettere tutto ciò che vuoi qui.
ma solo un testo lo sto mantenendo semplice e poi lo salvo e poi andremo qui.
Questo potrebbe essere il Texas potrebbe essere il blog di fotografia o entrare nel mio blog
Seleziona il paragrafo e diremo semplicemente la famiglia dei font in modo reale e vediamo solo cosa finiamo.
OK.
Quindi non il più eccitante.
Non ancora del tutto lì.
È troppo piccolo e non è posizionato correttamente.
Ne abbiamo bisogno per andare oltre 1. 6 percento pure.
Proprio come questa immagine, per spostarla in linea possiamo iniziare da lì.
Tutto quello che dobbiamo fare è passare a un paragrafo e aggiungere il margine a sinistra e questo è solo
un punto sei sei percento.
Siamo freschi OK ora distanziati correttamente.
Quindi un'altra cosa che vogliamo fare è sicuramente aumentare la dimensione del carattere.
Quindi so che la dimensione del font che ho usato qui è di 23 pixel e non solo, ma ho usato il
peso del font di 800, motivo per cui ho dovuto selezionarlo.
Quindi qui dirà la dimensione del carattere di 23 pixel.
Ti mostrerò come si presenta.
Quindi è più grande ma non è ancora così audace.
Quindi torniamo indietro e aggiungiamo il peso del font.
Ottocento e salve.
Ora eravamo freschi in autunno.
Sta guardando vicino ma ci manca ancora una cosa che è il fatto che
non ho usato il testo maiuscolo così posso farlo usando la trasformazione del testo o potrei alterare l'HDMI.
Quindi ho intenzione di farlo che qui il testo si trasforma in maiuscolo.
Ora prendiamo tutto in maiuscolo.
Eccoci.
Quindi puoi vedere solo con un rapido esempio perché potresti usare la trasformazione del testo perché è molto
più semplice e veloce aggiungerne uno per valutare la proprietà piuttosto che dover ridigitare ogni
singola lettera, soprattutto se hai una stringa di caratteri più lunga.
OK, quindi ora l'ultimo pezzo mancante è questa piccola linea qui.
So che è piuttosto debole ma c'è una linea qui e va in linea con questa prima immagine in modo
che non vada fino in fondo.
Va il 30 percento del percorso.
Quindi il modo in cui lo faremo è in realtà solo un bordo nella parte inferiore di esso è
ispezionato in fondo a questo paragrafo.
Quindi puoi vedere che il paragrafo stesso va al 30 percento e il modo in cui finisce finisce qui e
poi tocca solo il fondo che abbiamo attivato.
Quindi torniamo alla nostra C SS e al nostro paragrafo.
Iniziamo dandogli il bordo inferiore e rendiamolo ovvio per iniziare, quindi facciamo come tre pixel
rosso fisso.
Quindi salveremo e aggiorneremo e vedremo che il confine attraversa tutto.
E immagino che non sembri troppo male.
Vogliamo assolutamente risolvere questo problema qui.
Ma piuttosto che farlo modificherò la larghezza in modo che passi solo il 30 percento del percorso.
Quindi inizieremo con quello.
Quindi è solo questione di impostare la larghezza al paragrafo 30 per cento.
OK, quindi ora finisce lì, quindi la prossima cosa è far corrispondere il colore in modo che il colore che uso
sia molto debole.
Sto solo per cambiare questo qui.
È un colore esadecimale.
EF 1 EF 1 EF 1 sembra così.
Puoi vedere che è molto debole e penso di averlo a due pixel anziché tre.
Quindi un cambiamento molto minore.
Cambia quello per essere due pixel e l'ultima cosa è la spaziatura.
Quindi qui puoi vedere che abbiamo un po 'di spazio tra il testo e il bordo.
E qui non ricordiamo tanto lo spazio tra un elemento e il suo bordo è il riempimento.
Quindi, se ispezioniamo, puoi verificare che posso vedere quel riempimento verde lì.
Quindi abbiamo solo bisogno di ottenere imbottiture andando anche qui.
Quindi in RC SS faremo solo
il riempimento di 20 pixel in basso e torneremo all'aggiornamento.
E ora abbiamo un po 'di spazio lì.
Ora, naturalmente, sentiti libero di giocare con questo, a tuo piacimento, se preferisci che
quella linea vada avanti o no.
Vuoi rendere il testo più grande se vuoi farlo liberare il padding o aggiungere più padding
se vuoi che più immagini vadano sullo schermo anziché solo tre.
C'è un sacco di cose che puoi fare.
Va bene, quindi spero che ti sia divertito a fare qualcosa che sembra un po 'OK.