Share
Indiferent dacă ești un fan al numelui de brânză sau nu, se pare că pictograma de pe hamburgerul "hamburger" este aici pentru a rămâne - cel puțin pentru puțin timp, oricum.
Hamburgerul, așa cum se vede în TechCrunchÎn acest tutorial vom examina o serie de abordări pentru crearea și styling-ul unei astfel de pictograme fără a utiliza imagini raster. Am șapte opțiuni pentru a vă arăta, deci ar fi mai bine să ne crăpatm ...
Utilizarea unei imagini este rapidă și simplă, deci de ce deranjează căutarea de abordări alternative? Iată câteva motive pe care le vom folosi pentru a măsura succesul fiecăreia dintre soluțiile potențiale împotriva:
Vom analiza câteva exemple de creare a pictogramei de meniu cu CSS într-un moment, dar lista mea ar fi incompletă fără a menționa imaginile SVG ca o opțiune viabilă.
Dacă scrierea codului nu este puterea ta, dar totuși doriți să beneficiați de avantajele și scalabilitatea elementelor de imagine pentru afișaje de înaltă densitate, graficele vectoriale în format SVG reprezintă o opțiune excelentă.
SVG poate fi folosit în mai multe moduri:
Accentsconagua
![]()
SVG poate fi adăugat la src a unui img etichetați exact așa cum ați face cu orice alt format de imagine.
imagine de fundal Aceeași imagine SVG ar putea fi folosită și ca imagine de fundal în CSS
.meniu-pictogramă width: 70px; înălțime: 50px; background-image: url ( 'cale / catre / meniu-icon.svg');
SVG poate fi, de asemenea, scris în linie folosind XML. Dacă exportați SVG dintr-o aplicație precum Adobe Illustrator și o deschideți într-un editor de coduri, veți vedea cum arată codul subiacent.
Bacsis: copierea obiectelor din Illustrator, apoi adăugarea directă într-un editor de text vă va oferi și codul SVG.
Deși s-ar putea simți ciudat să copiați și să inserați acest XML în șablonul de pagină, atunci când luați această abordare, puteți manipula stilul elementelor individuale ale SVG în CSS.
svg linie accident vascular cerebral: alb;
Destul de minunat, eh?
Pentru o abordare mai impresionantă, este posibil să animați SVG. Un exemplu minunat de animare a unei pictograme de meniu poate fi văzut în acest tutorial fantastic de la Kyle Henwood privind realizarea unui buton de Burger HTML SVG.
Utilizarea SVG poate reduce cererile și permite manipularea prin CSS dacă este înlăturat așa cum se arată mai sus. Atunci când utilizați SVG ca un img etichetă sau CSS imagine de fundal singurele criterii de pe lista mea care sunt satisfăcute sunt scalabilitatea infinită.
Putem face mai bine.
A doua abordare este de a folosi un Font Icon.
Un font de pictograme este la fel ca orice alt tip de text personalizat pe care îl adăugați prin intermediul @ Font-face dar în loc să conțină litere ale alfabetului, conține o serie de simboluri. Acestea sunt adesea adăugate la pagină prin conţinut proprietatea unui a :inainte de sau :după pseudo element pentru a menține marcajul curat și ordonat și fără elemente de prezentare.
Unul dintre serviciile mele preferate pentru fonturile de pictograme este Icomoon, care are o bibliotecă de fonturi gratuite pe care le puteți alege și alege să creați propriul dvs..
Pentru a crea un font complet personalizat al propriilor dvs. modele de icoane, există o caracteristică pentru a încărca propriile imagini SVG prin intermediul butonului "Importați pictograme". Aplicația generează fontul și tot codul necesar pentru utilizarea fontului făcut manual, fie prin descărcarea fișierelor de fonturi și a CSS, fie prin utilizarea unui legătură pentru a conecta o versiune găzduită a acestuia în cap din pagina dvs. Am folosit acest serviciu de mai multe ori în cadrul proiectelor clienților și este o adevărată bucurie de utilizat!
Fonturile de tip Icon sunt scalabile (deși sunt fonturi supuse anti-aliasingului) și pot fi manipulate ca text în CSS, dar încărcarea lor pe pagină necesită cereri suplimentare pentru fișierele de fonturi și foile de stil. Pentru iconițe mai complexe, cum ar fi unele dintre cele ilustrate mai sus, aceasta este o abordare minunată, dar, deoarece pictograma de meniu este atât de simplă, am putea să o facem folosind funcțiile din CSS.
Cadrele CSS cum ar fi Fundația ZURB sau Twitter Bootstrap sunt foarte populare, astfel încât, probabil, am putea să le privim pe acești tipi pentru o abordare plăcută pentru crearea imaginii noastre?
JavaScript-ul JavaScript al JavaScript-ului va restrânge automat meniurile derulante pentru browsere mai mici de 768px și le va înlocui cu un buton de comutare nav-bar.
Când utilizați inspectorul web pentru a vedea cum a fost făcută icoana, vedem următoarele:
A buton element cu patru deschidere elemente interioare; trei dintre acestea sunt utilizate pentru a crea liniile orizontale ale pictogramei de meniu, iar prima este pentru cititorii de ecran numai când textul "Toggle navigation" este poziționat în afara ecranului.
CSS-ul adăugat la fiecare icon-bar stabilește o culoare de fundal pentru fiecare bar, împreună cu dimensiunile și colțurile foarte subțiri rotunjite.
.navbar-default .navbar-comutare .icon-bar background-color: # 888; .barbar-comutare .icon-bar display: bloc; lățime: 22px; înălțime: 2px; raza de graniță: 1px;
Dacă colțurile ușor rotunjite pe fiecare linie orizontală sunt importante pentru dvs., atunci această abordare este una dintre puținele opțiuni CSS care vor permite atingerea acestui efect.
Un alt beneficiu pentru împărțirea fiecărei linii în elementul său propriu ar fi dacă vroiai să animați fiecare între stările deschise și cele închise pe comutare. Un exemplu extraordinar al acestui lucru poate fi văzut în noul redesign război mondial.
Am fost puțin surprinsă să aflu că un astfel de cadru popular folosește cinci elemente separate pentru a crea acest element relativ simplu de UI, dar sunt sigur că au un motiv bun pentru a face acest lucru. Am văzut o abordare similară folosită și în altă parte (fără Bootstrap), deci este cu siguranță mai comună decât mă așteptam. Uitați-vă la sursa de pe site-ul Media Temple și veți vedea că ei iau abordarea hamburgerului foarte literal!
Dacă preferați să păstrați marcajul cât mai curat posibil, există și alte câteva metode la care ne putem uita; și folosesc doar un singur element ...
Pictograma tipic din meniu este foarte simplă în design; doar trei linii orizontale.
Primul și ultimul rând pot fi create cu border-top și border-bottom a unei etichete de ancorare setată la display: inline-block. Linia de mijloc poate fi adăugată cu o margine pe un pseudo :după element.
Cu următorul cod HTML, putem construi câteva stiluri generice pentru fiecare abordare diferită cu meniu-icon clasă și apoi adăugați stiluri specifice pentru aceasta folosind frontierele cu border-icon clasă.pictograma de meniu
corp fundal: # 196e76; / * Tuts + verde * / .menu-icon poziție: relativă; display: inline-block; lățime: 70px; text-liniuță: -999px; .limitate-pictogramă height: 30px; frontieră: 10px solid #fff; frontieră-fund: 10px solid #fff; . border-icon: înainte de content: ""; Poziția: absolută; top: 10px; stânga: 0; lățime: 100%; frontieră: 10px solid #fff;
Această abordare are cel mai profund suport pentru browser; pseudo-elementele sunt suportate în IE8 și mai sus și granițele și poziționarea sunt suportate peste tot!
Această metodă bate toate casetele noastre pentru crearea de icoane non-raster, dar există și câteva alte abordări CSS la care ne-am putea uita înainte de a alege un câștigător.
Dacă sunteți destul de norocos să nu aveți nevoie de suport IE8, există câteva alternative disponibile care utilizează câteva caracteristici puțin mai recente în CSS. Presupun că dacă trebuie doar să afișați pictograma de meniu pe dispozitivele mobile, veți putea să utilizați oricare dintre aceste abordări fără să vă faceți griji cu privire la asistența browserului vechi ...
O abordare este folosirea mai multor box-shadow declarații fără blur, pentru a crea o serie de linii solide.
Pentru a vă asigura că pictograma are zona potrivită pentru clic, seria de umbre trebuie adăugată printr-un element pseudo și apoi poziționată astfel încât să apară ca un strat sub A element.
.umbra-pictogramă height: 40px; . shadow-icon: după content: ""; Poziția: absolută; sus: -50px; stânga: 0; lățime: 100%; înălțime: 100%; box-shadow: 0 10px 0 #fff, 0 20px 0 # 196e76, 0 30px 0 #fff, 0 40px 0 # 196e76, 0 50px 0 #fff;
Singurul dezavantaj al acestei abordări este că pictograma va trebui pusă pe ceva cu fundal solid (de ex. # 196e76 pentru Tuts + verde) pentru a obține efectul de umbre dungate pentru a funcționa. obisnuiam # 196e76 pentru Tuts + verde în acest caz, dar va trebui să schimbați acest lucru pentru a se potrivi cu culoarea de fundal.
Din nou, această abordare satisface lista cerințelor, dar pasul suplimentar de poziționare a elementului pseudo pentru a aduce partea vizuală a pictogramei sub partea care poate face clic, se simte un pic de hack pentru mine. Arată grozav, dar nu este soluția cea mai elegantă.
Abordarea CSS finală este cea mai slabă. Folosind un singur element, fără pseudo elemente, putem crea o serie de linii orizontale pentru pictogramă folosind un singur gradient liniar cu o serie de opriri de culoare.
Am folosit spec. Fără prefix pentru declivități aici pentru a păstra exemplul în căutarea curat. Pentru a genera gradienți și pentru a obține variantele prefixate ale vânzătorului, verificați Generator de gradienți CSS Colorzilla.
.gradient-pictogramă height: 50px; fundal: gradient liniar (până la fund, #fff 0%, #fff 20%, transparente 20%, transparente 40%, #fff 40%, #fff 60%, transparente 60%, transparente 80%, #fff 80% #fff 100%);
Aceasta este cea mai simplă și mai flexibilă abordare până acum. Ceilalți sunt un pic fragili, pentru că dacă doriți să ajustați dimensionarea sau poziționarea acestora, veți avea nevoie să modificați câteva valori.
Problema de a avea o culoare de fundal solidă în spatele icoanei este de asemenea eliminată aici prin utilizarea transparent culoarea se oprește între liniile albe.
Deoarece această abordare cu gradient este făcută folosind opriri de culoare procentuale, făcând pictograma mai largă sau mai înaltă este la fel de simplă ca schimbarea lăţime și înălţime proprietățile elementului.
Din cele trei abordări CSS, acesta este favoritul meu. Dacă aș fi vrut să folosesc CSS pentru a crea pictograma mea, acesta este cel pe care îl folosesc - și, de fapt, am făcut-o pe site-ul meu personal. Dar înainte de a încheia lucrurile, este doar un altul pe care vreau să-ți arăt ...
Am jucat în prealabil cu toate aceste abordări înainte, dar unele sunt mai potrivite decât altele; suportul și flexibilitatea browserului sunt adesea un factor, așa că dacă doriți să utilizați oricare dintre cele de mai sus, luați în considerare acești factori.
Cu toate acestea, recent am întâlnit o abordare mult mai simplă, mult mai ușoară în timp ce învățam o clasă responsabilă de dezvoltare web.
Există de fapt un caracter în setul de caractere UTF-8 care este aproape identic cu pictograma clasică "hamburger". Am găsit-o în timp ce caută ceva complet diferit pe Copy Paste Character în secțiunea lor cu forme grafice.
Acest caracter special: ☰ este numit Trigram pentru cer. Este caracterul U + 2630 în unicode și este unanly similar cu pictograma meniu omniprezent. E unul din opt Trigams care sunt un grup de simboluri care au o semnificație profundă în filosofia chineză. Pentru mai multe informații, puteți citi mai multe despre cele opt trigrame aici.
Pentru a le utiliza în proiect, mergeți la Copy Paste Character și faceți clic pe simbolul care îl va copia în clipboard. Doar lipiți în editorul de text de alegere unde doriți să apară "pictograma". De asemenea, puteți să o copiați direct din textul corpului în acest articol, dacă preferați.
Veți dori să vă asigurați că documentul dvs. utilizează setul de caractere UTF-8 așa cum este specificat de a meta etichetă în cap a paginii:
Deoarece acesta este doar un conținut textual, acesta poate fi redactat în CSS pentru ao face mai mare, pentru a le da spațiere, pentru a schimba culoarea și a tot felul de alte lucruri!
Deci, ne-am uitat la o serie de moduri de a crea și a adăuga o pictogramă meniu hamburger la un proiect. Am analizat fonturile SVG și pictograme și am abordat trei abordări numai pentru CSS, dar în cele din urmă am găsit soluția cea mai simplă a acestora; folosind un caracter unicode.
Folosind "Trigram of Heaven", toate cerințele de a nu folosi imaginile raster: are nevoie de zero cereri HTTP, este scalabilă pentru ecrane cu densitate mare, poate fi manipulată cu CSS și este atât de simplă, ne eliberează pentru a merge în căutare de alte provocări interesante de abordat! Cred că întotdeauna se plătește să găsești o soluție simplă înainte de a te scufunda în CSS ...
Dacă aveți alte abordări pentru crearea pictogramei "hamburger", mi-ar plăcea să aud despre ele în comentariile!
