Cunning, nu-i așa? Alinierea icoanelor poate fi o provocare, mai ales dacă icoanele sunt făcute de mai mulți oameni. Sincer, m-am gandit ca intrebarea este atat de usoara incat sa poti raspunde cu un tweet. Cu toate acestea, pentru alinierea perfectă icoane în text va trebui să încercați.
Din fericire, există câteva sfaturi universale, observând care, vom ști întotdeauna că icoanele noastre sunt perfect aliniate.
Sfat 1: Decideți la formatul pictogramei
Există și alte formate de icoane pe lângă SVG. Există multe metode deja depășite. Câteva exemple de formate de pictograme: icoane SVG, icoane de fonturi, sprite CSS, imagini inline.
Indiferent de preferințele dvs., alinierea icoanelor depinde în mare măsură de formatul selectat. De exemplu, toate icoanele sunt într-o singură sprite. Aceasta înseamnă că pictogramele au o dimensiune fixă (cu excepția cazului în care, desigur, nu ați făcut mai întâi cele mai mari pictograme și apoi le-ați diminuat cu dimensiunea fundalului). În acest caz, este mult mai ușor să alegeți mărimea și înălțimea liniei pentru aliniere cu pictogramele.
Practicați HTML5 și CSS3 de la zero la rezultatul!
Avantajul SVG este că este scalabil și petreceți mai mult timp pe CSS decât pe design.
Concluzie: selectați un format pentru toate pictogramele și construiți-le pe baza metodei de aliniere. Codul în acest caz va fi mult mai ușor și designerul dvs. (sau designerul dvs. interior) vă va mulțumi.
Sfat 2: Utilizați pictogramele de aceeași dimensiune
Situația ideală este atunci când toate pictogramele au aceeași dimensiune. Spuneți, toate pictogramele dvs. au o dimensiune de 100x100 pixeli. Știm dimensiunea icoanelor, ceea ce simplifică foarte mult procesul de aliniere.
Știm, de asemenea, că acest lucru nu este întotdeauna cazul. Icoanele pot ocupa un spațiu diferit.
Când lucrați cu grafică raster, respectați întotdeauna permisiunile. Icoanele pot ocupa spații diferite, dar principalul lucru este să vă asigurați că icoanele sunt clare și proporționale.
Sfat 3: Alegeți dimensiunea fontului pentru mărimea pictogramelor
Icoanele în cea mai mare parte sunt prelucrate, cum ar fi fonturile. Ele sunt folosite pentru împerecherea cu text sau în locul acestuia, deci este extrem de important să selectați mărimea pictogramelor pentru dimensiunea textului din același motiv pentru a utiliza litere de aceeași mărime - aceasta afectează lizibilitatea textului.
Practicați HTML5 și CSS3 de la zero la rezultatul!
Acest lucru nu înseamnă că pictogramele ar trebui să fie neapărat 16 pixeli, dacă fontul dvs. de text este de 16 pixeli. Este important să înțelegeți faptul că icoanele dvs. completează perfect textul, indiferent dacă sunt puțin mai mari, de o mărime sau puțin mai mici decât textul principal. O ilustrare clară a icoanelor bine aliniate și a icoanelor greșite.
În ciuda aceleiași aliniere în ambele exemple, icoanele stângi sunt mult mai potrivite pentru dimensiunea textului și sunt mai bine aliniate decât dreapta.
Sfat 4: Ajustați aspectul dvs. cu CSS
După ce au fost făcute și făcute, există o metodă precisă și simplă pentru alinierea icoanelor în text:
Mai jos, în demo, există o diferență între pictogramele perfect aliniate și textul și pictogramele care sunt doar puțin în afara alinierii.
Sfat 5: Utilizați clasele pentru pictogramele individuale
Exemplul de mai sus nu este rău, dar ați putea observa că pictograma locație este deja diferită și este situată mai departe de text decât pictograma muzică. E atât de enervant! Acest lucru ne va ajuta cu CSS, scrise special pentru această pictogramă.
Atât de mult mai bine!
concluzie
Dacă acest lucru nu a ajutat la alinierea exactă a icoanelor și a textului, atunci nu sunteți singuri. Totul depinde foarte mult de modul în care ați creat icoanele. CSS este un mod destul de simplu.
Acest articol descrie doar modul de aliniere a icoanelor în cadrul textului, dar există multe alte elemente, cum ar fi butoanele, câmpurile de formular, meniurile etc. Și există un design adaptiv, nu-i așa? În ciuda faptului că este necesar să se facă, mi se pare că cele cinci sfaturi pe care le-am propus mi-au ajutat să fac față sarcinii.
Ediție: Comanda webformself.
Practicați HTML5 și CSS3 de la zero la rezultatul!
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
