No autora: Sveiki. Rīka padoms ir neliels paskaidrojošs teksts, kas tiek parādīts, virzot kursoru virs elementa, parasti attēla. Šodien mēs apskatīsim, kā dažādos veidos varat izveidot rīka padomu HTML valodā.

Standarta mājiens

Pēc noklusējuma atribūts virsraksts ir atbildīgs par paskaidrojoša teksta rādīšanu. To var izmantot dažādiem elementiem, bet parasti to izmanto tikai attēliem, lai izskaidrotu, ko tie parāda.

Vienā no iepriekšējiem rakstiem es izmantoju tīģera attēlu, lai parādītu darbu ar attēlu izmēriem. Ja jums nav iebildumu, es izmantošu šo attēlu vēlreiz. Tātad, lai parādītu mājienu, jums vienkārši jāpievieno nosaukuma atribūts un jāieraksta tajā vajadzīgais teksts.

< img src = "tiger.jpg" title = "Šis ir tīģeris" >

Var būt viens vārds vai vairāki teikumi. Un tas izskatās šādi:

Mājiens parādās gludi, nevis uzreiz pēc pavirzīšanas, bet pēc kāda laika. Šī ir noklusējuma darbība.

Galvenā šāda rīka padoma problēma ir tā, ka to nevar stilizēt. Kā atrisināt šo problēmu? Mums būs jādod mājiens citos veidos. Tagad es jums parādīšu pāris.

Tīra css metode

Ļoti interesants veids, kas ļauj skaisti parādīt attēla mājienu. HTML marķējums ir vienkāršs, tikai attēls ir jāievieto blokkonteinerā, kuram piešķirsim identifikatoru, lai vēlāk varētu atsaukties uz to stilos:

< div id = "tiger" data - name = "Sumatras tīģeris"> < img src = "tiger.jpg" > < / div >

Vienīgais, kas jums var būt neskaidrs, ir datu nosaukuma atribūts. Lieta ir tāda, ka tas ir tā sauktais datu atribūts, kas pats par sevi neko nedara, bet tā vērtību var izmantot css un javascript, kas dažos gadījumos padara to noderīgu. To jūs redzēsiet tālāk.

Tātad vispirms aprakstīsim konteinera stilus. Mums ir nepieciešama relatīvā pozicionēšana, jo mēs noteikti novietosim bloku ar paskaidrojošu tekstu tā, lai pozicionēšana notiktu attiecībā pret vecākbloku, nevis visu lapu.

#tiger( pozīcija: relatīvs; displejs: iekļauts bloks; )

#tīģeris( pozīcija: relatīvs; displejs: inline - bloks;

Bloka līnijas displejs neļaus blokam (un līdz ar to arī blokam ar rīka padomu, ko mēs izveidosim) izstiepties visā loga platumā. Atliek tikai izveidot pašu mājienu. CSS to ir ļoti ērti izdarīt, izmantojot pseidoelementus. Kā šis:

#tiger:hover:after ( saturs: attr(datu-nosaukums); pozīcija: absolūta; pa kreisi: 0; apakšā: 0; fons: rgba(5,13,156,.55); krāsa: #fff; teksta līdzinājums: centrā ; fontu saime: kursīvs; fonta izmērs: 14 pikseļi; polsterējums: 3 pikseļi 0; platums: 100%; )

#tiger:hover:after ( saturs: attr (dati - nosaukums); pozīcija: absolūta; pa kreisi: 0; apakšā: 0; fons: rgba(5, 13, 156, . 55); krāsa : #fff; teksts - līdzinājums: centrā; fontu saime: cursive; fonta izmērs: 14 pikseļi; polsterējums: 3 pikseļi 0; platums: 100%;

Koda ir daudz, taču šeit nav nekā sarežģīta. Atlasītājs #tiger:hover:after nozīmē: kad virzām kursoru virs bloka ar attēlu, mums ir jāizveido pseidoelements pēc (un tad noteikumi ir uzskaitīti cirtaini iekavās). Rekvizīts content: attr(data-name) nosaka bloka teksta vērtību. Tas būs vienāds ar to, kas rakstīts attēla iesaiņojuma bloka atribūtā data-name.

Šis rīka padoms tiek parādīts, virzot kursoru virs attēla, taču atšķirībā no standarta tas tiek darīts pēkšņi, un pats izskats parādās uzreiz virzīšanas brīdī. Šajā gadījumā nebūs iespējams īstenot vienmērīgu pāreju, jo pseidoelementiem vienmērīgas pārejas netiek atbalstītas.

2. metode. Tīrs css un gluds izskats

Tomēr, nedaudz pārrakstot kodu, varat panākt vienmērīgu rīka padoma izskatu un atkal neizmantojot JavaScript.

Lai paši pārliecinātos par 2 efektiem, kurus es jums parādīšu nākamreiz, iesaku atvērt Notepad vai jebkuru ērtu koda redaktoru un atkārtot visu pēc manis. Tiesa, šim nolūkam joprojām ir jāiekļauj stila fails, lai gan tagos stilus var rakstīt arī html

Rīka padoma saturs tiek noņemts no skata, izmantojot negatīvu piemales kreiso rekvizītu, nevis displejs: nav vai redzamība: paslēpts, jo daži ekrāna lasītāji ignorē šos rekvizītus.

CSS stili rīka padomiem

Drīzumā rīka padomi darbosies vienādi dažādās pārlūkprogrammās. Tagad pievienosim dažas CSS koda rindiņas.

Pievienojot šādu koda daļu, mēs ekrānā parādīsim rīka padomus, lai gan tie izskatīsies banāli un būs grūti vizuāli atdalāmi no pārējā teksta.

CSS rīka padoma parādīšanai

.tooltip:hover span ( fontu saime: Calibri, Tahoma, Geneva, sans-serif; pozīcija: absolūtā; pa kreisi: 1 em; augšā: 2 em; z-indekss: 99; margin-left: 0; platums: 250 pikseļi; ) . rīka padoms:hover img ( apmale: 0; piemale: -10px 0 0 -55px; peldēšana: pa kreisi; pozīcija: absolūta; ) .tooltip:hover em ( fontu saime: Candara, Tahoma, Geneva, sans-serif; fonta lielums : 1,2 em; fonta svars: treknrakstā; displejs: bloks; polsterējums: 0,2 em 0 0,6 em 0; ) .classic (polsterējums: 0,8 em 1 em; ) .pielāgots (polsterējums: 0,5 em 0,8 em 0,8 em 2 em; ) *html a:hover ( fons: caurspīdīgs; )

Nepieciešama *html virkne

Jums var rasties jautājums, kāpēc ir iekļauta pēdējā rindiņa iepriekš minētajā kodā? Tas nosaka saites fona caurspīdīgumu. Pārbaudot rīku padomus, es atklāju dīvainu efektu IE6, ko nevarēja noņemt, kamēr pastāvēja saites fons!

Iepriekš minētais kods nodrošina rīku padomu funkcionalitāti. Tie tiek parādīti ekrānā, taču tos ir diezgan grūti atdalīt no vispārējā teksta. Nav krāsu shēmu, kas lapā izceltu rīka padoma tekstu.

Iestatiet rīka padomu krāsu shēmu/

Šis kods iestata krāsu shēmu katram no pieciem rīka padomu stiliem.

Pēc lapas koda maiņas un atjaunināšanas pārlūkprogrammā, novietojot peles kursoru virs saites, tiks parādīti rīka padomi gandrīz vienādi visās pārlūkprogrammās.

CSS kods krāsu shēmai

.classic ( fons: #FFFFAA; apmale: 1px solid #FFAD33; ) .critical (fons: #FFCCAA; apmale: 1px solid #FF3334; ) .help ( fons: #9FDAEE; apmale: 1px solid #2BB0D7; ) .info ( fons: #9FDAEE; apmale: 1px solid #2BB0D7; ) .warning ( fons: #FFFFAA; apmale: 1px solid #FFAD33; )

CSS kods ir ļoti vienkāršs, taču tas sniedz lielisku izskatu rīka padomiem un veic savu darbu visur. Krāsu shēmu var mainīt pēc saviem ieskatiem.

Daži CSS3 pieskārieni uzlabotai rīka padomu parādīšanai

Pirms šīs apmācības pabeigšanas mēs pievienosim dažas CSS3 koda rindiņas, lai mūsu rīka padomiem pievienotu vizuālos efektus. Iestatīsim noapaļotus stūrus, izmantojot rekvizītu border-radius, un pievienosim kādu dimensiju, izmantojot rekvizītu box-shadow.

Tā kā neviens no šiem īpašumiem netiek atbalstīts globāli, tie darbosies tikai dažās jaunākajās pārlūkprogrammas versijās. Bet tur, kur viņi strādā, rīka padomi izskatīsies gludi un seksīgi!

Pievienosim tālāk esošo kodu Selector.tooltip:hover span un atsvaidzināsim lapu.

Vizuālie efekti apmalēm, ēnām un caurspīdīgumam paceliet rīka padomu virs lapas teksta un padariet informāciju kontrastējošu un viegli lasāmu.

Varat pamanīt, ka tiek izmantoti ne tikai oficiālie CSS3 rekvizīti, bet arī Mozilla un WebKit paplašinājumi.

Papildu CSS rekvizīti jaunām pārlūkprogrammām

apmales rādiuss: 5 pikseļi 5 pikseļi; -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);

Kopsavilkums

Šī apmācība parāda, ka saskarnes uzlabošana neprasa daudz pūļu. Turklāt ir vērts pārskatīt CSS lietošanas pieredzi, kas var noderēt, uzstādot jaunu tīmekļa lietojumprogrammas interaktivitātes līmeni.