Cum se fac sfaturi cu instrumente CSS. Sfaturi instrumente la trecerea cursorului
Un tooltip HTML este un bloc cu informații suplimentare care apar atunci când treceți mouse-ul peste un anumit element al unei pagini web. Astăzi vom crea propriul nostru tooltip folosind HTML și CSS:
Vezi demo | Descărcați codul sursăVom putea folosi indicii CSS pentru majoritatea elementelor, cum ar fi linkuri, etichete, text cu stil etc. Va trebui să aplicăm mai multe clase elementului și să adăugăm un atribut de date cu textul descrierii.
Configurarea documentuluiTrebuie să creăm un document HTML și să setăm marcajul sursă:
Sfaturi instrumente Demo // conținut
Am adăugat un link către Normalize.css care ajută la resetarea tuturor stilurilor de browser la implicite și asigură că fiecare element arată la fel în toate browserele. Spre deosebire de o resetare CSS standard, Normalize.css nu elimină toate stilurile implicite, așa că nu va trebui să rescrieți stilul fiecărui element de la zero.
Am creat un div cu o clasă container în care vom plasa exemplele de bază de sfaturi HTML. Iată stilurile pentru corp și clasa .container:
body (familie de fonturi: „Work Sans”, sans-serif; dimensiunea fontului: 1.5em; înălțimea liniei: 1.4em; greutatea fontului: 700; culoarea fundalului: #28ABE3; culoarea: #fff; ) .container ( lățime: 800 px; margine: 100 px automat; fundal: radial-gradient (cercul cel mai îndepărtat colț la 400 px 250 px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )
Am centrat div-ul containerului setând margin-left și margin-right la auto . De asemenea, a adăugat ceva stil la secțiunea caroseriei pentru a-l face să arate mai bine.
Am decis să adaug un mic gradient CSS ușor pentru fundal. Dacă browserul nu acceptă gradienți CSS (acest lucru se aplică în principal la IE 8 și 9), culoarea de fundal va fi comutată înapoi la albastrul implicit (culoarea de fundal a secțiunii corpului).
Voi folosi sugestii HTML pentru trecerea cursorului cu etichete de ancorare, dar puteți atribui clase altor elemente inline, cum ar fi o etichetă puternică sau span . Mai jos este conținutul div-ului containerului:
- Desfășurare instrument de jos
- Indicator la stânga
Legăturile le-am atribuit două clase. Clasa tooltip va fi responsabilă pentru corpul tooltip, iar a doua clasă va determina plasarea acestuia.
De asemenea, puteți vedea atributul personalizat de date, care conține textul descrierii noastre HTML.
Crearea clasei tooltipMai jos este codul pentru clasa tooltip:
Indicator (poziție: relativ; ) .tooltip:după (poziția: absolut; umplutură: 8px; chenar: 3px solid #fff; raza chenar: 8px; culoarea fundal: #1FDA9A; dimensiunea fontului: .9em; greutatea fontului : bold; conținut: attr(data-tooltip: 80px width: -moz-max-content: .25; vizibilitate: ascuns .tooltip:hover:after (opacitate: 1; vizibilitate: vizibil; )
Însuși indicația HTML pentru trecerea cursorului este un pseudo-element :după și este poziționată absolut. Acesta este motivul pentru care este necesar să se atribuie o poziție relativă elementului de ancorare. Am adăugat câteva stiluri de bază, cum ar fi umplutură, chenar, dimensiunea fontului și lățimea. Să aruncăm o privire mai atentă asupra proprietății conținutului.
Conține attr() - o valoare care stochează datele noastre personalizate-tooltip și o folosește pentru a afișa textul tooltip în sine. Puteți folosi orice alt nume în loc de data-tooltip, asigurați-vă doar că începe cu data- . Puteți afla mai multe despre aceste atribute aici.
Corpul indicativului are o lățime minimă de 80 de pixeli. Dacă doriți ca conținutul descrierii explicative să se întindă într-o singură linie, adăugați valoarea maximă de conținut pentru proprietatea lățime, care este în prezent comentată. Trebuie remarcat faptul că aceasta este o caracteristică experimentală, așa că ar trebui să utilizați prefixele de furnizor -webkit- și -moz- .
Pentru a oferi sfatului explicativ de trecere cu mouse-ul HTML un efect de animație de diapozitiv, folosim proprietatea de tranziție. Rețineți valoarea .25s, care specifică întârzierea înainte ca balonul să fie afișat sau ascuns. Astfel, nu va fi afișat dacă treci cu mouse-ul peste text din greșeală, ci doar dacă treci peste text pentru o perioadă mai lungă de timp. De asemenea, am setat opacitatea la 0 și vizibilitatea la ascuns. Nu putem folosi display: none; , deoarece elementul va dispărea complet și nu vom vedea niciun efect de tranziție. Opacitatea și vizibilitatea se modifică atunci când treceți cu mouse-ul peste un element.
Rezultat:
Uite
Notă: am schimbat/eliminat o parte din marcajul și stilul din demonstrația de pe CodePen. Pentru a vedea rezultatul final, consultați demonstrația de la sfârșitul acestui articol.
Adăugarea de mișcareAcum că am implementat indicația HTML care apare/dispărește la trecerea cu mouse-ul, să-l facem să se miște. Am atribuit deja proprietatea animației, tot ce trebuie să facem este să setăm poziția de pornire de unde ar trebui să apară și poziția finală:
/*Poziția inițială a balonului indicativ*/ .tooltip-top:după ( jos: 150%; stânga: 0; ) .tooltip-bottom:după (sus: 155%; stânga: 0; ) .tooltip-left:după (dreapta: 130%; min-width: 100px ) .tooltip-right:after (stânga: 130%; min-width: 100px; ) /*Tip end position*/ .tooltip-top:hover:after (jos: 120%; ) .tooltip-bottom:hover:after (sus: 125%; ) .tooltip-left:hover:after (dreapta: 110%; ) .tooltip-right:hover:after (stânga: 110%; )
Am decis să adaug această funcționalitate la clase suplimentare. Deci, dacă atribuiți, de exemplu, clasa .tooltip-left , balonul cu instrumente va apărea în partea stângă a textului, dacă adăugați .tooltip-top , balonul cu instrumentele va apărea în partea de sus etc.
Vezi demonstrația
În această demonstrație, folosesc clasa .tooltip-right. Puteți experimenta și utiliza diferite clase pentru a seta diferite poziții HTML pentru indicații.
Crearea unui triunghiUltimul element al explicației este un mic triunghi pe o parte a blocului. O vom crea folosind pseudo-clasa :before (pseudo-clasa :after este deja folosită pentru sfatul cu instrumente). Îl atribuim celor patru clase de poziție, astfel încât pentru fiecare dintre ele triunghiul să fie scos în mod corespunzător:
/** * Triunghiuri */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before (conținut: ""; afișare: bloc; poziție: absolut; chenar- width: 7px; border-color: rgba(0, 0, 0, 0: all .2s ease-in-out .25s top:hover:before, .tooltip-bottom:before, .tooltip-); left:hover:before, .tooltip-right:hover:before ( opacitate: 1; vizibilitate: vizibil; )
Creăm un triunghi dând o lățime chenarului atunci când elementul în sine nu are lățime sau înălțime. În acest caz, lățimea marginii este setată la 7 pixeli. Culoarea cadrului este complet transparentă, ceea ce este foarte important. În următoarea bucată de cod, atribui o culoare părții corespunzătoare a cadrului, ceea ce îmi permite să definesc forma triunghiului.
Vlad Merjevici
HTML are deja un atribut de titlu global care poate fi adăugat oricărui element dintr-o pagină web. Prezența acestui atribut adaugă un sfat explicativ care apare atunci când treceți mouse-ul peste element. Fontul textului, dimensiunea tooltip și aspectul acestuia depind în general de sistemul de operare și nu pot fi modificate folosind stiluri. În plus, mulți dezvoltatori nu sunt fericiți că un astfel de indiciu dispare destul de repede. Acest lucru vă obligă să căutați modalități de a vă crea propriul sfat cu instrumente, care ar fi proiectat în modul dorit. Desigur, cea mai universală modalitate este, dar în unele cazuri este suficient să te descurci doar cu CSS.
De exemplu, am ales fotografii când treceți cursorul mouse-ului peste ele, se afișează numele fotografiei. Vom face textul în sine folosind proprietatea conținut și vom lua valoarea textului de la un anumit atribut prin attr() . Din păcate, conținutul nu va funcționa așa cum se dorește în combinație cu img , așa că fotografiile sunt inserate în element, la care adăugăm un atribut data-title cu text tooltip. Există o tentație de a introduce atributul titlu și de a-l folosi, dar în acest caz vor fi afișate simultan două sfaturi: unul este „nativ”, iar celălalt este al nostru. Deci folosim propriul atribut de titlu de date, deoarece HTML5 permite acest lucru. Astfel obținem următorul cod (exemplul 1).
Exemplul 1: cod HTML
HTML5 IE Cr Op Sa Fx
Balon explicativ în CSS
Să trecem la stilul descrierii noastre. Mai întâi trebuie să-l faci să apară. Pentru a face acest lucru, vom folosi pseudo-elementul ::after, la care adăugăm conținut: attr(data-title) .
Foto::after (conținut: attr(data-title); )
Se pare că după conținutul elementului cu clasa foto, va fi afișat textul din atributul data-title, ceea ce ne trebuia. Dar, din moment ce balonul ar trebui să apară doar când treceți cu mouse-ul peste fotografie cu cursorul mouse-ului, vom adăuga și pseudoclasa :hover.
Foto:hover::after (conținut: attr(data-title); )
Tot ce rămâne este să setați stilul dorit pentru sfatul nostru instrument, în special, poziția, culoarea de fundal, textul, cadrul etc. (exemplul 2).
Exemplul 2: stilul descrierii
HTML5 CSS3 IE Cr Op Sa Fx
Sfat explicativ în CSS .foto ( afișare: bloc inline; /* element de bloc inline */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează textul */ poziție: absolută /* Poziționare absolută */ stânga: 30% /* Poziție indicată: 1; : rgba( 255,255,230,0.9) /* Culoare de fundal semi-transparentă */ font-family: Arial, sans-serif /* Font font-size: 11px /* Tooltip text size: 5px; ; / chenar: 1px solid #333 /* Opțiuni de bord */ )
Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Tip tooltip
Poziția tooltip nu depinde de poziția cursorului, acesta apare în același loc când treceți cursorul peste imagine. Puteți face ca balonul să apară în partea de jos a fotografiei, astfel încât să nu acopere cea mai mare parte a imaginii. Stilul se va schimba ușor (exemplul 3).
Exemplul 3. Afișarea unui sfat explicativ în partea de jos a fotografiei
HTML5 CSS3 IE Cr Op Sa Fx
Sfat explicativ în CSS .foto ( afișare: bloc inline; /* element de bloc inline */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează textul */ poziția: absolută /* Poziționare absolută */ stânga: 5px /* Poziția indicației de bază */ z-index: 1; : rgba(0,42,167,0.6); /* Culoare de fundal semi-transparentă */ culoare: #fff; /* Text-align: center; -serif ; /* Font font */ font-size: 11px /* Tooltip text size */ padding: 5px 10px /* Margini: 1px solid #333;
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Tip tooltip
Din păcate, proprietatea de tranziție, pe care o puteți folosi pentru a anima indicația, nu funcționează cu pseudo-elemente. Prin urmare, va trebui să ne mulțumim cu apariția bruscă a balonului nostru. De asemenea, nu va exista niciun efect în browserul IE8 și mai devreme, această versiune nu acceptă ::după . Cu toate acestea, dacă înlocuiți acest pseudo-element cu :after , puteți obține o opțiune mai mult sau mai puțin funcțională.
Este puțin probabil ca specialiștii în aspect să găsească ceva nou pentru ei înșiși în această postare. Această postare este mai degrabă pentru designerii de layout începători care, ca mine, au avut probleme la crearea și stilul de sfaturi universale.
Recent, când făceam un blog mic, m-am confruntat cu sarcina de a face sfaturi cu instrumente elegante, dar în același timp simple. După ce am încercat diferite moduri de a crea containere div separate pentru tooltips, sau de a crea tooltips cu CSS pur, am găsit o soluție universală care nu va aglomera codul, va fi compatibilă între browsere și, în același timp, va fi foarte simplu de implementat.
Soluție Metoda pe care ți-o voi oferi este destul de simplă și eficientă. Funcționează în toate browserele, chiar și IE 6 (testat de mine de multe ori). Ușor de schimbat și convenabil. Nu aglomera codul și îl clarifică. Poate fi schimbat cu ușurință pentru a se potrivi nevoilor dumneavoastră. De exemplu, întârzieți afișarea unui balon explicativ folosind setTimeout sau altceva.HTML Să presupunem că avem o pagină HTML cu un link, atunci când trecem cu mouse-ul peste ea, trebuie să afișam un balon explicativ:
Oricine este interesat de metoda mea de a rezolva această problemă simplă, întreb sub cat.
Link pentru sfaturi instrumente
După cum poate ați observat deja din listă, folosesc preprocesorul LESS css.
Am inclus stiluri și scripturi CSS în fișiere separate. Avem, de asemenea, un link și un bloc div, care va fi containerul pentru sfatul instrument.
Specificația HTML5 permite utilizarea atributelor personalizate de tipul atribut de date, care pot stoca unele informații despre un element sau bloc. În atributele de date vom salva textul sfaturile instrumente.
Legătură
Pentru stocare folosesc atributul data-tooltip.
Am terminat cu HTML - putem trece la stiluri CSS. Folosesc biblioteca LESS Elements și o recomand tuturor, așa că voi scrie câteva proprietăți folosind acest cadru.
@import „css/elements.less”; #tooltip ( z-index: 9999; poziție: absolut; afișare: niciunul; sus:0px; stânga:0px; fundal-culoare: #000; umplutură: 5px 10px 5px 10px; culoare: alb; .opacity(0,5); . rotunjit(5px)
Din listare este clar că în prima linie conectăm LE, setăm blocul div#tooltip la poziționare absolută și îl ascundem. Apoi, dăm blocului o culoare de fundal și o culoare de text, facem colțurile rotunjite (5px) și setăm valoarea transparenței la 50%.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( „sus”: eventObject.pageY + 5, „stânga”: eventObject.pageX + 5 )) .show()).mouseout(function () ( $("#tooltip.); ").hide() .text("") .css(( "sus": 0, "stânga": 0 )); )); ));// Sfârșit gata.
Acum adăugăm toate elementele cu atributul data-tooltip la selecție și când trecem cu mouse-ul peste elementul dorit, obținem valoarea tooltip și o stocăm într-o variabilă. În continuare, adăugăm textul descrierii în blocul #tooltip, îi dăm coordonatele cursorului de la marginea paginii + 5 px și în final afișăm blocul cu indicația în locul potrivit. După ce mouse-ul părăsește elementul, ascundem blocul #tooltip, ștergem conținutul acestuia și îl întoarcem la 0;0;.Asta este!
Ca rezultat, vom obține ceva de genul acesta: DemoDatorită acestui script simplu, toate elementele de pe pagină care au atributul data-tooltip vor primi un tooltip.
Vă mulțumim pentru atenție!
Furnizarea de informații suplimentare despre elementele interfeței cu utilizatorul potențial complexe este o parte foarte importantă a muncii unui designer web în dezvoltarea unui site web ușor de utilizat și accesibil.
Un mecanism folosit în mod obișnuit pentru afișarea informațiilor suplimentare dincolo de ceea ce este vizibil pe pagină este sfaturile instrumente (elementele de design pentru afișarea indicii despre anumite elemente pe ecran).
Deși există multe soluții inovatoare care folosesc CSS și JavaScript (cu sau fără utilizarea unui cadru JavaScript precum jQuery), uneori este util să ne uităm la modul în care noile tehnologii zdruncină tehnicile de lungă durată.
Acest tutorial vă va arăta cum puteți face sfaturi uimitoare între browsere folosind doar CSS.
Sfaturile instrumente sunt minunate!
Oriunde aveți nevoie să explicați o abreviere sau un acronim, să explicați semnificația unui cuvânt sau să furnizați informații suplimentare despre ceva, sfaturile instrumente reprezintă o soluție simplă, dar eficientă.
De la micul bloc galben de text care apare deasupra unui element, cum ar fi o imagine și care afișează conținutul atributului titlu (sau al atributului alt dacă sunteți suficient de nefericit să utilizați Internet Explorer) până la soluții sofisticate bazate pe scripturi, folosind sfaturi cu instrumente, sfaturile instrumente sunt un instrument fantastic care pare să aibă puțină popularitate în comunitatea de design.
Creșterea impactului sfaturile instrumente
Majoritatea browserelor au stiluri implicite pentru sfaturi cu instrumente, deși nu arată foarte frumos.În timp ce standardele care evoluează rapid cu noi tehnici încep să fie din ce în ce mai bine susținute de noile browsere, creșterea CSS ne permite, de asemenea, să facem sfaturi cu instrumente (care servesc ca înlocuitor pentru setările implicite plictisitoare ale browserului, cum ar fi cel de mai sus) la un nou nivel de detaliu și design.
Dacă ați mai folosit soluții bazate pe jQuery, veți observa cu siguranță că JavaScript poate face o mulțime de lucruri pe care CSS nu le poate face (cum ar fi întârzierea ca balonul să dispară). Dar evidențierea și stilizarea se pot face cu CSS, care vă îmbunătățește designul și inspiră alte modele grozave care depășesc sfaturile instrumente.
Ce vom face
În acest tutorial vom face sfaturi folosind CSS pur.
Aceasta înseamnă că vor funcționa în browsere care nu acceptă CSS3 (cum ar fi Internet Explorer 8 și mai vechi) - nu vor arăta la fel de bine în ele ca în browserele mai noi.
Aspectul unor efecte cum ar fi culorile, fonturile, imaginile și cadrele tooltip va depinde de ceea ce este utilizat pe computerul utilizatorului final (browser, fonturi instalate sau contrastul monitorului).
Extensii CSS3Folosind extensii simple, dar eficiente, cum ar fi proprietățile de rază de margine și umbră de casetă, poate da unui dreptunghi simplu cu mesaj balon un aspect nou și frumos.
Ce e sub capota noastră?Să începem cu codul HTML pentru exemplul nostru.
diferite tipuri de sfaturiPentru a vă oferi suficiente idei pentru propriile proiecte, vom realiza cinci tipuri diferite de sfaturi.
Fiecare dintre ele arată foarte asemănător cu celelalte pentru a standardiza ieșirea afișajului. Dar puteți experimenta cu ele mai târziu pentru a le studia în detaliu și pentru a schimba aspectul.
Compatibilitate între browsere
Acest mecanism ar trebui să funcționeze în toate browserele, totuși, dacă aveți nevoie, îl puteți schimba după bunul plac.
Markup de bazăÎn codul de mai jos, folosim șablonul generic XHTML 1.0 cu un element obișnuit.
Deoarece folosim CSS pentru a construi elementele noastre, în scopuri de învățare, CSS este încorporat în document folosind .
De asemenea, puteți adăuga cod jQuery sau JavaScript pentru a îmbunătăți efectele și funcționalitatea, dacă doriți!
Sfaturi de marcare HTML Un exemplu de sfaturi cu instrumente realizate cu CSS!Treceți mouse-ul peste text pentru a vedea: indiciu clasic, mesaj critic
Post criticAcesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS!, ajutor 
AjutorAcesta este doar un exemplu despre cum să faci sfaturi cu instrumente folosind CSS!, informații 
InfoAcesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS! 
Avertisment: Acesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS!.
Acesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS!Codul folosește un element (nimic special asociat cu acesta) și paragrafe (
) pentru text care conține elemente de legătură (pentru care este setată clasa „tooltip”).
De ce este folosită o etichetă pentru sfaturi cu instrumente? ?Motivul pentru care folosim eticheta a mai degrabă decât abbr , dfn sau span este că IE6 are suport slab pentru pseudo-selectorul:hover pentru alte elemente decât un .
Dacă nu intenționați să acceptați IE6, puteți utiliza o altă etichetă.
Fiecare element span din exemplu este setat la clasa clasic (pentru un sfat explicativ obișnuit) sau personalizat (cu critici , ajutor , informații sau avertismente pentru a se potrivi cu schema de culori utilizată).
Această utilizare a stilului are, de asemenea, câteva bonusuri sub forma unui element em (care setează titlul balonului cu instrumente) și al unei imagini (care este folosită ca pictogramă în balonul cu instrumente; vă puteți folosi propriile imagini).
CSSAm scris codul HTML pentru pagină și este timpul să facem ca sfaturile instrumente să-și facă treaba.
Codul de mai jos, care este adăugat într-o secțiune a paginii, setează fiecare link care conține sfatul instrument la un stil mic și drăguț cu o linie de subliniere punctată (pentru a-l diferenția de un link obișnuit, care are o linie continuă de subliniere) și setează cursorul cu semn de întrebare (tot pentru diferențierea vizuală).
De asemenea, elimină sublinierea și setează culoarea (deci elementul arată mai puțin ca un link obișnuit).
A doua parte a codului ascunde pur și simplu indicația până când este nevoie.
Este foarte simplu!
Stiluri CSS pentru class.tooltip .tooltip ( chenar-jos: 1px punctat #000000; culoare: #000000; contur: niciunul; cursor: ajutor; text-decor: niciunul; poziție: relativ; ) .tooltip span (margine-stânga: -999em poziție: absolută)Conținutul balonului explicativ este eliminat din vizualizare prin utilizarea unei proprietăți negative margin-stânga, în loc de afișare: niciuna sau vizibilitate: ascunsă, deoarece unele cititoare de ecran ignoră aceste proprietăți.
Stiluri CSS pentru sfaturi cu instrumenteÎn curând, vom face ca sfaturile instrumente să funcționeze în același mod în diferite browsere. Acum să adăugăm câteva rânduri de cod CSS.
Adăugând următoarea bucată de cod, vom afișa indicații pe ecran, deși acestea vor părea banale și vor fi greu de separat vizual de restul textului.
CSS pentru afișarea tooltip .tooltip:hover span (familie de fonturi: Calibri, Tahoma, Geneva, sans-serif; poziție: absolut; stânga: 1em; sus: 2em; z-index: 99; margine-stânga: 0; lățime: 250px; .tooltip:hover img ( chenar: 0; margine: -10px 0 0 -55px; float: stânga; poziție: absolut; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif ; dimensiunea fontului: 1.2em; greutatea fontului: bold: 0.2em 0.6em 0 .classic (padding: 0.8em 1em; ) .custom (padding: 0.5em 0.8em; ) ( fundal: transparent; ) Linia necesară * htmlPoate vă întrebați de ce este inclusă ultima linie din codul de mai sus? Setează transparența pentru fundalul link-ului. În timp ce testam sfaturi cu instrumente, am descoperit un efect ciudat în IE6 care nu a putut fi eliminat atâta timp cât a existat fundalul link-ului!
Codul de mai sus asigură funcționalitatea tooltips-urilor. Sunt afișate pe ecran, dar sunt destul de greu de separat de textul general. Nu există scheme de culori care să scoată în evidență textul cu explicații pe pagină.
Setați schema de culori pentru sfaturi/Următorul cod stabilește o schemă de culori pentru fiecare dintre cele cinci stiluri de indicații.
După modificarea codului paginii și actualizarea acestuia în browser, vor apărea sfaturi cu instrumente când treceți cu mouse-ul peste link aproape la fel în toate browserele.
Cod CSS pentru schema de culori .clasic ( fundal: #FFFFAA; chenar: 1px solid #FFAD33; ) .critical ( fundal: #FFCCAA; chenar: 1px solid #FF3334; ) .help ( fundal: #9FDAEE; chenar: 1px solid # 2BB0D7; ) .info ( fundal: #9FDAEE; chenar: 1px solid #2BB0D7; ) .avertisment ( fundal: #FFFFAA; chenar: 1px solid #FFAD33; )Codul CSS este foarte simplu, dar oferă un aspect grozav balonurilor și își face treaba peste tot. Schema de culori poate fi schimbată la discreția dvs.
Câteva atingeri de CSS3 pentru afișarea avansată a balonului cu instrumenteÎnainte de a termina acest tutorial, vom adăuga câteva rânduri de cod CSS3 pentru a adăuga efecte vizuale la sfaturile noastre. Să setăm colțuri rotunjite folosind proprietatea border-radius și să adăugăm o dimensiune folosind proprietatea box-shadow.
Deoarece niciuna dintre aceste proprietăți nu este acceptată la nivel global, ele vor funcționa doar în unele dintre cele mai noi versiuni de browser. Dar acolo unde funcționează, sfaturile instrumente vor arăta elegant și sexy!
Să adăugăm codul de mai jos la intervalul selector.tooltip:hover și să reîmprospătăm pagina.
Efectele vizuale pentru chenar, umbră și transparență ridică sfatul instrument deasupra textului paginii și fac informațiile contrastante și ușor de citit.
Este posibil să observați că nu sunt folosite doar proprietățile oficiale CSS3, ci și extensii pentru Mozilla și WebKit.
Proprietăți CSS suplimentare pentru browsere noi border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
Relua
Acest tutorial demonstrează că îmbunătățirea interfeței nu necesită mult efort. În plus, merită să trecem în revistă experiența utilizării CSS, care poate fi utilă în stabilirea unui nou nivel de interactivitate pentru o aplicație web.
În acest articol vreau să discut mai multe opțiuni pentru organizarea unei astfel de caracteristici în orice aspect. Apropo, am deja un exemplu live al unei astfel de implementări pe site-ul meu. Dacă derulați în jos la comentariile de pe această pagină și treceți cu mouse-ul peste data comentariului, va deveni imediat clar exact ceea ce se spune. Ei bine, dacă încă nu există comentarii, puteți lăsa unul în același timp.
Văd două metode principale de implementare a unui tooltip, acesta este pe hover, care este și cel mai popular și mai puțin popular atunci când dați clic pe un element. Să începem în mod natural cu aspectul unui sfat explicativ atunci când treci cu mouse-ul peste un element.
În acest articol, m-am gândit să încep cu cel mai primitiv lucru, afișarea unui indiciu folosind title , care nu poate fi formatat în niciun fel, dar cred că îl puteți sări peste el, deoarece este deja clar. Dacă cele de mai sus nu vă sunt în totalitate clare, cred că după ce am studiat videoclipul despre, totul va deveni mult mai clar.
O modalitate simplă cu design, la hover.Nu este mai complicată decât metoda pe care am ratat-o. Numai în loc de atributul title voi folosi data-title și design folosind stiluri CSS. De fapt, dau mai jos codul html:
?
/* Folosim pseudo-elementul after pentru a proiecta bara în sine, dar în același timp o ascundem, deoarece ar trebui să apară doar la hover */ .hover:after (conținut: attr(data-title); display: none ;poziție: absolute: 130%: 0px padding: 5px 1px rgba; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) / * Adăugați o proprietate astfel încât atunci când treceți cu mouse-ul peste un element, să apară o casetă cu indicii */ .hover:hover:after(display: block;)
Aici aș dori să vă atrag atenția asupra faptului că acesta este doar un exemplu de proprietăți de design. Puteți proiecta în mod natural aspectul matriței după cum doriți.
Sfat instrument la trecerea cu mouse-ul.Acesta este probabil cel mai popular mod de a implementa această caracteristică. Cel puțin asta folosesc cel mai des.
?
acesta este un sfat de design
În acest exemplu, nu văd nimic special, ci mai mult, dar rezultatul va fi mai bun chiar și fără a utiliza atributul data-title. Containerul în acest caz servește ca un înveliș pentru elementele noastre care vor fi folosite pentru a implementa sfatul instrument. Și, de asemenea, matrița în sine va fi poziționată în raport cu containerul.
Aceste două opțiuni pot fi utilizate pe site-ul dvs. pentru a afișa un sfat explicativ atunci când treceți cursorul.
Mai sunt două metode, dar sunt aproape identice, cu excepția faptului că elementul va apărea atunci când dai clic pe un element care este întotdeauna afișat pe site.
O modalitate simplă cu înregistrare, prin clic.În cazul unui clic, codul va arăta exact la fel. Singurul lucru este că pentru comoditate am înlocuit clasa unor elemente. Pseudoclasa focus este, de asemenea, folosită în loc de hover . De asemenea, este de remarcat faptul că pentru ca această metodă să funcționeze, este necesar să o înlocuiți cu , adică cu un hyperlink.
?
Codul CSS în acest caz este similar cu aspectul unui bloc la hover, doar alte clase sunt folosite pentru comoditate. Și pentru o funcționare corectă, schimbăm pseudo-clasa în focus .
/* Folosim pseudo-clasa after pentru a proiecta spotul în sine, dar în același timp îl ascundem, deoarece ar trebui să apară numai când se dă clic */ .focus:after (conținut: attr(data-title); afișare: niciunul ; poziție: absolute: 130%: 0px-padding: 0,0,0,16; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) / * Adăugați o proprietate astfel încât atunci când faceți clic pe un element, să apară o casetă cu indicii */ .focus:focus:after(display: block;)
După cum puteți vedea, practic nu există nicio diferență.
Indicator la clic.Această metodă de clic va fi, de asemenea, mai relevantă dacă trebuie să formatați balonul cu instrumente puțin mai bine decât este posibil în opțiunea anterioară.
?
Și designul real al matriței:
/* setează poziționarea relativă la container */ .block(position:relative;) /* Proiectează elementul ascuns în mod implicit */ .hidden (afișare: niciunul; poziție: absolut; jos: 130%; stânga: 0px; fundal- culoare: # fff; text-align: 0 1px rgba (0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .focus + .hidden:before (conținut: " "); ; ; dreapta: 7px solid #fff-color: #fff transparent z-index: 2;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .focus + .hidden :after (conținut: " "; : absolute: 100% margine-stânga: 5px; chenar: 7px solid transparent; chenar-dreapta: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Aspectul unui element ascuns la clic */ .focus:focus + .hidden(afișare: bloc;)
După cum puteți vedea, nu este nimic complicat. În plus, puteți organiza schimbările de stare atât prin trecerea cu mouse-ul, cât și prin clic. Deși, ca să fiu sincer, nu pot spune cât de relevantă este metoda click-to-click.
Există, de asemenea, o imitație a ultimului exemplu folosind , dar utilizarea lui mi se pare că nu este în întregime corectă, în special pentru organizarea unui sfat explicativ pe site-ul dvs. web. Dacă nu sunteți puternic de acord cu mine, bine ați venit la comentarii.
Lecție video - Balon explicativ fără scripturi.Asta e tot pentru mine. Mult succes tuturor.
