Share
In questo tutorial completeremo la nostra app web-end in modo che sia perfetta e funzioni bene su tutte le dimensioni dello schermo. L'ultima volta, abbiamo completato lo styling delle finestre di messaggio, lasciando solo il contenuto da fare. Ci tuffiamo proprio dentro? Ok!
Potrebbe essere necessario recuperare le parti precedenti di questo tutorial, nel qual caso:
.messaggio-contenuto larghezza: 100%; colore: scurisci ($ grigio, 30%); @media screen e (min-width: $ break-two) width: 75%; float: giusto; @media screen e (min-width: $ break-three) width: 85%; @media screen e (min-width: $ break-four) width: 75%;
Le dichiarazioni per messaggio-content assicurati che la larghezza si comporti da sola quando il browser si ridimensiona. Abbiamo bisogno che sia largo al 100% per schermi di piccole dimensioni, quindi è ben posizionato sotto l'immagine. Una volta abbiamo colpito il nostro $ Break-due larghezza quindi abbiamo bisogno di far galleggiare il contenuto a destra e tirare leggermente la larghezza per compensare ciò.
Gli altri punti di interruzione qui assicurano solo che la larghezza si riduca bene in relazione alla larghezza del browser, quindi su una risoluzione tablet casella dei messaggi è ancora impilato verticalmente ma il nostro messaggio-content è flottato al suo interno, il che significa che la larghezza del 75% probabilmente non è sufficientemente ampia. Ritorniamo al 75% della larghezza una volta raggiunte le dimensioni basate sul desktop casella dei messaggi essendo fluttuato e più stretto.
a color: $ green; &: hover color: $ red; h3, p, div margin: 0; h3 font-family: $ title-font; dimensione carattere: 200%; font-weight: 400; letter-spacing: -0.02em; colore: $ nero; p color: $ red; font-weight: 600; div margin-top: $ margin; overflow: nascosto; -ms-text-overflow: ellissi; -o-text-overflow: ellissi; overflow del testo: ellissi;
I prossimi stili qui sono davvero semplici. Stiamo solo dando qualche link a $ verde colore con a $ rosso stato di hover e sovrascrittura di eventuali margini impostati sugli elementi h3, p e div contenuti all'interno messaggio-content. I singoli stili per gli elementi h3, p e div sono leggermente più elaborati. Il h3 è impostato per l'uso $ Title-font e ne ha alcuni spaziatura del carattere impostato per tirare leggermente la spaziatura leggermente più vicino al disegno. Il div gli stili di tag riguardano esclusivamente la conservazione dei contenuti, quindi ci assicuriamo che straripamento è nascosto e se c'è un overflow mostriamo un ellissi per indicare che c'è più testo. Questo tipo di cose può essere fatto con il codice lato server (e probabilmente lo sarebbe) ma è bello includerlo qui nel CSS allo scopo di questo tutorial.
Salva il tuo lavoro e vai al browser ...
È fantastico! Abbiamo tre layout leggermente diversi, ognuno dei quali è controllato dagli stili semplici sopra. Questo completa il CSS per il casella dei messaggi quindi tutto ciò che dobbiamo fare ora è copiare il markup cinque volte e modificare il contenuto in base al design. Se questa app dovesse funzionare per davvero, non avremmo bisogno di farlo, ma per questo tutorial è necessario! Datti cinque minuti per copiare, incollare e modificare il codice per ogni scatola.
Facciamo un altro rapido sguardo nel browser per verificare che i nostri stili funzionino perfettamente quando ne abbiamo più di uno casella dei messaggi...
Bellissimo! La nostra app Web sta sicuramente prendendo forma adesso e le nostre caselle di messaggio funzionano come previsto per tutte le dimensioni del browser.
Abbiamo conquistato la maggior parte della nostra app Web ora, ma rimane ancora una sezione importante: la footer. Questa parte della nostra app è importante in quanto ospita il luogo in cui un utente può digitare / pubblicare il proprio messaggio. Ci sono alcuni punti abbastanza complicati per questo, quindi iniziamo!
Per prima cosa, scriviamo il seguente markup nel nostro file index.html:
Ci sono alcune sezioni in questo footer. L'area principale di messa a fuoco è la forma nel mezzo che, sebbene non necessariamente necessaria qui, consentirà all'utente di pubblicare il proprio messaggio. Il socio-BTNs avrà bisogno di alcuni stili di modifica del layout e tutto il contenuto del footer deve essere centrato sullo schermo. Iniziamo in alto e andiamo direttamente nel CSS ...
footer padding: $ padding * 4; allineamento del testo: centro; sfondo: $ bianco; h4 margin-top: 0px; font-family: $ title-font; font-size: 26px; font-weight: 400; colore: $ darkgrey;
Prima di tutto dovremmo impostare alcuni imbottitura sul footer per spingere via ogni cosa dai bordi. Per mettere tutto centrato sullo schermo, basta impostare il text-align proprietà al centro. Gli stili per la tagline / intestazione qui sono abbastanza semplici e sono molto simili a quello che abbiamo fatto prima per un titolo. Diamo un'occhiata a questo nel browser!
È un buon inizio ma abbiamo ancora una strada da percorrere! Continuiamo nel nostro file Sass.
.connect-box larghezza: 100%; margine: 0 auto; @media screen e (min-width: $ break-three) width: 525px; .connected-as, .connect-message background: lighten ($ gray, 4%);
Come molti dei nostri elementi, il collegare-box dovrebbe essere larga al 100% per schermi più piccoli. Dovrebbe quindi passare, al nostro $ Break-tre punto, alla larghezza vista nel disegno che è 525px. Quindi impostiamo il colore di sfondo del collegato come e connect-messaggio ad un colore grigio chiaro.
.connesso-come border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid $ white; allineamento del testo: a sinistra; padding: $ padding / 2 $ padding * 2; .connected-image width: 30px; altezza: 30 px; raggio-limite: 50%; fluttuare: a sinistra; margine-destra: $ margin / 2; span float: left; altezza: 30 px; altezza della linea: 30px; colore: $ darkgrey; . disconnect position: absolute; inizio: -10px; a destra: -10px; padding: $ padding / 2 $ padding; margin-top: 3px; border-radius: 20px; sfondo: $ bianco; decorazione del testo: nessuna; colore: $ darkgrey; text-transform: maiuscolo; dimensione carattere: 80%; &: hover background: $ red; colore: $ bianco; @media screen e (min-width: $ break-two) position: static; float: giusto;
Questo bel pezzo di CSS è per la parte superiore del nostro collegare-box. Il primo passo è arrotondare la parte superiore destra e sinistra di collegato come. Vogliamo anche una leggera separazione tra questa scatola e la sezione sottostante, quindi una semplice 1px solido $ bianco il confine farà bene il trucco. Infine, abbiamo bisogno di un po 'di padding, ma abbiamo bisogno di più a sinistra e a destra di quanto facciamo in alto e in basso, così per mantenere le cose belle e pulite usiamo semplicemente il nostro $ imbottitura variabile e dividere per due per alto e basso e moltiplicare per due per sinistra e destra. Questo è un ottimo esempio di dove cambiare il nostro valore variabile manterrà comunque tutto in proporzione.
Le prossime due dichiarazioni controllano l'immagine del profilo Twitter degli utenti connessi e il loro @nomeutente. Per mantenere le cose standard, impostiamo la larghezza e l'altezza dell'immagine nel CSS in modo che sappiamo che sarà sempre un quadrato della dimensione corretta. Per farlo apparire come un cerchio basta applicare a border-radius del 50% ad esso. Sia l'immagine del profilo che @nomeutente devono essere a sinistra e dovremmo assegnare al @username un margine per allontanarlo dall'immagine del profilo.
Il disconnect il pulsante ha alcune cose diverse in corso. A risoluzioni di piccolo schermo abbiamo bisogno che questo pulsante sia fuori dalla direzione dell'altro testo all'interno di questa finestra, quindi ho deciso che una buona opzione sarebbe quella di posizionarlo assolutamente sopra e oltre il suo contenitore. Una posizione di -10px per la parte superiore e quella destra va bene. Potresti voler giocare con questo se pensi che potrebbe essere meglio posizionato. Gli altri stili qui controllano l'aspetto con un semplice librarsi stato aggiungendo un bel grassetto $ rosso colore per enfatizzare l'azione di disconnessione. L'un po 'di reattività qui sposterà semplicemente il pulsante nel flusso del documento e lo farà galleggiare a destra in modo che si trovi di fronte ai dettagli di Twitter. Questo accadrà per qualsiasi cosa al di sopra e al di sopra di noi $ Break-due punto.
Salva, salva, salva! È tempo di dare un'altra occhiata:
Guardando bene! Ci stiamo avvicinando molto per finire questo adesso. Il prossimo è l'area della finestra di messaggio.
.connect-message border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; textarea border: none; sfondo: trasparente; larghezza: 100%; altezza: 130 px; padding: $ padding * 2; -webkit-transition: box-shadow 0.4s facilità; -moz-transition: box-shadow 0.4s facilità; -o-transizione: facilità di box-shadow 0.4s; -ms-transition: box-shadow 0.4s facilità; transizione: facilità di box-shadow 0.4s; &: focus outline: none; -webkit-box-shadow: inset 0px 0px 20px scurisci ($ grigio, 10%); box-shadow: inset 0px 0px 20px darken ($ gray, 10%); -webkit-transition: box-shadow 0.4s facilità; -moz-transition: box-shadow 0.4s facilità; -o-transizione: facilità di box-shadow 0.4s; -ms-transition: box-shadow 0.4s facilità; transizione: facilità di box-shadow 0.4s;
Questo blocco deve essere posizionato dopo il collegato come blocco, ma ancora all'interno del generale footer dichiarazioni.
Il connect-messaggio casella ha gli angoli arrotondati in basso a sinistra e a destra per completare l'aspetto del contenitore generale avendo gli angoli arrotondati. La textarea stessa ha sicuramente bisogno di un po 'di stile, dato che le impostazioni predefinite del browser sono decisamente brutte! Questi stili sono abbastanza semplici, ma puoi vedere che stiamo aggiungendo una transizione CSS per box-ombra. Il design non ha mostrato che a messa a fuoco lo stato dovrebbe assomigliare così ho deciso di sfumare un'ombra sottile in tutto l'interno della scatola. Poi svanisce quando si perde la messa a fuoco.
Vediamolo in azione, dobbiamo noi?
Penso che sia abbastanza buono! L'ombra della scatola potrebbe non essere di tuo gradimento, quindi gioca con quella per ottenere qualcosa che ritieni sia giusto.
.post-btn larghezza: 100%; allineamento del testo: centro; padding: $ padding * 2; margin-top: $ margin * 2; sfondo: $ verde; colore: $ bianco; font-weight: 500; confine: nessuno; border-radius: 5px; -webkit-transition: tutti i 0.4s sono facili; -moz-transition: tutti i 0.4s sono facili; -o-transizione: tutti i 0,4 secondi; -ms-transition: tutti i 0.4s sono facili; transizione: tutti i 0.4s sono facili; &: hover background: lighten ($ green, 10%); -webkit-transition: tutti i 0.4s sono facili; -moz-transition: tutti i 0.4s sono facili; -o-transizione: tutti i 0,4 secondi; -ms-transition: tutti i 0.4s sono facili; transizione: tutti i 0.4s sono facili;
Il tutto importante Posta "Grazie" pulsante! Stili abbastanza semplici qui. Il pulsante dovrebbe semplicemente riempire la larghezza del contenitore in ogni momento. Dovrebbe anche essere allontanato un po 'dall'area del messaggio, quindi alcuni margin-top ci aiuta qui Abbiamo un'altra dichiarazione di transizione, ma questa volta è impostata su tutti per animare ogni proprietà che ha un valore di cambiamento per mantenere tutto liscio. Ciò significa anche che in futuro possiamo aggiungere altri stili come a colore cambiare su hover e sarà ancora tutto animato.
Salvare il file e dare un'altra occhiata:
Bello. Questo è esattamente quello che vogliamo. È ora di dare uno stile a quei link sui social media.
.pulsanti social padding-left: 0px; margin-top: $ margin * 2; @media screen e (min-width: $ break-three) padding: $ padding * 3 0 $ padding * 3 117px; margin-top: 0px; .social-btn padding: $ padding / 2 14px; larghezza: 100%; blocco di visualizzazione; margine: $ margin / 2 0; border-radius: 20px; allineamento del testo: centro; colore: $ bianco; decorazione del testo: nessuna; text-transform: maiuscolo; dimensione carattere: 70%; @media screen e (min-width: $ break-three) float: left; margine: $ margin / 2; padding: $ padding / 2 $ padding * 2; larghezza: auto; .twitter background: # 00acee; &: hover background: lighten (# 00acee, 10%); .facebook background: # 3b5998; &: hover background: lighten (# 3b5998, 10%);
Questo codice dovrebbe andare all'interno del footer bloccare nel nostro file Sass. L'idea con questi pulsanti è che siano larghi al 100% e impilati verticalmente a risoluzioni mobili / tablet. Quindi, mentre si sposta la scala sul desktop, dovrebbero corrispondere al design. La query multimediale per sociali bottoni coinvolto un bel po 'di tentativi ed errori per ottenere un aspetto "centrato" sulle dimensioni del desktop. Il valore di 117px perché l'imbottitura sinistra era il punto che ho trovato per dare il risultato desiderato.
Ogni socio-BTN ha alcuni stili semplici per dare l'aspetto di base. Specifichiamo quindi gli stili per ciascun pulsante. In questa app è solo un colore di sfondo differenza. Nota qui che ho usato il valore esadecimale e non una variabile Sass. Non c'è una vera ragione per questo diverso da questo è l'unico posto in cui vengono usati questi colori, quindi cambiarli non sarebbe un grosso problema. Se avessimo i collegamenti sociali altrove, sicuramente li avrei impostati come variabili. Entrambi i pulsanti hanno una versione leggermente più chiara dei loro sfondi librarsi.
Prima di dare un'occhiata, possiamo anche mettere in atto il nostro blocco di stile finale:
.copyright dimensione carattere: 90%; colore: $ darkgrey; @media screen e (min-width: $ break-three) font-size: 100%
Come suggerisce il nome, questo blocco controlla il nostro piccolo tag Copyright nel footer. La dimensione del carattere risponde alle modifiche alle dimensioni del browser qui, che mostrano il 100% a $ Break-tre.
Salva e dai un'occhiata al nostro capolavoro!
Bello! Tutto sembra fantastico e questo avvolge la nostra interfaccia natalizia!
Questo è un tema fortemente stagionale, basato sul concetto di Natale e Capodanno. Con un piccolo ritocco potresti facilmente modificarlo in base alle tue esigenze, ad esempio:
Spero davvero che ti sia piaciuto lavorare con questa app web con me. È stato un progetto divertente da costruire e sono felice di poter condividere le mie tecniche su come costruirlo. Il codice sorgente è sempre disponibile tramite i link di download quindi sentiti libero di scavare e fammi sapere nei commenti qualsiasi pensiero tu abbia, o se qualcuno di voi lo migliorerebbe in qualsiasi modo.
Grazie a Tomas per il design iniziale, e grazie per aver letto e seguito.
Accentsconagua