Share
Seturile de instrumente reprezintă o modalitate excelentă de a îmbunătăți interfața utilizator atunci când utilizatorii dvs. au nevoie de un context suplimentar pentru pictograma fantezie sau când doresc o anumită reasigurare pentru a face clic pe un buton sau poate o legendă pentru ouă de Paști pentru a merge împreună cu o imagine. Să facem câteva sfaturi animate, chiar acum, cu doar HTML și CSS.
Iată la ce lucrăm:
Înainte de a ne scufunda în cazan, să aruncăm o privire asupra a ceea ce facem de fapt. Scopul principal este de a avea o modalitate simplă de a adăuga o sugestie, așa că vom face acest lucru prin adăugarea unui personalizat tooltip atribut:
Accentsconagua
text sau pictogramă vizibilă etc..Dacă sunteți în căutarea unor sugestii de tip 508, sau aveți nevoie de sfaturi inteligente cu detectarea coliziunii containerelor și / sau suport pentru conținutul HTML față de textul simplu, există o mulțime de soluții care utilizează scripturi de la terți pentru a rezolva aceste nevoi pentru dvs..
"JavaScript este imperativ pentru a face componente accesibile pe deplin accesibile" - Sara Soueidan, Construirea unui instrument de ajutor complet accesibil ... este mai greu decât am crezut
Acest tutorial nu abordează în mod specific nevoile de accesibilitate. Știți utilizatorii și ceea ce au nevoie, deci asigurați-vă că aveți în vedere și nevoile lor în acest sens.
Oh, așteptați. Avem un asterisc pentru a ne ocupa mai întâi de "nu avem nevoie de nici un marcaj suplimentar". Aceasta este magie, la urma urmei. Sugestiile noastre nu se potrivesc într-adevăr au nevoie de elemente suplimentare DOM, deoarece acestea sunt alcătuite complet din pseudo-elementele ( ::inainte de și ::după lucruri) pe care le putem controla prin CSS.
Dacă deja utilizați pseudoelementele unui element dintr-un alt set de stiluri și doriți o sugestie pentru acest element, atunci este posibil să fie necesară restructurarea unui puțin pic.
Aștepta. Gremlins! Încă o avertizare: Poziționarea CSS. Pentru ca tooltipurile să funcționeze corect, trebuie să fie elementul părinte (lucrul pe care îl atașăm)
poziție: relativă, saupoziția: absolută, saupozitie: fixaPe scurt, altceva decât pozitie: statica - acesta este modul de poziție prestabilit alocat pentru aproape toate elementele browserului. Instrumentele sunt poziționate absolut și trebuie să cunoască limitele în care absolutismul lor are sens. Direcția de poziție prestabilită static nu își declară propriile limite și nu va da sfaturile noastre de instrumente un context pentru a împinge împotriva, astfel încât tooltips va folosi următorul cel mai apropiat element parental care are o limită declarată.
Va trebui să decideți ce direcție de poziție funcționează cel mai bine cu modul în care utilizați instrumentele de scriere. Acest tutorial presupune poziție: relativă pentru elementul părinte. Dacă interfața dvs. utilizator se bazează pe un element absolut poziționat, atunci poate fi necesară și o anumită restructurare (marcare suplimentară) pentru a implementa un sfat util pe acel element.
Să mergem și să vedem ce se întâmplă.
Cele mai multe reguli CSS sunt scrise cu numele de clasă în minte, cum ar fi .acest lucru, dar CSS are o mână de tipuri selector. Instrumentele noastre magice vor folosi selectorii de atribute - adică notația de patrat pătrat:
[foo] fundal: rgba (0, 0, 0, 0,8); culoare: #fff;
Când browserul întâlnește ceva de genul:
Verifică!va ști că trebuie să aplice [Foo] reguli pentru că asta eticheta are un atribut numit foo. În acest caz, intervalul în sine ar avea un fundal negru translucid cu text alb.
Elementele HTML au diferite atribute încorporate, dar putem, de asemenea, să ne construim propriile noastre. Ca foo, sau tooltip. Implicit, HTML nu știe ce înseamnă asta, dar cu CSS putem spune HTML ce înseamnă asta.
Vom folosi selectori de atribute în primul rând pentru o separare a preocupărilor. Folosirea atributelor peste nume de clasă nu ne aduce puncte bonus în războaiele specifice; clasele și atributele au aceeași specificitate. Cu toate acestea, prin utilizarea atributelor putem păstra conținutul nostru cu conținutul, deoarece atributele HTML pot avea valori, în timp ce numerele de clasă nu sunt.
Luați în considerare numele de clasă .tooltip vs. atributul [Tooltip] în acest cod exemplu. Numele de clasă este una dintre valorile atributului [clasă] în timp ce atributul tooltip are o valoare, care este textul pe care dorim să-l afișăm.
lorem ipsum lorem ipsum
Instrucțiunile noastre vor utiliza două atribute diferite:
tooltip: aceasta ține conținutul tooltipului (un șir de text simplu)curgere: facultativ; acest lucru ne permite să controlam modul de expunere a instrumentului. Există multe destinații de plasare pe care le-am putea sprijini, dar vom acoperi patru destinații de plasare comune:Acum, să organizăm lucrările la sol pentru toate instrumentele. Regulile din pașii 1-5 se aplică tuturor instrucțiunilor indiferent de ce curgere le dăm. Pașii 6-7 au distincții între diferite curgere valorile.
Aceasta este pentru elementul părinte al instrumentului. Să atribuim o directivă de poziționare, astfel încât poziționarea absolută a părților componente ale instrumentului ( ::inainte de și ::după pseudo-elementele) sunt poziționate în contextul acestui element parental și nu în contextul paginii la mare sau al unui element bunic sau al unui alt element exterior în susul arborelui DOM.
[tooltip] poziție: relativă;
E timpul să primești pseudoelementele. Aici vom seta proprietăți comune pentru ambele ::inainte de și ::după bucăți. conţinut proprietatea este ceea ce face de fapt o lucrare pseudo-element, dar vom ajunge acolo curând.
[tooltip] :: înainte, [tooltip] :: după line-height: 1; user-select: none; pointer-events: nici unul; poziția: absolută; afișare: niciunul; opacitate: 0; / * opinii * / text-transform: nici unul; dimensiune font: .9em;
Nu știu de ce "dink" are sens, tocmai am spus întotdeauna asta. Aceasta este partea mică a triunghiului de vârf care dă instrumentele lor Bula de dialog simțiți prin a arăta ceea ce a invocat-o. Observați că folosim transparent pentru culoarea frontierei; vom adăuga culoarea mai târziu, așa cum o adăugăm depinde de tooltip-urile curgere.
[tooltip] :: înainte de content: "; z-index: 1001; frontieră: 5px solid transparent;
Nu este o greșeală ca conţinut:"; declarația are un șir gol pentru o valoare. Nu vrem nimic acolo, dar avem nevoie de acea proprietate pentru existența pseudo-elementului.
Pentru a face un triunghi, definim o graniță solidă cu o grosime pe o cutie goală (fără conținut) fără lățime și fără înălțime, și oferind doar o parte a cutiei o culoare de margine. Pentru mai multe detalii, consultați următorul tutorial:
Aici este carnea lucrurilor. Observați conținut: attr (tooltip) o parte spunând: "Acest pseudo-element ar trebui să folosească valoarea lui tooltip atributul ca conținutul său ". De aceea, utilizarea atributelor peste numele de clasă este atât de mare!
[tooltip] :: după content: attr (tooltip); / * magic! * / z-index: 1000; / * cea mai mare parte a restului este opinia * / font-family: Helvetica, sans-serif; text-align: centru; / * Permiteți conținutului să stabilească mărimea sfaturilor de instrucțiuni, dar acest lucru îi va împiedica, de asemenea, să nu fie obnoși * / min-width: 3em; max-lățime: 21cm; spațiu alb: acum; overflow: ascuns; depășirea textului: elipsă; / * proiectare vizibilă a buzelor tip tooltip * / padding: 1ch 1.5ch; raza de graniță: .3ch; box-shadow: 0 1em 2em-5.em rgba (0, 0, 0, 0.35); fundal: # 333; culoare: #fff;
Observați z-index valori atât pentru dink, cât și pentru bule. Acestea sunt valori arbitrare, dar rețineți că a z-index valoarea este relativă. Înseamnă: o valoare a indexului z de 1001 în interiorul unui element cu un indice z de 3 înseamnă doar că elementul 1001 va fi elementul de vârf interior acea z-index: 3 recipient.
Bubble-ul z-index ar trebui să fie cel puțin un pas în jos de la cine z-index. Dacă este la fel sau mai mare decât dink, puteți ajunge la un efect de colorare inconsistent pe dink dacă sfaturile dvs. de instrumente folosesc o box-shadow.
Pentru o privire mai detaliată asupra proprietății indexului z, aruncați o privire la următorul tutorial:
Instrucțiunile noastre sunt activate prin plasarea mouse-ului peste elementul cu ajutorul instrumentului ... Aproape.
[tooltip]: hover :: înainte, [tooltip]: hover :: după display: bloc;
Dacă te uiți înapoi la blocul nostru de stil din Pasul 2, ar trebui să vezi că ne-am folosit opacitate: 0; impreuna cu afișare: niciunul; pentru piesele noastre de ajutor. Am făcut acest lucru astfel încât să putem folosi efecte de animație CSS atunci când arată și ascund instrucțiunile.
afişa proprietatea nu poate fi animată, dar opacitate poate sa! Ne vom ocupa ultima dată cu animațiile. Dacă nu vă pasă de tooltips animate, doar ștergeți opacitate: 0; declarația de la Pasul 2 și ignorați animația din Pasul 7.
Ultimul lucru de care avem nevoie, care se aplică în continuare la toate instrumentele de lucru, este o modalitate de a suprima o sugestie dacă nu are conținut. Dacă sunteți populating tooltips cu un fel de sistem dinamic (Vue.js, Angular, sau React, PHP, etc) nu vrem bule prostie goale!
/ * nu afișați tooltips goale * / [tooltip = "] :: înainte, [tooltip ="] :: după display: none! important;
Acest pas poate fi destul de complicat deoarece vom folosi niște selectori care nu sunt atât de obișnuiți pentru a ajuta la sfaturile noastre de instrucțiuni cu destinațiile de plasare bazate pe curgere valorile (sau lipsa acestora).
"În Cercul-K se află lucruri ciudate." - Ted Theodore Logan
Înainte de a intra în stiluri, să aruncăm o privire la unele modele selective pe care le vom folosi.
[tooltip]: nu ([flow]) :: înainte, [tooltip] [flow ^ = "sus"] :: înainte de / * ... properties: values ... *
Acest lucru spune browserului: "Pentru toate elementele cu a tooltip atribut care fie nu face ia o curgere atribut sau să aibă curgere cu o valoare care incepe cu "sus": aplicați aceste stiluri ::inainte de pseudo-elementul „.
Folosim un model aici, astfel încât acestea să poată fi extinse la alte fluxuri fără a fi nevoie să repetați atât de mult CSS. Acest model flux ^ = „sus“ utilizează ^ = (începe cu) matcher. Acest lucru permite stilurilor să se aplice de asemenea up-dreapta și sus la stânga dacă doriți să adăugați acele comenzi de debit. Nu o să le acoperi pe cei de aici, dar le puteți vedea în uz pe demo-ul original al tooltip-ului pe CodePen.
Iată blocurile CSS pentru toate cele patru fluxuri acoperite de acest tutorial.
/ * NUMAI înainte de * / [tooltip]: nu ([flow]) :: înainte, [tooltip] [flow ^ = "sus"] :: înainte de bottom: 100%; frontieră-lățime de jos: 0; border-top-color: # 333; / * NUMAI după :: / * [tooltip]: nu ([flow]) :: după, [tooltip] [flux ^ = "sus"] :: după bottom: calc (100% + 5px); / * Ambele :: înainte și după :: / [tooltip]: nu ([flow]) :: înainte, [tooltip]: nu ([flow]) :: după, [tooltip] [flow ^ = "up "] :: înainte, [tooltip] [flux ^ =" sus "] :: după stânga: 50%; transformă: traduce (-50%, -5em);
[tooltip] [flow ^ = "jos]] :: înainte de top: 100%; frontieră-top-lățime: 0; border-bottom-color: # 333; [tooltip] [flux ^ = "în jos]] :: după top: calc (100% + 5px); [tooltip] [flow ^ = "jos]] :: înainte, [tooltip] [flow ^ =" jos]] :: după left: 50%; transforma: traduce (-50%, .5em);
[tooltip] [flow ^ = "left"] :: înainte de top: 50%; latime-dreapta: 0; border-left-color: # 333; stânga: calc (0 - 5px); transformați: traduceți (- .5em, -50%); [tooltip] [flux ^ = "stânga]] :: după top: 50%; dreapta: calc (100% + 5px); transformați: traduceți (- .5em, -50%);
[tooltip] [flow ^ = "right"] :: înainte de top: 50%; latimea frontală-stânga: 0; frontieră-dreapta-culoare: # 333; dreapta: calc (0em - 5px); transformă: traduce (.5em, -50%); [tooltip] [flux ^ = "dreapta"] :: după top: 50%; stânga: calc (100% + 5px); transformă: traduce (.5em, -50%);
Animațiile sunt uimitoare. Animațiile pot:
Sugestiile noastre vor fi incluse în ultima descriere. Mai degrabă decât să avem un bule de text pop și să ieșim dintr-o clipă, să le facem mai moale.
Vom avea nevoie de două @keyframe animații. Instrumentele de sus / jos vor folosi funcția ponturile-vert cadrele cheie și instrumentele de scriere stânga / dreapta vor folosi funcția ponturile-HORZ a cadrelor cheie. Observați că în ambele aceste cadre cheie definim doar starea de încheiere dorită a vârfurilor de instrumente. Nu trebuie să știm unde vin din (instrumentele au acele informații de stil). Vrem doar să controlam unde merg la.
@câmpuri-cheie pentru instrucțiuni-vert to opacity: .9; transformare: traduce (-50%, 0); @informații cheie-cheie-horz la opacity: .9; transformă: traduce (0, -50%);
Acum, trebuie să aplicăm aceste cadre cheie pe tooltip-uri atunci când un utilizator se deplasează peste elementele de declanșare (elementele cu [Tooltip] atribute). Deoarece folosim diferite fluxuri pentru a controla modul în care vor apărea instrumentele de lucru, trebuie să identificăm acele posibilități din stiluri.
[tooltip]: nu ([flow]): hover :: înainte, [tooltip]: nu ([flow]): hover :: before, [tooltip] tooltip] [flow ^ = "up"]: hover :: după, [tooltip] [flux ^ = "jos"]: animatie: tooltips-vert 300ms usurinta inainte; [tooltip] [flow ^ = "left"]: hover :: înainte, [tooltip] [flux ^ = "stânga"]: hover :: înainte, [tooltip] [flow ^ = "dreapta"]: hover :: după animație: tooltips-horz 300ms ușurință înainte;
Amintiți-vă că nu putem anima afişa proprietate, dar putem da un sfat de lucru un efect de estompare prin manipularea opacitate. De asemenea animăm transformarea proprietății care dă instrucțiunilor o mișcare subtilă, ca și cum ar fi zborând în punctul lor de declanșare.
Observați înainte cuvânt cheie în declarația de animație. Acest lucru spune ca animația să nu se reseteze odată ce termină, ci să meargă înainte și să rămână la sfârșit.
O treabă fantastică! Am acoperit mult în acest tutorial și acum avem o colecție elegantă de sfaturi pentru a vă arăta munca noastră grea:
Am zgâriat numai suprafața a ceea ce se poate face cu ajutorul instrumentelor CSS. Distreaza-te sa te joci cu ei si sa continui sa experimentezi si sa-ti pregatesti propriile retete!
