Si të krijoni një këshillë veglash në HTML? Si të bëni këshilla të thjeshta veglash në CSS3.

Nga autori: Përshëndetje. Një këshillë veglash është një tekst i vogël shpjegues që shfaqet kur kaloni pezull mbi një element, zakonisht një imazh. Sot do të shikojmë se si mund të bëni një këshillë veglash në HTML në mënyra të ndryshme.

Si parazgjedhje, atributi i titullit është përgjegjës për shfaqjen e tekstit shpjegues. Mund të përdoret për elementë të ndryshëm, por zakonisht përdoret vetëm për fotografi për të shpjeguar atë që ato tregojnë.

Në një nga artikujt e mëparshëm, përdora një imazh të një tigri për të treguar punën me madhësitë e fotografive. Nëse nuk ju shqetëson, do ta përdor përsëri këtë imazh. Pra, për të shfaqur një aluzion, thjesht duhet të shtoni atributin e titullit dhe të shkruani tekstin e dëshiruar në të.

Mund të ketë ose një fjalë ose disa fjali. Dhe kjo është se si duket:

Aludimi shfaqet pa probleme, jo menjëherë pas pezullimit, por pas njëfarë kohe. Kjo është sjellja e paracaktuar.

Problemi kryesor me një këshillë të tillë mjeti është se nuk mund të stilizohet. Si të zgjidhet ky problem? Ne do të duhet të japim një aluzion në mënyra të tjera. Tani do t'ju tregoj një çift.

Një mënyrë shumë interesante që ju lejon të shfaqni bukur një aluzion për një imazh. Shënimi HTML është i thjeshtë, vetëm imazhi duhet të mbyllet në një enë blloku, të cilit do t'i caktojmë një identifikues në mënyrë që të mund t'i referohemi më vonë në stile:

E vetmja gjë që mund të jetë e paqartë për ju këtu është atributi data-name. Puna është se ky është një atribut i ashtuquajtur i të dhënave që nuk bën asgjë më vete, por vlera e tij mund të përdoret në css dhe javascript, gjë që e bën atë të dobishëm në disa raste. Këtë do ta shihni më pas.

Pra, së pari, le të përshkruajmë stilet për kontejnerin. Ne kemi nevojë për pozicionim relativ sepse ne do të pozicionojmë absolutisht bllokun me tekst shpjegues në mënyrë që pozicionimi të ndodhë në lidhje me bllokun prind, dhe jo të gjithë faqen.

#tiger (pozicioni: relativ; ekrani: blloku i linjës; )

Shfaqja e linjës së bllokut do të parandalojë që blloku (dhe bashkë me të edhe blloku me udhëzuesin që do të krijojmë) të shtrihet në të gjithë gjerësinë e dritares. E tëra që mbetet është të krijohet vetë aludimi. Në CSS është shumë i përshtatshëm për ta bërë këtë duke përdorur pseudo-elemente. Si kjo:

#tiger:hover:after ( përmbajtja: attr(emri i të dhënave); pozicioni: absolut; majtas: 0; poshtë: 0; sfond: rgba(5,13,156,.55); ngjyra: #fff; rreshtimi i tekstit: në qendër ; font-familja: kursive; madhësia e shkronjave: 14 px; mbushja: 3 px 0; gjerësia: 100%; )

Ka shumë kode, por nuk ka asgjë të komplikuar këtu. Zgjedhësi #tiger:hover:after do të thotë si vijon: kur kalojmë pezull mbi një bllok me një imazh, duhet të krijojmë një pseudo-element pas (dhe më pas rregullat renditen në kllapa kaçurrelë). Vetia përmbajtje: attr(emri i të dhënave) përcakton vlerën e tekstit të bllokut. Do të jetë e barabartë me atë që është shkruar në atributin data-name të bllokut të mbështjellësit të imazhit.

Ky udhëzues veglash shfaqet kur kaloni pezull mbi imazhin, por ndryshe nga ai standard, ai e bën këtë befas dhe vetë pamja shfaqet menjëherë në momentin e pezullimit. Në këtë rast, nuk do të jetë e mundur të zbatohet një tranzicion i qetë, sepse tranzicionet e qetë nuk mbështeten për pseudo-elementet.

Sidoqoftë, duke rishkruar pak kodin, mund të arrini një pamje të qetë të këshillës së veglave dhe, përsëri, pa përdorur javascript.

Për të parë vetë 2 efektet që do t'ju tregoj më pas, ju rekomandoj të hapni Notepad ose ndonjë redaktues të përshtatshëm kodi dhe të përsërisni gjithçka pas meje. Vërtetë, për këtë ju ende duhet të përfshini një skedar stili, megjithëse stilet mund të shkruhen gjithashtu në html në etiketa

Pra, kodi për këtë shembull do të jetë pak më ndryshe, dhe kjo për shkak se ne nuk do të përdorim një element pseudo. Ishte për shkak të kësaj që ishte e pamundur të zbatoheshin ndryshime të qetë. Këtë herë kodi do të duket kështu:

Tigri sumatran

Kodi CSS nuk ka pësuar ndonjë ndryshim të madh:

#tiger2( pozicioni: relativ; shfaqja: blloku inline; ) #tiger2 .tekst ( tranzicioni: të gjitha 0.6s; opaciteti: 0; pozicioni: absolut; majtas: 0; fundi: 0; sfondi: rgba(5,13,156,. 55); ngjyra: #fff; rreshtimi i tekstit: në qendër; font-familja: kursive; madhësia e shkronjave: 14 px; mbushja: 3 px 0; gjerësia: 100%; transformimi: shkalla (0); ) #tiger2:hover .tekst (opaciteti: 1; )

Ne heqim vetëm pronën e përmbajtjes, pasi ajo mbështetet vetëm nga pseudo-elemente. Shtojmë vetinë e tranzicionit, e cila krijon tranzicione të qetë të gjendjes. Epo, opaciteti: 0 do t'i japë bllokut tonë të këshillave të veglave transparencë të plotë, kështu që nuk do të jetë i dukshëm në faqe.

Kur rri pezull mbi një bllok, tani mjafton të kthesh transparencën normale në bllok me një këshillë veglash. Gati. Mund të kontrolloni që elementi të shfaqet pa probleme.

Duke përdorur css3 ju mund të fshehni një element në një mënyrë tjetër. Përdorimi i transformimeve, për shembull. Zëvendësoni transparencën e plotë me këtë veti: transformimi: shkalla (0) dhe madhësia e bllokut do të reduktohet në zero, kështu që thjesht nuk do të jetë në ekran. Kur rri pezull mbi një bllok me një fotografi, duhet të ktheni madhësinë normale si kjo: transform: scale (1). Në këtë rast, efekti i pamjes do të duket edhe më i bukur. Këtë mund ta shihni vetë.

Siç mund ta shihni, në css këshilla e veglave gjithashtu mund të shfaqet ngadalë me efekte të bukura.

jQuery mund t'ju japë edhe më shumë mundësi. Duke përdorur këtë bibliotekë, ju mund të shkruani kod për të shfaqur një aluzion ose vetë ose të gjeni ndonjë shtojcë që tashmë e zbaton këtë.

Për shembull, korniza e Bootstrap ka gjithashtu shumë komponentë të gatshëm, dhe një prej tyre janë këshillat e veglave. Mund të kërkoni në dokumentacion kornizën për shembuj kodesh që ju lejojnë të krijoni të njëjtat sugjerime dhe t'i përdorni ato. Nuk është e nevojshme të lidhni të gjithë Bootstrap; në përgjithësi mund të lini vetëm një komponent të tillë si këshilla veglash, të shkarkoni dhe lidhni vetëm atë.

Në përgjithësi, sot ju tregova mënyra në CSS për të bërë një këshillë të bukur veglash me një pamje të mprehtë dhe të qetë; përveç kësaj, ju keni Bootstrap dhe jQuery në arsenalin tuaj. Zgjidhni çdo gjë dhe zbatoni këshilla interesante dhe të bukura në faqet tuaja!

Një këshillë veglash HTML është një bllok me informacion shtesë që shfaqet kur kaloni miun mbi një element specifik të një faqeje interneti. Sot ne do të krijojmë këshillën tonë të veglave duke përdorur HTML dhe CSS:

Shiko demonstrimin | Shkarkoni kodin burimor

Ne do të jemi në gjendje të përdorim sugjerime CSS për shumicën e elementeve si lidhjet, etiketat, teksti i stiluar, etj. Do të na duhet të aplikojmë disa klasa në element dhe të shtojmë një atribut të dhënash me tekstin e udhëzuesit.

Ne duhet të krijojmë një dokument HTML dhe të vendosim shënimin e burimit:

Demoja e këshillave të veglave // ​​përmbajtje

Unë kam shtuar një lidhje te Normalize.css e cila ndihmon në rivendosjen e të gjitha stileve të shfletuesit në parazgjedhje dhe siguron që çdo element të duket i njëjtë në të gjithë shfletuesit. Ndryshe nga një rivendosje standarde e CSS, Normalize.css nuk i heq të gjitha stilet e paracaktuara, kështu që nuk do t'ju duhet të rishkruani stilin e çdo elementi nga e para.

Unë kam krijuar një div me një klasë kontejneri në të cilën do të vendosim shembujt bazë të këshillave të veglave HTML. Këtu janë stilet për trupin dhe klasën .container:

trupi ( font-familja: "Work Sans", sans-serif; madhësia e shkronjave: 1.5em; lartësia e rreshtit: 1.4em; pesha e shkronjave: 700; ngjyra e sfondit: #28ABE3; ngjyra: #fff; ) .konteiner ( gjerësia: 800 pikselë; diferenca: 100 pikselë automatikisht; sfondi: gradient radial (rrethi i këndit më të largët në 400 pikselë 250 px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Kam vendosur në qendër ndarjen e kontejnerit duke vendosur margin-majtas dhe margin-djathtas në auto. Shtoi gjithashtu një stil në pjesën e trupit për ta bërë atë të duket më mirë.

Vendosa të shtoj një gradient të vogël CSS të lehtë për sfondin. Nëse shfletuesi nuk mbështet gradientët CSS (kjo vlen kryesisht për IE 8 dhe 9), ngjyra e sfondit do të kthehet në blunë e paracaktuar (ngjyra e sfondit të seksionit të trupit).

Unë do të përdor sugjerime për pezullimin e HTML me etiketat ankoruese, por ju mund t'u caktoni klasa elementëve të tjerë të linjës, si p.sh. një etiketë të fortë ose hapësirë. Më poshtë është përmbajtja e ndarjes së kontejnerit:

• Fundi i udhëzuesit
• Këshillë mjeti majtas

  I caktova dy klasa lidhjeve. Klasa e udhëzuesit do të jetë përgjegjëse për trupin e këshillës së veglave dhe klasa e dytë do të përcaktojë vendosjen e tij.

  Ju gjithashtu mund të shihni atributin e personalizuar të të dhënave, i cili përmban tekstin e këshillës sonë të veglave HTML.

  Krijimi i klasës së këshillës së veglave

  Më poshtë është kodi për klasën e këshillës së veglave:

  Këshillë e veglave ( pozicioni: relative; ) . këshillë e veglave: pas ( pozicioni: absolute; mbushje: 8 px; kufiri: 3 px solid #fff; rreze-kufi: 8 px; ngjyra e sfondit: #1FDA9A; madhësia e shkronjave: .9em; pesha e shkronjave : bold; ngjyra: #fff; përmbajtja: attr(data-tooltip); min-gjerësia: 80 px; /* gjerësia: -moz-max-content; */ /* gjerësia: -webkit-max-content; */ opacity : 0; tranzicion: të gjitha .2s lehtësi në dalje .25s; dukshmëri: e fshehur; z-indeksi: 2; ) .tooltip:Hover:after ( opacity: 1; dukshmëri: e dukshme; )

  Vetë këshilla e veglave hover HTML është një pseudo-element :after dhe pozicionohet absolutisht. Kjo është arsyeja pse është e nevojshme t'i caktohet një pozicion relativ elementit të ankorimit. Shtova disa stile bazë si mbushja, kufiri, madhësia e shkronjave dhe gjerësia. Le të hedhim një vështrim më të afërt në pronën e përmbajtjes.

  Ai përmban attr() - një vlerë që ruan këshillën tonë të personalizuar të të dhënave dhe e përdor atë për të shfaqur tekstin e vetë këshillës së veglave. Mund të përdorni çdo emër tjetër në vend të këshillës së veglave të të dhënave, vetëm sigurohuni që ai të fillojë me të dhënat- . Ju mund të mësoni më shumë rreth këtyre atributeve këtu.

  Trupi i majës së veglave ka një gjerësi minimale prej 80 pikselësh. Nëse dëshironi që përmbajtja e këshillës së veglave të shtrihet në një rresht, atëherë shtoni vlerën maksimale të përmbajtjes për veçorinë gjerësi, e cila aktualisht është komentuar. Duhet të theksohet se kjo është një veçori eksperimentale, kështu që duhet të përdorni prefikset e shitësit -webkit- dhe -moz- .

  Për t'i dhënë këshillës së mjetit hover HTML një efekt animimi të rrëshqitjes, ne përdorim veçorinë e tranzicionit. Vini re vlerën .25s, e cila specifikon vonesën përpara se të shfaqet ose të fshihet këshilla e veglave. Kështu, nuk do të shfaqet nëse kaloni gabimisht mbi tekst, por vetëm nëse qëndroni mbi tekst për një periudhë më të gjatë kohore. Gjithashtu vendosa opacitetin në 0 dhe dukshmërinë në të fshehur. Nuk mund të përdorim ekranin: asnjë; , sepse elementi do të zhduket plotësisht dhe nuk do të shohim asnjë efekt tranzicioni. Opaciteti dhe dukshmëria ndryshojnë kur rri pezull mbi një element me treguesin e miut.

  Rezultati:

  Shikoni

  Shënim: Kam ndryshuar/hequr disa nga shënimet dhe stilet në demo në CodePen. Për të parë rezultatin përfundimtar, shikoni demonstrimin në fund të këtij artikulli.

  Shtimi i lëvizjes

  Tani që kemi zbatuar këshillën e veglave HTML që shfaqet/zhduket në lëvizje, le ta bëjmë atë të lëvizë. Tashmë kemi caktuar veçorinë e animacionit, gjithçka që duhet të bëjmë është të vendosim pozicionin e fillimit nga duhet të shfaqet dhe pozicionin përfundimtar:

  /*Pozicioni fillestar i këshillës së veglave*/ .tooltip-lart:after (poshtë: 150%; majtas: 0;) .tooltip-bottom:after (lart: 155%; majtas: 0;) .tooltip-left:after (djathtas: 130%; min. gjerësi: 100 px; ) .tooltip-djathtas:after ( majtas: 130%; min-width: 100px; ) /*Pozicioni në fund të majës*/ .tooltip-lart:hover:after (poshtë: 120%; ) .tooltip-bottom:Hover:after (lart: 125%; ) .tooltip-left:Hover:after (djathtas: 110%; ) .tooltip-djathtas:Hover:after (majtas: 110%; )

  Vendosa ta shtoj këtë funksion në klasa shtesë. Pra, nëse caktoni, për shembull, klasën .tooltip-left, këshilla e veglave do të shfaqet në të majtë të tekstit, nëse shtoni .tooltip-top, këshilla e veglave do të shfaqet në krye, etj.

  Shiko demonstrimin

  Në këtë demonstrim unë jam duke përdorur klasën .tooltip-right. Ju mund të eksperimentoni dhe përdorni klasa të ndryshme për të përcaktuar pozicione të ndryshme të këshillave të veglave HTML.

  Krijimi i një trekëndëshi

  Elementi i fundit i këshillës së veglave është një trekëndësh i vogël në njërën anë të bllokut. Ne do ta krijojmë atë duke përdorur pseudo-klasën :before (pseudo-klasa :after është përdorur tashmë për vetë këshillën e veglave). Ne e caktojmë atë në katër klasat tona të pozicionit në mënyrë që për secilën prej tyre trekëndëshi të dalë në përputhje me rrethanat:

  /** * Trekëndëshat */ .tooltip-top:para, .tooltip-bottom:para, .tooltip-left:para, .tooltip-right:para (përmbajtja: ""; shfaqja: bllok; pozicioni: absolute; kufiri- gjerësia: 7 pikselë; stili i kufirit: i ngurtë; ngjyra e kufirit: rgba(0, 0, 0, 0); tejdukshmëria: 0; tranzicioni: të gjitha 0,2s lehtësi në dalje 0,25s; dukshmëri: e fshehur; ) .tip- lart:hover:para, .tooltip-bottom:Hover:para, .tooltip-left:Hover:fore, .tooltip-djathtas:Hover:para ( opacity: 1; dukshmëria: e dukshme; )

  Ne krijojmë një trekëndësh duke i dhënë një gjerësi kufirit kur vetë elementi nuk ka gjerësi ose lartësi. Në këtë rast, gjerësia e kornizës vendoset në 7 piksele. Ngjyra e kornizës është plotësisht transparente, gjë që është shumë e rëndësishme. Në pjesën e mëposhtme të kodit, unë caktoj një ngjyrë në anën përkatëse të kornizës, e cila më lejon të përcaktoj formën e trekëndëshit.

  Pjesa tjetër e stilimit duket e ngjashme me atë që bëmë për trupin e këshillës së veglave të pezullimit HTML. Kemi të njëjtat tranzicione, pozicioni është absolut, opaciteti është vendosur në 0 dhe dukshmëria është e fshehur:

  /*Pozicioni fillestar i trekëndëshit*/ .tooltip-top:fore (lart: -51%; majtas: 50%; transformimi: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :para (poshtë: -56%; majtas: 50%; transformimi: translateX(-50%); kufiri-poshtë-ngjyra: #fff; ) .tooltip-left:fore ( majtas: -31%; sipër: 15% ; border -left-color: #fff;) .tooltip-right:fore (djathtas: -31%; sipër: 15%; kufiri-djathtas-ngjyra: #fff; ) /* Pozicioni i fundit i trekëndëshit */ .tooltip -lart:hover :para ( lart: -21%; ) .tooltip-bottom:hover:fore (poshtë: -26%; ) .tooltip-left:hover:fore ( majtas: -11%; ) .tooltip-djathtas :hover:para (djathtas: -11%; )

  Për ta bërë trekëndëshin të lëvizë në të njëjtën mënyrë si këshilla e veglave, duhet të caktoni një pozicion fillimi dhe përfundimi.

  Gurutë e paraqitjes nuk ka gjasa të gjejnë ndonjë të re për veten e tyre në këtë postim. Ky postim është më shumë për dizajnerët fillestarë të paraqitjes, të cilët, si unë, kishin probleme me krijimin dhe stilimin e këshillave universale të veglave.

  Kohët e fundit, kur po bëja një blog të vogël, u përballa me detyrën për të bërë këshilla veglash me stil, por në të njëjtën kohë të thjeshtë. Pasi provova mënyra të ndryshme për të krijuar kontejnerë të veçantë div për këshilla veglash, ose duke krijuar këshilla veglash me CSS të pastër, gjeta një zgjidhje universale që nuk do të rrëmojë kodin, do të jetë e përputhshme me ndërshfletuesit dhe në të njëjtën kohë do të jetë shumë e thjeshtë për t'u zbatuar.
  Kushdo që është i interesuar për metodën time për të zgjidhur këtë problem të thjeshtë, e pyes nën mace.

  Zgjidhja Metoda që do t'ju ofroj është mjaft e thjeshtë dhe efektive. Punon në të gjithë shfletuesit, madje edhe IE 6 (testuar nga unë shumë herë). Lehtë për t'u ndryshuar dhe i përshtatshëm. Nuk e ngatërron kodin dhe e bën të qartë. Mund të ndryshohet lehtësisht për t'iu përshtatur nevojave tuaja. Për shembull, vononi shfaqjen e një këshille veglash duke përdorur setTimeout ose diçka tjetër. HTML Supozoni se kemi një faqe HTML me një lidhje, kur kalojmë pezull mbi të, duhet të shfaqim një këshillë veglash:
  Lidhja e këshillave të veglave
  Siç mund ta keni vënë re tashmë nga lista, unë jam duke përdorur paraprocesorin LESS css.
  Ne përfshimë stilet dhe skriptet CSS në skedarë të veçantë. Ne gjithashtu kemi një lidhje dhe një bllok div, i cili do të jetë kontejneri për këshillën e veglave.
  Specifikimi HTML5 lejon përdorimin e atributeve të personalizuara të tipit të atributit të të dhënave, të cilat mund të ruajnë disa informacione rreth një elementi ose blloku. Është në atributet e të dhënave që ne do të ruajmë tekstin e këshillave të veglave.
  Lidhje
  Për ruajtje përdor atributin data-tooltip.
  Kemi mbaruar me HTML - mund të kalojmë te stilet. CSS Unë përdor bibliotekën LESS Elements dhe ua rekomandoj të gjithëve, kështu që do të shkruaj disa veti duke përdorur këtë kornizë.
  @import "css/elements.less"; #tooltip ( z-indeksi: 9999; pozicioni: absolut; ekrani: asnjë; lart: 0 px; majtas: 0 px; sfondi-ngjyra: #000; mbushja: 5 px 10px 5px 10px; ngjyra: e bardhë; .opacity(0.5); . të rrumbullakosura (5 px);
  Nga lista është e qartë se në rreshtin e parë ne lidhim LE, vendosim bllokun div#tooltip në pozicionim absolut dhe e fshehim atë. Më pas i japim bllokut një ngjyrë sfondi dhe një ngjyrë teksti, rrumbullakosim këndet (5 px) dhe vendosim vlerën e transparencës në 50%. jQuery Tani vjen pjesa argëtuese - jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(funksion (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "lart" : eventObject.pageY + 5, "majtas" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "lart" : 0, "left" : 0 )); )); ));// Fund gati.
  Tani ne i shtojmë të gjithë elementët me atributin data-tooltip në përzgjedhje dhe, kur kalojmë pezull mbi elementin e dëshiruar me miun, marrim vlerën e këshillës së veglave dhe e ruajmë atë në një ndryshore. Më pas, shtojmë tekstin e këshillës në bllokun #tooltip, i japim koordinatat e kursorit nga buza e faqes + 5 px dhe në fund e shfaqim bllokun me këshillën e veglave në vendin e duhur. Pasi miu largohet nga elementi, ne fshehim bllokun #tooltip, pastrojmë përmbajtjen e tij dhe e kthejmë atë në 0;0;.

  Kjo eshte e gjitha!
  Si rezultat, do të marrim diçka të tillë: Demo

  Falë këtij skripti të thjeshtë, të gjithë elementët në faqe që kanë atributin data-tooltip do të marrin një këshillë veglash.

  Faleminderit per vemendjen!

  Këshillat e veglave janë një mënyrë e shkëlqyeshme për të shfaqur informacione shtesë thjesht duke e vendosur miun mbi tekst ose imazh. Ato mund të përdoren, për shembull, për të shfaqur emrat e fotografive, përshkrimet e lidhjeve ose çdo informacion tjetër që mund të jetë i dobishëm për përdoruesit e burimit tuaj. Dhe nuk ka nevojë të prishni shabllonin e dizajnit.

  Në këtë tutorial, ne do të shikojmë se si të krijojmë këshilla të thjeshta veglash duke përdorur HTML dhe CSS që do të shfaqin përmbajtjen e atributit të titullit të një lidhjeje.

  Lidhje me burimin e dobishëm

  Le të vendosim stilin bazë për klasën këshillë veglash:

  Këshillë e veglave (ekrani: inline; pozicioni: relative; )

  Tani këshilla e veglave do të shfaqet në një rresht me lidhjen duke përdorur pozicionimin relativ. Tani le të përcaktojmë qoshet e rrumbullakosura për bllokun e këshillës së veglave dhe ta vendosim atë në krye të lidhjes:

  Këshillë e veglave:hover:after( sfond: #333; sfond: rgba (0,0,0,.8); kufiri-radius: 5px; fund: 26px; ngjyra: #fff; përmbajtja: attr(titulli); majtas: 20 %; mbushje: 5 px 15 px; pozicioni: absolute; z-indeksi: 98; gjerësia: 220 px; )

  Ne përdorim pseudo-klasën :hover, e cila zgjedh një element kur miu qëndron mbi të, dhe pseudo-klasën :after, e cila shton përmbajtjen pas elementit të zgjedhur. Sfondi është vendosur në pjesërisht transparent, dhe për shfletuesit që nuk mbështesin formatin e ngjyrave RGBA, ne e vendosim ngjyrën e sfondit në gri.

  Qoshet e rrumbullakosura krijohen duke përdorur atributin kufi-rreze. Vendosni ngjyrën e tekstit në të bardhë. Së fundi, vendosim bllokun e këshillës së veglave dhe shtojmë mbushje.

  Përveç përcaktimit të stileve dhe pozicionimit, ne vendosim veçorinë e përmbajtjes:

  Përmbajtja: attr(titull);

  Kjo veti ju lejon të futni përmbajtje, e cila mund të jetë një varg ose një atribut elementi. Në këtë rast, ne përdorim atributin e titullit të lidhjes.

  Lidhje me burimin e dobishëm

  Për ta përfunduar, duhet të shtoni një shigjetë në fund të këshillës së veglave. Ne përdorim pseudo-klasën:para dhe stilet për kornizën:

  Këshillë e veglave: rri pezull: para (kufiri: i ngurtë; ngjyra e kufirit: #333 transparent; gjerësia e kufirit: 6 pikselë 6 pikselë 0 6 px; fundi: 20 px; përmbajtja: ""; majtas: 50%; pozicioni: absolute; indeksi z: 99 ;)

  Për të krijuar shigjetën, ne përdorëm trukun e kufirit: vendosni ngjyrën e kufirit të majtë dhe të djathtë në transparente dhe kontrolloni gjerësinë e kufirit. Shigjeta është gjithashtu e pozicionuar nën majë të veglës.

  Pershendetje te dashur miq. Një ditë tjetër, një nga klientët e mi m'u afrua me një kërkesë për të përmirësuar faqen e tij të internetit. Ose më mirë, bëni një formular të ri aplikimi në faqen e internetit, pasi forma e vjetër ka ndryshuar.

  Ai gjithashtu kërkoi të bashkëngjitni një udhëzues për secilën fushë të formularit. Ju ndoshta keni parë sugjerime të tilla: kur lëvizni kursorin e miut mbi një imazh ose një fjalë, shfaqet një këshillë veglash.

  Sigurisht, ka shumë mundësi për të zbatuar këshilla të tilla. Natyrisht, duke u fokusuar në minimizimin e ngarkesës në server, vendosa të bëj këshilla mjetesh duke përdorur HTML dhe CSS. Kjo është mjaft e thjeshtë dhe nuk e ngarkon fare serverin.

  Dhe lloji i një aluzion të tillë varet vetëm nga aftësia dhe imagjinata juaj. Në formën e klientit, e zbatova këtë si një imazh me një pikëpyetje pranë fushës së hyrjes, duke qëndruar pezull kursorin mbi të cilin shfaqet një këshillë veglash.

  Shembull i zbatimit të këshillës së veglave

  Si të krijoni një këshillë veglash

  Pra, i gjithë procesi do t'ju marrë jo më shumë se 5 minuta. Së pari ju duhet të vendosni se si do të duket objekti që tërheq vëmendjen. Do të thotë, mund të jetë një imazh. Kështu duket një këshillë e thjeshtë veglash, e krijuar duke përdorur stile CSS. Dhe e lidhur me imazhin. ose .

  Për të bashkangjitur një këshillë mjeti në një imazh, imazhi duhet së pari të ngarkohet dhe më pas të ngarkohet në faqen tuaj. Unë mendoj se nuk ka kuptim të ndalemi në këtë. Më pas, në vendin ku dëshironi të shfaqni këtë imazh dhe këshillën e veglave, përkatësisht, futni këtë kod:

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

  Nëse kjo është një fjalë ose frazë, atëherë duhet të futni këtë kod në vendin ku dëshironi të shfaqet aludimi.

  TEKSTI I KËSHILLËS SË FJALËS

  Tani ju duhet të futni stilet në fletën tuaj të stilit CSS, në shumicën e rasteve ky është skedari style.css.

  Hapni panelin administrativ WP - "Pamja" - "Redaktori" - "Fleta e stilit" dhe futni këto stile në fund.

  Ndihmë ( ngjyra: #2C8505; skica: asnjë; /*ngjyra e ndihmës*/ kursori: ndihmë; dekorimi i tekstit: asnjë; /*pamja e kursorit kur qëndron pezull, mund të zëvendësohet me treguesin*/ pozicioni: relative; /*pozicioni*/ ) /*tooltip position*/ .help span ( margin-left: -999em; position: absolute; ) /*hover tooltip*/ .help:hover span ( font-family: Verdana, Tahoma, Geneva, sans-serif ;/ *font*/ pozicioni: absolut; /*pozicioni*/ majtas: 10 px; lart: 25 px; z-indeksi: 99; margjina majtas: 0; gjerësia: 200 px; /*gjerësia e bllokut të këshillës së veglave*/ ) /*parametrat imazhe*/ .help:hover img ( kufiri: 0; ) /*blloku i këshillës së veglave*/ .airhelp ( sfondi: asnjë i përsëritur lëviz 0 0 rgba(97, 177, 255, 0.9); /*ngjyra e sfondit dhe transparenca*/ kufiri : 1px solid #2b82b8; /*parametrat e kufirit*/ rreze-kufi: 5px; /*këndet e rrumbullakosura*/ hije-kuti: 5px 5px rgba(0, 0, 0, 0.2); /*hija e kutisë*/ ngjyra : #fff; /*ngjyra e fontit të këshillës së veglave*/ mbushja: 5 px; /*mbushje*/ )

  Siç mund ta shihni, unë kam bërë këshilla për ju. Gjithçka që duhet të bëni është të bëni ndryshime që i përshtaten dizajnit tuaj dhe mund të shijoni këshillat e veglave. Dhe nëse vizitorët tuaj duhet të plotësojnë diçka, të regjistrohen në sit ose të kryejnë ndonjë veprim, atëherë thjesht keni nevojë për sugjerime. Dhe vizitorët tuaj do t'ju jenë shumë mirënjohës.