Rīka padomi, kas pilnībā izveidoti uz CSS. Kā izveidot rīka padomu HTML? Css mājiens, novietojot kursoru
Maz ticams, ka izkārtojuma guru šajā amatā atradīs kaut ko jaunu sev. Šis ieraksts ir vairāk paredzēts iesācējiem izkārtojuma dizaineriem, kuriem, tāpat kā man, bija problēmas izveidot un veidot universālus rīka padomus.
Nesen, veidojot nelielu blogu, saskāros ar uzdevumu izveidot stilīgus, bet tajā pašā laikā vienkāršus rīku padomus. Izmēģinājis dažādus veidus, kā izveidot atsevišķus div konteinerus rīku padomiem vai izveidot rīku padomus ar tīru CSS, es atradu universālu risinājumu, kas nepārblīvēs kodu, būs saderīgs ar vairākām pārlūkprogrammām un tajā pašā laikā būs ļoti vienkārši ieviešams.
Ikvienam, kurš interesējas par manu metodi šīs vienkāršās problēmas risināšanai, es jautāju sadaļā cat.
Rīka padomu saite
Kā jūs, iespējams, jau pamanījāt no saraksta, es izmantoju LESS css priekšapstrādātāju.
Mēs iekļāvām CSS stilus un skriptus atsevišķos failos. Mums ir arī viena saite un div bloks, kas būs rīka padoma konteiners.
HTML5 specifikācija ļauj izmantot pielāgotus datu atribūta tipa atribūtus, kas var saglabāt informāciju par elementu vai bloku. Tieši datu atribūtos mēs saglabāsim rīka padomu tekstu.
Saite
Glabāšanai izmantoju atribūtu data-tooltip.
Esam pabeiguši ar HTML — varam pāriet uz CSS. Es izmantoju MEZ Elementu bibliotēku un iesaku to visiem, tāpēc es uzrakstīšu dažus rekvizītus, izmantojot šo ietvaru.
@importēt "css/elements.less"; #rīka padoms ( z-indekss: 9999; pozīcija: absolūta; displejs: nav; augšā: 0 pikseļi; pa kreisi: 0 pikseļi; fona krāsa: # 000; polsterējums: 5 pikseļi 10 pikseļi 5 pikseļi 10 pikseļi; krāsa: balta; .necaurredzamība (0,5); . noapaļots (5 pikseļi)
No saraksta ir skaidrs, ka pirmajā rindā mēs savienojam LE, iestatām div#tooltip bloku uz absolūto pozicionēšanu un slēpjam to. Tālāk mēs piešķiram blokam fona krāsu un teksta krāsu, padarām stūrus noapaļotus (5 pikseļi) un iestatām caurspīdīguma vērtību uz 50%. Tagad nāk jautrā daļa — jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "augšā" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show( )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "augšā" : 0, "pa kreisi" : 0 )); )); ));// Gatavs beigas.
Tagad atlasei pievienojam visus elementus ar atribūtu data-tooltip un, virzot kursoru virs vēlamā elementa ar peli, iegūstam rīka padoma vērtību un saglabājam to mainīgajā. Tālāk mēs pievienojam mājienu tekstu blokam #tooltip, piešķiram tam kursora koordinātas no lapas malas + 5 px un visbeidzot parāda bloku ar rīka padomu pareizajā vietā. Pēc tam, kad pele atstāj elementu, mēs paslēpjam #tooltip bloku, notīrām tā saturu un atgriežam to uz 0;0;.
Tas ir viss!
Rezultātā mēs iegūsim kaut ko līdzīgu: Demo
Pateicoties šim vienkāršajam skriptam, visi lapas elementi, kuriem ir datu rīka padoma atribūts, saņems rīka padomu.
Paldies par jūsu uzmanību!
HTML rīka padoms ir bloks ar papildu informāciju, kas tiek parādīts, virzot peles kursoru virs noteikta tīmekļa lapas elementa. Šodien mēs izveidosim savu rīka padomu, izmantojot HTML un CSS:
Skatīt demonstrāciju | Lejupielādēt pirmkoduCSS mājienus varēsim izmantot lielākajai daļai elementu, piemēram, saitēm, tagiem, stila tekstam utt. Mums būs jāpiemēro vairākas klases elementam un jāpievieno datu atribūts ar rīka padoma tekstu.
Dokumenta iestatīšanaMums ir jāizveido HTML dokuments un jāiestata avota marķējums:
Rīka padomi Demo // saturs
Esmu pievienojis saiti uz Normalize.css, kas palīdz atiestatīt visus pārlūkprogrammas stilus uz noklusējuma iestatījumiem un nodrošina, ka visi elementi visās pārlūkprogrammās izskatās vienādi. Atšķirībā no standarta CSS atiestatīšanas, Normalize.css nenoņem visus noklusējuma stilus, tāpēc jums nebūs jāpārraksta katra elementa stils no jauna.
Esmu izveidojis div ar konteinera klasi, kurā ievietosim HTML rīka padomu pamata piemērus. Tālāk ir norādīti pamatteksta un .container klases stili:
pamatteksts (fontu saime: "Work Sans", sans-serif; fonta izmērs: 1,5 em; līnijas augstums: 1,4 em; fonta svars: 700; fona krāsa: #28ABE3; krāsa: #fff; ) .container (platums: 800 pikseļi; piemale: 100 pikseļi automātiski; fons: radiāls gradients (aplis tālākajā stūrī 400 pikseļi 250 pikseļi, #64BBE0 0%, #28ABE3, #28ABE3 95%);)
Es centrēju konteineru div, iestatot margin-left un margin-right uz auto . Pievienots arī nedaudz stila virsbūves daļai, lai tā izskatītos labāk.
Es nolēmu fonam pievienot nelielu gaišu CSS gradientu. Ja pārlūkprogramma neatbalsta CSS gradientus (tas galvenokārt attiecas uz IE 8 un 9), fona krāsa tiks pārslēgta atpakaļ uz noklusējuma zilo krāsu (pamatdaļas fona krāsa).
Izmantojot enkura tagus, es izmantošu HTML virzīšanas ieteikumus, taču varat piešķirt klases citiem iekļautajiem elementiem, piemēram, spēcīgam tagam vai span . Tālāk ir norādīts konteinera div saturs:
- Rīka padoma apakšdaļa
- Rīka padoms pa kreisi
Es saitēm piešķīru divas klases. Rīka padoma klase būs atbildīga par rīka padoma pamattekstu, bet otrā klase noteiks tā izvietojumu.
Varat arī redzēt pielāgoto datu atribūtu, kas satur mūsu HTML rīka padoma tekstu.
Rīkpadomu klases izveideTālāk ir norādīts rīka padomu klases kods:
Rīka padoms ( pozīcija: relatīvs; ) .rīka padoms: pēc ( pozīcija: absolūts; polsterējums: 8 pikseļi; apmale: 3 pikseļi ciets #fff; apmales rādiuss: 8 pikseļi; fona krāsa: #1FDA9A; fonta izmērs: 0,9 em; fonta svars : trekns: #fff saturs: attr(data-width: 80px): -moz-max-content: 0.2s; redzamība: paslēpta; .tooltip:hover:after (necaurredzamība: 1; redzamība: redzama; )
Pats HTML kursora rīka padoms ir pseidoelements :after un ir novietots absolūti. Tāpēc enkura elementam ir jāpiešķir relatīva pozīcija. Es pievienoju dažus pamata stilus, piemēram, polsterējumu, apmali, fonta lielumu un platumu. Sīkāk apskatīsim satura īpašumu.
Tas satur attr() — vērtību, kas saglabā mūsu pielāgoto datu rīka padomu un izmanto to, lai parādītu paša rīka padoma tekstu. Datu rīka padoma vietā varat izmantot jebkuru citu nosaukumu, tikai pārliecinieties, ka tas sākas ar datu rīka padomu. Vairāk par šiem atribūtiem varat uzzināt šeit.
Rīka padoma korpusa minimālais platums ir 80 pikseļi. Ja vēlaties, lai rīka padoma saturs izstieptos vienā rindā, pievienojiet platuma rekvizīta maksimālo satura vērtību, kas pašlaik tiek komentēta. Jāņem vērā, ka šī ir eksperimentāla funkcija, tāpēc jums vajadzētu izmantot pārdevēja prefiksus -webkit- un -moz- .
Lai HTML kursora rīkpadomam piešķirtu slaidu animācijas efektu, mēs izmantojam pārejas rekvizītu. Ņemiet vērā vērtību .25s, kas norāda aizkavi, pirms tiek parādīts vai paslēpts rīka padoms. Tādējādi tas netiks parādīts, ja kļūdas dēļ virzīsit kursoru virs teksta, bet tikai tad, ja turēsit kursoru virs teksta ilgāku laiku. Es arī iestatīju necaurredzamību uz 0 un redzamību uz slēpto. Mēs nevaram izmantot displeju: neviens; , jo elements pilnībā pazudīs un mēs neredzēsim nekādus pārejas efektus. Necaurredzamība un redzamība mainās, virzot kursoru virs elementa ar peles rādītāju.
Rezultāts:
Skaties
Piezīme. Es mainīju/noņēmu dažus marķējumus un stilus CodePen demonstrācijā. Lai redzētu gala rezultātu, skatiet demonstrāciju šī raksta beigās.
Kustības pievienošanaTagad, kad esam ieviesuši HTML rīka padomu, kas parādās/pazūd, virzot kursoru, liksim tam pārvietoties. Mēs jau esam piešķīruši animācijas rekvizītu, viss, kas mums jādara, ir iestatīt sākuma pozīciju, no kuras tai vajadzētu parādīties, un beigu pozīciju:
/*Rīka padoma sākotnējā pozīcija*/ .tooltip-top:after (apakšā: 150%; pa kreisi: 0; ) .tooltip-bottom:after (augšā: 155%; pa kreisi: 0; ) .tooltip-left:after ( pa labi: 130%; min platums: 100 pikseļi ) .rīka padoms pa labi: pēc ( pa kreisi: 130%; min platums: 100 pikseļi; ) /*Tip end position*/ .tolt-top:hover:after ( apakšā: 120%; ) .tooltip-bottom:hover:after (augšā: 125%; ) .tooltip-left:hover:after (pa labi: 110%; ) .tooltip-right:hover:after (pa kreisi: 110%; )
Es nolēmu pievienot šo funkcionalitāti papildu klasēm. Tātad, ja piešķirat, piemēram, klasi .tooltip-left , rīka padoms parādīsies pa kreisi no teksta, ja pievienosiet .tooltip-top , rīka padoms parādīsies augšpusē utt.
Skatīt demonstrāciju
Šajā demonstrācijā es izmantoju .tooltip-right klasi. Varat eksperimentēt un izmantot dažādas klases, lai definētu dažādas HTML rīka padoma pozīcijas.
Trīsstūra izveidePēdējais rīka padoma elements ir mazs trīsstūris bloka vienā pusē. Mēs to izveidosim, izmantojot pseidoklasi :before (pseidoklase :after jau tiek izmantota pašam rīkpadomam). Mēs to piešķiram mūsu četrām pozīciju klasēm, lai katrai no tām attiecīgi tiktu izvadīts trīsstūris:
/** * Trijstūri */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( saturs: ""; displejs: bloks; pozīcija: absolūts; apmale- platums: 7px. apmales krāsa: rgba(0, 0, 0, 0) pāreja: visi .2s ease-in-out .25s top:hover:before, .tooltip-bottom:hover:before, .tooltip-; pa kreisi: kursoru: pirms, .tooltip-right:hover:before ( necaurredzamība: 1; redzamība: redzama; )
Mēs izveidojam trīsstūri, piešķirot apmalei platumu, kad pašam elementam nav platuma vai augstuma. Šajā gadījumā rāmja platums ir iestatīts uz 7 pikseļiem. Rāmja krāsa ir pilnīgi caurspīdīga, kas ir ļoti svarīgi. Nākamajā koda fragmentā es piešķiru krāsu atbilstošajai rāmja pusei, kas ļauj definēt trīsstūra formu.
Šajā apmācībā mēs sniegsim rīka padomu, virzot kursoru virs ikonas, izmantojot tīru CSS. Tieši to pašu principu var piemērot attēlam. Dodieties uz demonstrācijas lapu.
HTML marķējumsIzveidosim piecu vienumu sarakstu. Katra vienuma iekšpusē ievietosim i tagu ar vēlamo ikonu, vienkārši nokopējot konkrētas ikonas kodu no Font Awesome vietnes.
Zem ikonas taga mēs ierakstīsim span tagu ar atbilstošo īso mājienu tekstu.
Ērti numuriņi
Kredītkartes
Duša istabā
Brokastis iekļautas
Mājdzīvnieki OK
Pēc tam savienojam stila failu - style.css. Mainiet ikonu pozīciju no vertikālas uz horizontālu.
Lai to izdarītu, vecāku konteineram piešķiram vērtību - flex.
Ul(
displejs: flex;
}Mēs krāsojam fonu zem ikonām un pašu ikonu krāsu.
Ulli (
fons: #cecfcf;
krāsa: #fff;
}Ikonas lielums tiek iestatīts, izmantojot fonta lielumu.
Ulli (
fonta izmērs: 40 pikseļi;
}Ikonu rindas izskats jau ir izveidots.
Novietojot kursoru virs ikonas, mainās ikonas krāsa un kursora izskats.
Ul li:hover (
Rīka padoms
krāsa: #03a9f4;
kursors: rādītājs;
}Novietojot kursoru virs ikonas, HTML iezīmējumā tiks parādīts teksta rīka padoms. Šis ir teksts span tagā. Novietosim mājienus virs ikonām.
Ulli span (
pozīcija: absolūta;
augšpusē: -30 pikseļi;
pa kreisi: 50%;
pārveidot: translateX(-50%) translateY(-20px);
}Iestatīsim lodziņu izmērus uz tālāk norādītajiem fiksētajiem izmēriem.
Ulli span (
platums: 120 pikseļi;
augstums: 24 pikseļi;
}Izlīdzina tekstu centrā vertikāli un horizontāli.
Ulli span (
līnijas augstums: 24 pikseļi;
teksta līdzināšana: centrs;
}Fona krāsa, teksta krāsa un teksta lielums.
Ulli span (
fons: #03a9f4;
krāsa: #fff;
fonta izmērs: 14 pikseļi;
}Noapaļojiet stūrus par 4 pikseļiem un veiciet vienmērīgu pāreju, virzot kursoru.
Ulli span (
apmales rādiuss: 4 pikseļi;
pāreja: .5s;
}
Rīka padoms ir padarīts neredzams un caurspīdīgs.
Ulli span (
Pseidoelements::pirms
necaurredzamība: 0;
redzamība: slēpta;
}Lai zem bloka uzzīmētu nelielu bultiņu, mēs izmantosim pseidoelementu ::before, kas praksē nozīmē, ka bultiņa faktiski neatrodas HTML failā (tukšs saturs ), bet pastāv tikai CSS failā. Bultiņa, kas norāda uz ikonu, ir tikai 10 x 10 pikseļu kvadrātveida forma, kas pagriezta par 45 grādiem un nospiesta pret laiduma bloku ar negatīvu vērtību. Rezultātā kvadrāts tiek pārveidots par trīsstūri un atrodas uz slāņa, kas ir zemāks par z indeksu: -1 nekā tā vecākvērtības tags.
Vlads Merževičs
HTML jau ir globāls nosaukuma atribūts, ko var pievienot jebkuram tīmekļa lapas elementam. Šī atribūta klātbūtne pievieno rīka padomu, kas tiek parādīts, novietojot peles kursoru virs elementa. Teksta fonts, rīka padoma lielums un izskats parasti ir atkarīgi no operētājsistēmas, un tos nevar mainīt, izmantojot stilus. Turklāt daudzi izstrādātāji nav apmierināti, ka šāds mājiens diezgan ātri pazūd. Tas liek jums meklēt veidus, kā izveidot savu rīka padomu, kas būtu izveidots vēlamajā veidā. Protams, universālākais veids ir, taču dažos gadījumos ar to pilnīgi pietiek, lai iztiktu tikai ar CSS.
Piemēram, es izvēlējos fotogrāfijas, kad novietojat peles kursoru virs tām, tiek parādīts fotoattēla nosaukums. Mēs veiksim teksta izvadi, izmantojot satura rekvizītu, un ņemsim teksta vērtību no kāda atribūta, izmantojot attr() . Diemžēl saturs nedarbosies kā vēlams kombinācijā ar img , tāpēc fotogrāfijas tiek ievietotas elementā, kuram pievienojam atribūtu data-title ar rīka padoma tekstu. Pastāv kārdinājums ievietot nosaukuma atribūtu un to izmantot, taču šajā gadījumā vienlaikus tiks parādīti divi rīka padomi: viens ir “native”, bet otrs ir mūsu. Tāpēc mēs izmantojam savu datu nosaukuma atribūtu, jo HTML5 to pieļauj. Tādējādi mēs iegūstam šādu kodu (1. piemērs).
1. piemērs: HTML kods
HTML5 IE Cr Op Sa Fx
Rīka padoms CSS
Pāriesim pie mūsu rīka padoma stila. Vispirms jums ir nepieciešams, lai tas vispār parādās. Lai to izdarītu, izmantosim pseidoelementu ::after, kuram pievienosim saturu: attr(data-title) .
Foto::pēc ( saturs: attr(data-title); )
Izrādās, ka pēc elementa satura ar foto klasi tiks parādīts teksts no atribūta data-title, kas mums bija vajadzīgs. Taču, tā kā rīka padoms ir jāparādās tikai tad, kad virzāt kursoru virs fotoattēla ar peles kursoru, mēs pievienosim arī :hover pseidoklasi.
Photo:hover::after ( saturs: attr(data-title); )
Atliek tikai iestatīt vēlamo mūsu rīka padoma stilu, jo īpaši pozīciju, fona krāsu, tekstu, rāmi utt. (2. piemērs).
2. piemērs. Rīka padoma stils
HTML5 CSS3 IE Cr Op Sa Fx
Rīka padoms CSS .photo ( displejs: inline-block; /* Iekļauts bloka elements */ pozīcija: relatīvs; /* Relatīvā pozicionēšana */ ) .photo:hover::after ( saturs: attr(data-title); / * Parādīt tekstu */ pozīcija: absolūtā pozicionēšana */ pa kreisi: 20% /* Rīka padoma pozīcija: 1 /* Parādīt rīka padomu virs citiem elementiem; : rgba( 255,255,230,0,9); / apmale: 1px solid #333 /* Border options */ )
Šī piemēra rezultāts ir parādīts attēlā. 1.
Rīsi. 1. Rīka padoma veids
Rīka padoma pozīcija nav atkarīga no kursora pozīcijas, tas parādās tajā pašā vietā, kad virzāt kursoru virs attēla. Varat iestatīt, lai rīka padoms tiktu parādīts fotoattēla apakšā, lai tas neaizsegtu lielāko attēla daļu. Stils nedaudz mainīsies (3. piemērs).
3. piemērs. Rīka padoma parādīšana fotoattēla apakšā
HTML5 CSS3 IE Cr Op Sa Fx
Rīka padoms CSS .photo ( displejs: inline-block; /* Iekļauts bloka elements */ pozīcija: relatīvs; /* Relatīvā pozicionēšana */ ) .photo:hover::after ( saturs: attr(data-title); / * Parādīt tekstu */ pozīcija: absolūtā pozicionēšana */ pa kreisi: 0 pikseļi /* Rīka padoma atrašanās vieta: 1. */ fons; : rgba(0,42,167,0.6); /* Daļēji caurspīdīga fona krāsa */ krāsa: #fff */ text-align: center */ font-family: Arial, sans -serif ; /* Font-size: 11px /* Rīka padoma teksta izmērs: 5px 10px /* Margins: 1px solid #333;
Šī piemēra rezultāts ir parādīts attēlā. 2.
Rīsi. 2. Rīka padoma veids
Diemžēl pārejas rekvizīts, ko varat izmantot, lai animētu rīka padomu, nedarbojas ar pseidoelementiem. Tāpēc mums būs jāapmierinās ar mūsu rīka padoma pēkšņo parādīšanos. Arī pārlūkprogrammā IE8 un vecākām versijām nebūs nekādas ietekmes, šī versija neatbalsta ::after . Tomēr, ja šo pseidoelementu aizstājat ar :after, jūs varat iegūt vairāk vai mazāk funkcionējošu opciju.
