Od avtorja: Zdravo. Opis orodja je majhno razlagalno besedilo, ki se prikaže, ko miškin kazalec premaknete nad element, običajno sliko. Danes si bomo ogledali, kako lahko na različne načine naredite opis orodja v HTML.

Standardni namig

Privzeto je atribut naslova odgovoren za prikaz razlagalnega besedila. Lahko se uporablja za različne elemente, vendar se običajno uporablja samo za slike, da pojasni, kaj prikazujejo.

V enem od prejšnjih člankov sem uporabil sliko tigra za prikaz dela z velikostmi slik. Če nimate nič proti, bom ponovno uporabil to sliko. Torej, če želite prikazati namig, morate le dodati atribut naslova in vanj napisati želeno besedilo.

< img src = "tiger.jpg" title = "To je tiger" >

Lahko je ena beseda ali več stavkov. In takole izgleda:

Namig se pojavi gladko, ne takoj po lebdenju, ampak čez nekaj časa. To je privzeto vedenje.

Glavna težava takšnega orodnega namiga je, da ga ni mogoče stilizirati. Kako rešiti ta problem? Morali bomo namigniti na druge načine. Zdaj vam bom pokazal par.

Čista metoda css

Zelo zanimiv način, ki vam omogoča, da lepo prikažete namig za sliko. Oznaka HTML je preprosta, samo sliko je treba zapreti v vsebnik bloka, ki mu bomo dodelili identifikator, da se bomo kasneje lahko sklicevali nanjo v slogih:

< div id = "tiger" data - name = "Sumatranski tiger"> < img src = "tiger.jpg" > < / div >

Edina stvar, ki vam tukaj morda ni jasna, je atribut imena podatkov. Dejstvo je, da je to tako imenovani podatkovni atribut, ki sam po sebi ne naredi ničesar, vendar je njegovo vrednost mogoče uporabiti v css in javascriptu, zaradi česar je v nekaterih primerih uporaben. To boste videli naslednjič.

Torej, najprej opišemo sloge za vsebnik. Potrebujemo relativno pozicioniranje, ker bomo absolutno pozicionirali blok z razlagalnim besedilom, tako da bo pozicioniranje potekalo glede na nadrejeni blok in ne na celotno stran.

#tiger(položaj: relativni; prikaz: inline-block; )

#tiger( položaj: relativni; prikaz: inline - blok;

Block-line display bo preprečil, da bi se blok (in s tem blok z orodnim tipom, ki ga bomo ustvarili) raztegnil čez celotno širino okna. Vse, kar ostane, je ustvariti sam namig. V CSS je to zelo priročno narediti z uporabo psevdoelementov. Všečkaj to:

#tiger:hover:after (vsebina: attr(ime-podatkov); položaj: absolutno; levo: 0; spodaj: 0; ozadje: rgba(5,13,156,.55); barva: #fff; poravnava besedila: sredina ; družina pisav: kurziv; velikost pisave: 14 slikovnih pik; oblazinjenje: 3 slikovnih pik 0; širina: 100 %; )

#tiger:hover:after ( vsebina: attr (podatek - ime); položaj: absolutno; levo: 0; spodaj: 0; ozadje: rgba(5, 13, 156, . 55); barva : #fff; poravnava besedila: sredina; družina pisav: kurziv; velikost pisave: 14px; oblazinjenje: 3px 0; širina: 100 %;

Kode je veliko, vendar tukaj ni nič zapletenega. Izbirnik #tiger:hover:after pomeni naslednje: ko miškin kazalec premaknemo nad blok s sliko, moramo ustvariti psevdoelement after (in takrat so pravila navedena v zavitih oklepajih). Lastnost content: attr(data-name) nastavi besedilno vrednost bloka. Enako bo tisto, kar je zapisano v atributu data-name bloka ovojnice slike.

Ta opis orodja se prikaže, ko miškin kazalec premaknete nad sliko, vendar za razliko od standardnega to stori nenadoma, sam pojav pa se pojavi takoj v trenutku premikanja kazalca. V tem primeru ne bo mogoče izvesti gladkega prehoda, ker gladki prehodi niso podprti za psevdoelemente.

Metoda 2. Čisti css in gladek videz

Vendar pa lahko s precejšnjim prepisovanjem kode dosežete gladek videz namiga orodja in spet brez uporabe javascripta.

Če želite sami videti 2 učinka, ki vam ju bom pokazal naslednjič, priporočam, da odprete beležnico ali kateri koli priročen urejevalnik kode in vse ponovite za mano. Res je, za to morate še vedno vključiti slogovno datoteko, čeprav lahko sloge zapišete tudi v html v oznakah

Vsebina namiga orodja je odstranjena iz pogleda z uporabo negativne lastnosti margin-left namesto display: none ali visibility: hidden, ker nekateri bralniki zaslona te lastnosti prezrejo.

Slogi CSS za opise orodij

Kmalu bomo poskrbeli, da bodo namigi za orodja delovali na enak način v različnih brskalnikih. Zdaj pa dodajmo nekaj vrstic kode CSS.

Z dodajanjem naslednjega dela kode bomo na zaslonu prikazali opise orodij, čeprav bodo videti banalni in jih bo težko vizualno ločiti od preostalega besedila.

CSS za prikaz orodnih namigov

.tooltip:razpon lebdenja (družina pisav: Calibri, Tahoma, Geneva, sans-serif; položaj: absolutno; levo: 1em; zgoraj: 2em; z-indeks: 99; rob-levo: 0; širina: 250px; ) . tooltip:hover img ( border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; ) .tooltip:hover em ( družina pisav: Candara, Tahoma, Geneva, sans-serif; velikost pisave : 1,2 em; teža pisave: krepko; zaslon: blok; oblazinjenje: 0,2 em 0 0,6 em 0; ) .classic ( oblazinjenje: 0,8 em 1 em; ) .custom ( oblazinjenje: 0,5 em 0,8 em 0,8 em 2 em; ) *html a:hover (ozadje: prozorno;)

Potreben je niz *html

Morda se sprašujete, zakaj je vključena zadnja vrstica zgornje kode? Nastavi prosojnost za ozadje povezave. Med preizkušanjem orodnih namigov sem odkril nenavaden učinek v IE6, ki ga ni bilo mogoče odstraniti, dokler je obstajalo ozadje povezave!

Zgornja koda zagotavlja funkcionalnost namigov orodij. Prikazani so na zaslonu, vendar jih je precej težko ločiti od splošnega besedila. Ni barvnih shem, zaradi katerih bi besedilo opisa orodja izstopalo na strani.

Nastavite barvno shemo za opise orodij/

Naslednja koda nastavi barvno shemo za vsakega od petih slogov orodnih namigov.

Ko spremenite kodo strani in jo posodobite v brskalniku, se bodo opisi orodij prikazali, ko premaknete miškin kazalec nad povezavo, skoraj enako v vseh brskalnikih.

Koda CSS za barvno shemo

.classic (ozadje: #FFFFAA; obroba: 1px polna #FFAD33; ) .critical (ozadje: #FFCCAA; obroba: 1px polna #FF3334; ) .help (ozadje: #9FDAEE; obroba: 1px polna #2BB0D7; ) .info ( ozadje: #9FDAEE; obroba: 1px polna #2BB0D7; ) .warning (ozadje: #FFFFAA; obroba: 1px polna #FFAD33; )

Koda CSS je zelo preprosta, vendar daje odličen videz opisom orodij in povsod opravlja svoje delo. Barvno shemo lahko spremenite po lastni presoji.

Nekaj ​​dotikov CSS3 za napreden prikaz orodnih namigov

Preden končamo to vadnico, bomo dodali nekaj vrstic kode CSS3 za dodajanje vizualnih učinkov našim opisom orodij. Nastavimo zaobljene vogale z lastnostjo border-radius in dodamo nekaj dimenzij z lastnostjo box-shadow.

Ker nobena od teh lastnosti ni podprta globalno, bodo delovale samo v nekaterih najnovejših različicah brskalnika. Kjer pa delujejo, bodo nasveti za orodja videti elegantni in seksi!

Dodajmo spodnjo kodo v selector.tooltip:hover span in osvežimo stran.

Vizualni učinki za obrobo, senco in prosojnost dvignejo namig orodja nad besedilo strani in naredijo informacije kontrastne in enostavne za branje.

Morda boste opazili, da se ne uporabljajo le uradne lastnosti CSS3, ampak tudi razširitve za Mozillo in WebKit.

Dodatne lastnosti CSS za nove brskalnike

polmer obrobe: 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);

Povzetek

Ta vadnica prikazuje, da izboljšanje vmesnika ne zahteva veliko truda. Poleg tega je vredno pregledati izkušnje z uporabo CSS, ki so lahko koristne pri postavljanju nove ravni interaktivnosti spletne aplikacije.