Share
În acest tutorial, vom termina aplicația noastră front-end, astfel încât toate acestea arată perfect și funcționează frumos pe toate dimensiunile ecranului. Ultima dată, am rotunjit prin styling casetele de mesaje, lăsând doar conținutul lăsat de făcut. Să ne scufundăm chiar acum? O.K!
Este posibil să trebuiască să vă apropiați de părțile anterioare ale acestui tutorial, caz în care:
.conținutul mesajului width: 100%; culoare: întunecată ($ gri, 30%); Ecranul @media și (min-width: $ break-two) lățime: 75%; float: dreapta; ecranul @media și (min-width: $ break-three) lățime: 85%; ecranul @media și (min-width: $ break-four) lățime: 75%;
Declarațiile pentru Mesajul conținut asigurați-vă că lățimea se comportă în sine atunci când browser-ul redimensionează. Avem nevoie de o lățime de 100% pentru dimensiunile mici ale ecranului, astfel încât să se afle frumos sub imagine. Odată ce ne-am lovit $ Pauza de doi lățimea trebuie apoi să plutiți conținutul drept și să trageți ușor lățimea pentru a compensa acest lucru.
Celelalte puncte de pauză aici trebuie doar să vă asigurați că lățimea scade frumos în raport cu lățimea browserului, deci pe o rezoluție de tabletă Mesaj-box este totuși stivuit vertical, dar pe noi Mesajul conținut este plutind înăuntru, ceea ce înseamnă că lățimea de 75% probabil nu este destul de largă. Tragem-o înapoi la o lățime de 75% odată ce ajungem la dimensiunile bazate pe desktop Mesaj-box fiind plutind și mai îngust.
a culoare: $ verde; &: hover culoare: $ roșu; h3, p, div (margine: 0; h3 font-familie: $ titlu-font; font-size: 200%; greutatea fontului: 400; spațierea literelor: -0,02em; culoare: $ negru; p culoare: $ roșu; font-greutate: 600; div margin-top: $ margine; overflow: ascuns; -ms-text-overflow: elipsă; -o-text-overflow: elipsă; depășirea textului: elipsă;
Următoarele stiluri sunt foarte simple. Noi dăm doar orice legătură $ verde culoare cu a $ roșu hover state și depășind orice margini stabilite pe elementele h3, p și div cuprinse în Mesajul conținut. Stilurile individuale pentru elementele h3, p și div sunt puțin mai interesante. h3 este setat să utilizeze $ Titlu font- și are unele spațiul dintre litere setați doar pentru a trage spațiile ușor pentru a se potrivi mai bine cu designul. div stilurile de etichete se referă la menținerea conținutului conținut, astfel încât să ne asigurăm revărsare este ascuns și dacă există vreo depășire, arătăm un elipsă pentru a indica faptul că există mai mult text. Acest tip de lucru se poate face cu codul de pe partea serverului (și probabil ar fi), dar este frumos să îl includeți aici în CSS în scopul acestui tutorial.
Salvați-vă munca și mergeți la browser ...
Asta arată minunat! Avem trei aspecte ușor diferite, toate controlate de stilurile simple de mai sus. Aceasta completează CSS pentru Mesaj-box astfel încât tot ce trebuie să facem acum este să copiați marcajul de cinci ori și să schimbați conținutul în funcție de design. Dacă această aplicație ar funcționa real, nu ar trebui să facem acest lucru, dar acest tutorial trebuie să fie necesar! Dă-ți cinci minute să copiezi, să lipiți și să modificați codul pentru fiecare cutie.
Să luăm doar o scurtă privire în browser pentru a verifica dacă stilurile noastre funcționează perfect atunci când avem mai multe Mesaj-box...
Frumos! Aplicația noastră Web este cu siguranță luată în considerare acum și cutiile noastre de mesaje funcționează conform destinației în toate dimensiunile browserului.
Am cucerit cea mai mare parte a aplicației noastre web, dar mai rămâne o secțiune importantă: subsol. Această parte a aplicației noastre este importantă, deoarece găzduiește locul pe care un utilizator îl poate scrie / posta mesajul. Există niște biți destul de complicați, așa că să începem!
Mai întâi, mai întâi, să scriem următoarea marcaj în fișierul index.html:
Există câteva secțiuni în acest subsol. Domeniul principal de focalizare este forma în mijloc care, deși nu este neapărat necesară aici, va permite utilizatorului să-și posteze mesajul. social-BTNs va avea nevoie de unele stiluri de schimbare a aspectului și tot conținutul subsolului trebuie să fie centrat pe ecran. Să începem de sus și să intrăm direct în CSS ...
footer umplutură: $ padding * 4; text-align: centru; fundal: $ alb; h4 margin-top: 0px; font-family: $ titlu-font; font-size: 26px; greutatea fontului: 400; culoare: $ întuneric;
Mai întâi de toate ar trebui să stabilim unele umplutură pe subsol pentru a împinge toate lucrurile departe de margini frumos. Pentru a obține totul centrat pe ecran am setat doar aliniere text proprietate la centru. Stilurile pentru sloganul / titlul de aici sunt destul de simple și sunt foarte asemănătoare cu ceea ce am făcut înainte pentru un titlu. Să verificăm asta în browser!
Este un început bun, dar avem încă o cale de a merge! Să continuăm în dosarul nostru Sass.
.caseta de conectare lățime: 100%; marja: 0 auto; Ecranul @media și (min-width: $ break-three) width: 525px; . conectat-ca, .connect-message fundal: lighten ($ gri, 4%);
Ca multe dintre elementele noastre, conectați-box ar trebui să fie 100% lată pentru ecranele mai mici. Ar trebui să se schimbe, la noi $ Break-trei punct, la lățimea văzută în proiectare care este 525px. Apoi setăm culoarea de fundal a imaginii conectat ca și conectați-mesaj la o culoare gri deschis.
.conectat ca border-top-left-radius: 5px; raza de sus-dreapta-dreapta: 5px; frontieră-fund: 1px solid $ alb; text-aliniere: stânga; umplutură: $ padding / 2 $ padding * 2; Imagine conectată width: 30px; înălțime: 30px; raza de graniță: 50%; plutește la stânga; margin-dreapta: $ marja / 2; span float: left; înălțime: 30px; linia-înălțime: 30px; culoare: $ întuneric; . deconectați position: absolute; top: -10px; drept: -10px; padding: $ padding / 2 $ padding; margin-top: 3px; border-radius: 20px; fundal: $ alb; text-decoration: nici unul; culoare: $ întuneric; text-transform: majuscule; font-size: 80%; &: hover fundal: $ roșu; culoare: $ alb; ecranul @media și (min-width: $ break-two) position: static; float: dreapta;
Această bucată corectă de CSS este pentru secțiunea de sus a noastră conectați-box. Primul pas este de a rotunji partea din dreapta sus și din stânga conectat ca. De asemenea, dorim o ușoară separare între această casetă și secțiunea de mai jos, deci un simplu 1px solid $ alb frontiera va face truc frumos. În cele din urmă, avem nevoie de niște cearceafuri, dar avem nevoie de mai mult la stânga și la dreapta decât în partea de sus și de jos, pentru a păstra lucrurile frumoase și îngrijite, pur și simplu folosim $ padding variați și împărțiți cu două pentru partea de sus și de jos și înmulțiți cu două pentru stânga și dreapta. Acesta este un exemplu excelent în care schimbarea valorii noastre variabile va păstra totul în proporție frumos.
Următoarele două declarații controlează imaginea profilului Twitter al utilizatorilor conectați și numele lor de utilizator @. Pentru a păstra standardele, stabilim lățimea și înălțimea imaginii în CSS, astfel încât știm că va fi întotdeauna un pătrat de dimensiune corectă. Pentru a face ca aceasta să apară ca un cerc, aplicați pur și simplu a border-radius de 50%. Atât imaginea de profil, cât și numele de utilizator trebuie să fie flotate la stânga și ar trebui să îi oferim o marjă pentru a împinge imaginea de profil.
deconecta butonul are câteva lucruri diferite. La rezoluțiile de pe ecranul mic avem nevoie ca acest buton să nu se afle în calea celuilalt text în interiorul acestei casete, așa că am decis că o opțiune bună ar fi să o poziționezi absolut chiar deasupra și dincolo de containerul său. O poziție de -10px pentru partea de sus și dreapta este bine. Poate doriți să jucați cu asta dacă credeți că ar putea fi mai bine plasat. Celelalte stiluri de aici controlează aspectul cu un simplu planare stat adăugând un frumos îndrăzneț $ roșu pentru a accentua acțiunea de deconectare. Un pic de reacție aici va lovi cu piciorul butonul înapoi în fluxul de documente și plutește-l drept așa că se află în fața detaliilor Twitter. Acest lucru se va întâmpla pentru orice și mai mult decât noi $ Pauza de doi punct.
Salvați, salvați, salvați! Este timpul să aruncați o privire din nou:
Arata bine! Ne apropiem foarte mult de obtinerea acestui lucru acum. Următorul este zona de mesaje.
.conectați-mesaj border-bottom-left-radius: 5px; raza de jos-dreapta-dreapta: 5px; textarea border: none; fundal: transparent; lățime: 100%; înălțime: 130px; padding: $ padding * 2; -webkit-transition: caseta-shadow 0.4s usurinta; -moz-tranziție: cutie-umbra 0.4s usurinta; -o-tranziție: umbra cutie-0.4s ușurință; -ms-transition: caseta-umbra 0.4s usurinta; tranziție: umbra cutie-0.4s ușurință; &: focalizare contur: nici unul; -webkit-box-shadow: inset 0px 0px 20px darken ($ gri, 10%); box-shadow: inset 0px 0px 20px darken ($ gri, 10%); -webkit-transition: caseta-shadow 0.4s usurinta; -moz-tranziție: cutie-umbra 0.4s usurinta; -o-tranziție: umbra cutie-0.4s ușurință; -ms-transition: caseta-umbra 0.4s usurinta; tranziție: umbra cutie-0.4s ușurință;
Acest bloc ar trebui plasat după conectat ca bloc, dar încă în interiorul general subsol declaraţii.
conectați-mesaj caseta are colturi rotunjite în partea de jos stânga și dreapta pentru a finaliza aspectul container general având colțuri rotunjite. Textarea însăși are nevoie de un anumit stil, deoarece setările implicite ale browserului sunt chiar urâte! Aceste stiluri sunt destul de simple, dar puteți vedea că adăugăm o tranziție CSS pentru box-shadow. Designul nu a arătat ce a concentra starea ar trebui să arate astfel încât am decis să am o umbră subtilă în jurul valorii de interiorul casetei. Apoi se estompează când focalizarea se pierde.
Să o vedem în acțiune?
Cred ca arata destul de bine! Este posibil ca umbra de box să nu fie pe placul tău, deci jucați-vă cu asta pentru a obține ceva ce credeți că are dreptate.
.post-btn lățime: 100%; text-align: centru; padding: $ padding * 2; margin-top: $ marja * 2; fundal: $ green; culoare: $ alb; greutatea fontului: 500; frontieră: nici una; raza de graniță: 5px; -webkit-transition: toate 0.4s ușurință; -moz-tranziție: toate ușurința de 0,4s; -o-tranziție: toate ușurința de 0,4s; -ms-tranziție: toate ușurința de 0,4s; tranziție: toate ușurința de 0,4s; &: hover fundal: lighten ($ verde, 10%); -webkit-transition: toate 0.4s ușurință; -moz-tranziție: toate ușurința de 0,4s; -o-tranziție: toate ușurința de 0,4s; -ms-tranziție: toate ușurința de 0,4s; tranziție: toate ușurința de 0,4s;
Totul important Postați "Mulțumesc" buton! Stiluri destul de simple aici. Butonul trebuie să umple lățimea containerului în orice moment. De asemenea, ar trebui să fie împinsă puțin de zona mesajului, deci unii margin-top ne ajută aici. Avem o altă declarație de tranziție, dar de data aceasta este setată toate în scopul de a anima fiecare proprietate care are o schimbare de valoare pentru a păstra totul neted. Acest lucru înseamnă, de asemenea, că în viitor putem adăuga alte stiluri precum a culoare schimbați pe hover și totul va fi în continuare animat.
Salvați fișierul și luați un alt aspect:
Minunat. Acesta este exact ceea ce vrem. Timpul pentru stilul acelor legături sociale media.
.butoane sociale padding-left: 0px; margin-top: $ marja * 2; Ecranul @media și (min-width: $ break-three) umplutură: $ padding * 3 0 $ padding * 3 117px; margin-top: 0px; . social-btn umplutură: $ padding / 2 14px; lățime: 100%; afișare: bloc; marja: $ marja / 2 0; border-radius: 20px; text-align: centru; culoare: $ alb; text-decoration: nici unul; text-transform: majuscule; font-size: 70%; Ecranul @media și (min-width: $ break-three) float: left; marja: $ marja / 2; umplutură: $ padding / 2 $ padding * 2; lățime: auto; .twitter background: # 00acee; &: hover fundal: lighten (# 00acee, 10%); .facebook background: # 3b5998; &: hover fundal: lighten (# 3b5998, 10%);
Acest cod ar trebui să intre în interiorul subsol bloc în fișierul nostru Sass. Ideea cu aceste butoane este ca ele să fie 100% lățime și stivuite vertical la rezoluțiile mobile / tabletă. Apoi, în timp ce deplasați scara pe desktop, ar trebui să se potrivească cu designul. Interfața de interogare pentru -butoane sociale implicat destul de un pic de încercare și de eroare pentru a obține o privire "centrate" la dimensiuni desktop. Valoarea a 117px pentru căptușeala din stânga a fost punctul pe care l-am găsit pentru a da rezultatul dorit.
Fiecare social-BTN are unele stiluri simple pentru a da aspectul de bază. Apoi specificăm stilurile pentru fiecare buton. În această aplicație este doar o culoare de fundal diferență. Rețineți că am folosit valoarea hex și nu o variabilă Sass. Nu există nici un motiv real pentru acest altul decât acesta este singurul loc în care sunt folosite aceste culori, astfel încât schimbarea lor nu ar fi o mare problemă. Dacă am avea legăturile sociale în altă parte, cu siguranță aș fi constituit-o ca variabile. Ambele butoane au o versiune mai ușoară a fundalului lor planare.
Înainte de a arunca o privire, putem pune și blocul nostru de stil final:
.drepturi de autor font-size: 90%; culoare: $ întuneric; Ecranul @media și (min-width: $ break-three) font-size: 100%
După cum sugerează și numele, acest bloc controlează eticheta noastră mică de drepturi de autor în subsolul paginii. Dimensiunea fontului răspunde la modificările dimensiunii browserului, afișând 100% la $ Break-trei.
Salvați și aruncați o privire la capodopera noastră!
Frumos! Totul arată minunat și aproape că îți împachetează interfața de aplicații pentru Crăciun!
Aceasta este o temă puternic sezonieră, bazată pe un concept de Crăciun și Anul Nou. Cu doar puțină modificare, puteți să o schimbați ușor pentru a vă potrivi nevoilor, de exemplu:
Sper că te-ai bucurat să lucrezi cu această aplicație web cu mine. A fost un proiect amuzant de a construi și sunt fericit că am reușit să împărtășesc tehnicile mele despre cum să-l construiesc. Codul sursă este întotdeauna disponibil prin intermediul link-urilor de descărcare, deci nu ezitați să vă grăbiți și să-mi spuneți în comentariile orice gânduri pe care le aveți sau dacă vreunul din voi îl va îmbunătăți în orice mod.
Vă mulțumim lui Tomas pentru designul inițial și vă mulțumesc că ați citit și ați urmat.
Accentsconagua