Cum se creează un tooltip în HTML? Cum să faci sfaturi simple în CSS3.

De la autor: Salut. Un balon explicativ este un mic text explicativ care apare atunci când treceți cu mouse-ul peste un element, de obicei o imagine. Astăzi ne vom uita la modul în care puteți crea un sfat explicativ în HTML în diferite moduri.

În mod implicit, atributul titlu este responsabil pentru afișarea textului explicativ. Poate fi folosit pentru diferite elemente, dar de obicei este folosit doar pentru imagini pentru a explica ceea ce arată acestea.

Într-unul dintre articolele anterioare, am folosit o imagine a unui tigru pentru a arăta lucrul cu dimensiunile imaginii. Dacă nu te superi, voi folosi această imagine din nou. Deci, pentru a afișa un indiciu, trebuie doar să adăugați atributul titlu și să scrieți textul dorit în el.

Pot exista fie un cuvânt, fie mai multe propoziții. Și așa arată:

Sugestia apare lin, nu imediat după plutirea, ci după ceva timp. Acesta este comportamentul implicit.

Principala problemă cu un astfel de sfat instrument este că nu poate fi stilizat. Cum se rezolvă această problemă? Va trebui să dăm un indiciu în alte moduri. Acum o să vă arăt câteva.

Un mod foarte interesant care vă permite să afișați frumos un indiciu pentru o imagine. Marcajul HTML este simplu, doar imaginea trebuie să fie închisă într-un container bloc, căruia îi vom atribui un identificator pentru ca ulterior să ne putem referi la el în stiluri:

Singurul lucru care vă poate fi neclar aici este atributul data-name. Chestia este că acesta este un așa-numit atribut de date care nu face nimic singur, dar valoarea sa poate fi folosită în css și javascript, ceea ce îl face util în unele cazuri. Veți vedea asta în continuare.

Deci, mai întâi, să descriem stilurile pentru container. Avem nevoie de poziționare relativă pentru că vom poziționa în mod absolut blocul cu text explicativ astfel încât poziționarea să aibă loc relativ la blocul părinte, și nu întreaga pagină.

#tiger( poziție: relativă; afișare: bloc inline; )

Afișarea liniei bloc va împiedica blocul (și odată cu acesta blocul cu sfatul instrument pe care îl vom crea) să se întindă pe toată lățimea ferestrei. Tot ce rămâne este să creați indiciu în sine. În CSS este foarte convenabil să faceți acest lucru folosind pseudo-elemente. Ca aceasta:

#tiger:hover:after (conținut: attr(nume date); poziție: absolut; stânga: 0; jos: 0; fundal: rgba(5,13,156,.55); culoare: #fff; text-align: center ; familie de fonturi: cursive; dimensiunea fontului: 14px; umplutură: 3px 0; lățime: 100%; )

Există mult cod, dar nu este nimic complicat aici. Selectorul #tiger:hover:after înseamnă următoarele: atunci când trecem cu mouse-ul peste un bloc cu o imagine, trebuie să creăm un pseudo-element după (și apoi regulile sunt listate în acolade). Proprietatea content: attr(data-name) setează valoarea textului blocului. Acesta va fi egal cu ceea ce este scris în atributul data-name al blocului de ambalare a imaginii.

Acest tooltip apare atunci când treceți cu mouse-ul peste imagine, dar, spre deosebire de cea standard, face acest lucru brusc, iar aspectul în sine apare imediat în momentul trecerii. În acest caz, nu va fi posibil să se implementeze o tranziție lină, deoarece tranzițiile netede nu sunt acceptate pentru pseudo-elemente.

Cu toate acestea, prin rescrierea codului destul de puțin, puteți obține un aspect neted al descrierii explicative și, din nou, fără a utiliza javascript.

Pentru a vedea singur cele 2 efecte pe care vi le voi arăta în continuare, vă recomand să deschideți Notepad sau orice editor de cod convenabil și să repetați totul după mine. Adevărat, pentru aceasta mai trebuie să includeți un fișier de stil, deși stilurile pot fi scrise și în html în etichete

Deci, codul pentru acest exemplu va fi puțin diferit și asta pentru că nu vom folosi un pseudo element. Din acest motiv, a fost imposibil să se aplice modificări netede. De data aceasta codul va arăta astfel:

tigrul de Sumatra

Codul CSS nu a suferit modificări majore:

#tiger2( poziție: relativă; afișare: bloc inline; ) #tiger2 .text ( tranziție: toate 0,6 s; opacitate: 0; poziție: absolut; stânga: 0; jos: 0; fundal: rgba(5,13,156,. 55); culoare: #fff; text-align: center; font-family: cursive; font-size: 14px; umplutură: 3px 0; lățime: 100%; transform: scale(0); ) #tiger2:hover .text (opacitate: 1; )

Înlăturăm doar proprietatea conținut, deoarece este suportată doar de pseudo-elemente. Adăugăm proprietatea de tranziție, care creează tranziții de stare lină. Ei bine, opacitatea: 0 va oferi blocului nostru de indicații transparență deplină, deci nu va fi vizibil pe pagină.

Când treceți cu mouse-ul peste un bloc, acum este suficient să returnați transparența normală în bloc cu un sfat explicativ. Gata. Puteți verifica dacă elementul apare fără probleme.

Folosind css3 puteți ascunde un element într-un alt mod. Folosind transformări, de exemplu. Înlocuiți transparența completă cu această proprietate: transform: scale(0) și dimensiunea blocului va fi redusă la zero, așa că pur și simplu nu va fi pe ecran. Când treceți cu mouse-ul peste un bloc cu o imagine, ar trebui să returnați dimensiunea normală astfel: transform: scale(1). În acest caz, efectul de aspect va arăta și mai frumos. Puteți vedea asta pentru dvs.

După cum puteți vedea, în css, tooltip poate apărea încet, cu efecte frumoase.

jQuery vă poate oferi și mai multe posibilități. Folosind această bibliotecă, puteți scrie cod pentru a afișa un indiciu fie dvs., fie să găsiți un plugin care implementează deja acest lucru.

De exemplu, cadrul Bootstrap are, de asemenea, multe componente gata făcute, iar una dintre ele este sfaturile instrumente. Puteți căuta în documentație cadru exemple de cod care vă permit să creați aceleași indicii și să le utilizați. Nu este necesar să conectați întregul Bootstrap; în general, puteți lăsa doar o astfel de componentă precum sfaturi de instrumente, descărcați și conectați numai asta.

În general, astăzi v-am arătat modalități în CSS de a crea un tooltip frumos, cu un aspect clar și neted; în plus, aveți Bootstrap și jQuery în arsenalul dvs. Alege orice și implementează sfaturi interesante și frumoase pe site-urile tale!

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.

Trebuie să creăm un document HTML și să setăm marcajul sursă:

Tooltips 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:

• Sfat 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.

  Puteți vedea, de asemenea, atributul de date personalizat, care conține textul descrierii noastre HTML.

  Crearea clasei tooltip

  Mai jos este codul pentru clasa tooltip:

  Indicator (poziție: relativ; ) .tooltip:după (poziția: absolut; umplutură: 8px; chenar: 3px solid #fff; chenar-rază: 8px; culoarea fundal: #1FDA9A; dimensiunea fontului: .9em; greutatea fontului : bold; culoare: #fff; conținut: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacitate : 0; tranziție: toate .2s ease-in-out .25s; vizibilitate: ascuns; z-index: 2; ) .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. Notaț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șcare

  Acum 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 cu instrumente*/ .tooltip-top:după ( jos: 150%; stânga: 0; ) .tooltip-bottom:după (sus: 155%; stânga: 0; ) .tooltip-left:după (dreapta: 130%; lățime minimă: 100px; ) .tooltip-right:după ( stânga: 130%; lățime minimă: 100px; ) /*Poziția finală a vârfului*/ .tooltip-top:hover:după ( 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 defini diferite poziții de indicații HTML.

  Crearea unui triunghi

  Ultimul 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- lățime: 7px; stil de bordură: solid; culoarea chenarului: rgba(0, 0, 0, 0); opacitate: 0; tranziție: toate .2s ease-in-out .25s; vizibilitate: ascuns; ) .tooltip- top:hover:before, .tooltip-bottom:hover: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 cadrului este setată la 7 pixeli. Culoarea cadrului este complet transparentă, ceea ce este foarte important. În următorul fragment de cod, atribui o culoare părții corespunzătoare a cadrului, ceea ce îmi permite să definesc forma triunghiului.

  Restul stilului arată asemănător cu ceea ce am făcut pentru corpul balonului HTML al cursorului. Avem aceleași tranziții, poziția este absolută, opacitatea este setată la 0 și vizibilitatea este ascunsă:

  /*Poziția de pornire a triunghiului*/ .tooltip-top:before (sus: -51%; stânga: 50%; transform: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :before ( jos: -56%; stânga: 50%; transform: translateX(-50%); border-bottom-color: #fff; ) .tooltip-left:before ( stânga: -31%; sus: 15% ; border -left-color: #fff; ) .tooltip-right:before (dreapta: -31%; sus: 15%; border-right-color: #fff; ) /* Poziția finală a triunghiului */ .tooltip -top:hover:înainte ( sus: -21%; ) .tooltip-bottom:hover:înainte ( jos: -26%; ) .tooltip-left:hover:before ( stânga: -11%; ) .tooltip-right :hover:inainte ( dreapta: -11%; )

  Pentru a face triunghiul să se miște în același mod ca indicația, trebuie să atribuiți o poziție de început și de sfârșit.

  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.
  Oricine este interesat de metoda mea de a rezolva această problemă simplă, întreb sub cat.

  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:
  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 framework.
  @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, rotunjim colțurile (5px) și setăm valoarea transparenței la 50%. jQuery Acum vine partea distractivă - jQuery.
  $.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(funcție () ( $("#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ă. Apoi, adăugăm textul indicii în blocul #tooltip, îi dăm coordonatele cursorului de la marginea paginii + 5 px și în final afișăm blocul cu tooltip î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 e tot!
  Ca rezultat, vom obține ceva de genul acesta: Demo

  Datorită acestui script simplu, toate elementele de pe pagină care au atributul data-tooltip vor primi un tooltip.

  Vă mulțumim pentru atenție!

  Sfaturile instrumente sunt o modalitate excelentă de a afișa informații suplimentare prin simpla trecere a mouse-ului peste text sau imagine. Ele pot fi folosite, de exemplu, pentru a afișa numele imaginilor, descrierile linkurilor sau orice alte informații care pot fi utile utilizatorului resursei dumneavoastră. Și nu este nevoie să spargeți șablonul de design.

  În acest tutorial, vom analiza cum să creați sfaturi simple folosind HTML și CSS, care vor afișa conținutul atributului titlu al unui link.

  Link către o resursă utilă

  Să setăm stilul de bază pentru clasă tooltip:

  Tooltip (afișare: în linie; poziție: relativă; )

  Acum, sfatul instrument va fi afișat pe o singură linie cu linkul folosind poziționarea relativă. Acum să definim colțuri rotunjite pentru blocul de indicații și să-l poziționăm deasupra linkului:

  Tooltip:hover:after( fundal: #333; fundal: rgba(0,0,0,.8); chenar-rază: 5px; jos: 26px; culoare: #fff; conținut: attr(titlu); stânga: 20 %; umplutură: 5px 15px; poziție: absolut; z-index: 98; lățime: 220px; )

  Folosim pseudoclasa :hover, care selectează un element atunci când mouse-ul trece peste el și pseudoclasa :after, care adaugă conținut după elementul selectat. Fundalul este setat parțial transparent, iar pentru browserele care nu acceptă formatul de culoare RGBA, setăm culoarea de fundal la gri.

  Colțurile rotunjite sunt create folosind atributul border-radius. Setați culoarea textului la alb. În cele din urmă, poziționăm blocul tooltip și adăugăm padding.

  Pe lângă definirea stilurilor și poziționării, setăm proprietatea conținutului:

  Conținut: attr(titlu);

  Această proprietate vă permite să inserați conținut, care poate fi un șir sau un atribut de element. În acest caz, folosim atributul title al link-ului.

  Link către o resursă utilă

  Pentru a finaliza, trebuie să adăugați o săgeată în partea de jos a balonului cu instrumente. Folosim pseudo-clasa:before și stiluri pentru cadru:

  Tooltip:hover:before( chenar: solid; culoarea chenarului: #333 transparent; lățimea chenarului: 6px 6px 0 6px; jos: 20px; conținut: ""; stânga: 50%; poziție: absolut; z-index: 99 ;)

  Pentru a crea săgeata, am folosit trucul pentru chenar: setați culoarea chenarului din stânga și din dreapta la transparent și controlați lățimea chenarului. Săgeata este, de asemenea, poziționată sub sfatul instrumentului.

  Bună, dragi prieteni. Zilele trecute, unul dintre clienții mei m-a abordat cu o solicitare de a-și îmbunătăți site-ul. Sau, mai degrabă, faceți un nou formular de cerere pe site, deoarece vechiul formular s-a schimbat.

  El a cerut, de asemenea, să atașeze un sfat pentru fiecare câmp de formular. Probabil că ați văzut astfel de indicii: atunci când mutați cursorul mouse-ului peste o imagine sau un cuvânt, apare un tooltip.

  Desigur, există o mulțime de opțiuni pentru a implementa astfel de sfaturi. Desigur, concentrându-mă pe minimizarea încărcării pe server, am decis să fac sfaturi cu ajutorul HTML și CSS. Acest lucru este destul de simplu și nu încarcă serverul deloc.

  Iar tipul unui astfel de indiciu depinde doar de priceperea și imaginația ta. În formularul de client, am implementat acest lucru ca o imagine cu un semn de întrebare lângă câmpul de introducere, trecând cursorul peste care apare un tooltip.

  Exemplu de implementare Tooltip

  Cum se creează un balon explicativ

  Deci, întregul proces nu vă va dura mai mult de 5 minute. Mai întâi trebuie să decideți cum va arăta obiectul care atrage atenția. Adică poate fi o imagine. Așa arată un tooltip simplu, creat folosind stiluri CSS. Și legat de imagine. sau .

  Pentru a atașa un sfat explicativ la o imagine, imaginea trebuie mai întâi să fie și apoi încărcată pe site-ul dvs. Cred că nu are rost să mă oprim pe asta. Apoi, în locul în care doriți să afișați această imagine și, respectiv, tooltip, introduceți acest cod:

  LINK IMAGINE " alt="hint" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ !}

  Dacă acesta este un cuvânt sau o expresie, atunci trebuie să inserați acest cod în locul în care doriți să fie afișat indiciu.

  TEXT TOOLFIL CUVINTE

  Acum trebuie să inserați stilurile în foaia de stil CSS, în majoritatea cazurilor acesta este fișierul style.css.

  Deschideți panoul administrativ WP - „Aspect” - „Editor” - „Foaie de stil” și inserați aceste stiluri la sfârșit.

  Ajutor (culoare: #2C8505; contur: niciunul; /*culoare de ajutor*/ cursor: ajutor; decor text: niciunul; /*aspectul cursorului când treceți cu mouse-ul, poate fi înlocuit cu indicatorul*/ poziție: relativă; /*poziție*/ ) /*tooltip position*/ .help span ( margin-left: -999em; position: absolute; ) /*hover tooltip*/ .help:hover span (familie de fonturi: Verdana, Tahoma, Geneva, sans-serif ; / *font*/ poziție: absolut; /*poziție*/ stânga: 10px; sus: 25px; z-index: 99; margin-left: 0; lățime: 200px; /*lățimea blocului tooltip*/ ) /*parametri imagini*/ .help:hover img ( chenar: 0; ) /*tooltip block*/ .airhelp ( fundal: niciunul repetă derulare 0 0 rgba(97, 177, 255, 0.9); /*culoarea fundalului și transparența*/ bordura : 1px solid #2b82b8; /*parametri de margine*/ raza-chenar: 5px; /*colțuri rotunjite*/ umbră casetă: 5px 5px 5px rgba(0, 0, 0, 0,2); /*umbră casetă*/ culoare : #fff; /*culoarea fontului indicativ*/ padding: 5px; /*padding*/ )

  După cum puteți vedea, ți-am făcut sfaturi. Tot ce trebuie să faceți este să faceți modificări pentru a se potrivi designului dvs. și vă puteți bucura de sfaturile instrumente. Și dacă vizitatorii tăi trebuie să completeze ceva, să se înregistreze pe site sau să efectueze o acțiune, atunci pur și simplu ai nevoie de indicii. Iar vizitatorii tăi îți vor fi foarte recunoscători.