Üksikasjalik juhend puhta CSS-i vihjete tegemiseks

Töötasin hiljuti läbi lühikese õpetuse lihtsate näpunäidete loomiseks puhta CSS-i abil (ja ilma täiendava HTML-i elemendi või JavaScriptita). Hiljem kasutasin seda tehnikat oma projektis ja mõtlesin välja mõned nipid selle parendamiseks.

See artikkel on samm-sammuline õpetus, mis aitab teil neid CSS-i trikke mõista, et saaksite teha ka CSS-i vihjeid.

Selle postituse lõpuks teate, kuidas lisada elemendi jaoks nõuanne, lisades lihtsa atribuudi.

Probleem

Pidin oma projekti jaoks looma kohandatud tööriistavihje.

Alustasin Google'i abil CSS Tooltip Generatori leidmisega. Leidsin üsna mitu generaatorit. Nende lähenemisviis oli lisada absoluutpositsiooniga mõõteulatus elemendi sisse, mille jaoks soovite näpunäidet.

Kuid mul oli juba teisiti täielik projekt. Ma ei tahtnud kogu projekti vältel tagasi minna ja kõiki neid span elemente lisada. See võtab aega ja muudab minu HTML-i keerukamaks. Pidi olema parem viis.

Lõpuks leidsin YouTube'ist hämmastava õpetuse näpunäidete kohta. Nutikas trikk oli tööriistavihje loomine, kasutades CSS-i valijaid :: enne ja :: pärast. Videot saate vaadata siit.

See trikk on nutikas ja puhas, kuid see polnud piisavalt üldine.

Lahenduse parendamine

Selles osas teen selle triki üldisemaks ja saame teada mõne CSS-i atribuudi kohta. Lõppkokkuvõttes tahame, et oleks võimalik:

 klõpsake siin !! 

Mitte ainult seda, vaid tahame, et oleks võimalik tööriistavihje asukohta hõlpsalt täpsustada:

 klõpsake siin !! 

Esiteks - nagu videos mainitud -, lisame nupule enne ja pärast pseudo-elementi.

:: pärast ja :: enne on pseudoelemendid, mis võimaldavad teil CSS-i lehele sisu lisada enne või pärast elemendi sisu. Nad töötavad nii:

div :: pärast {
 sisu: “pärast”;
}
div :: enne {
 sisu: “enne”;
}

Tulemus näeb välja umbes selline:

 enne    pärast

Jalutame selle samm-sammult läbi

1. samm: lisame nõuande nagu näpunäide:

 klõpsake nuppu Mina !! 

Vajame :: pärast ja :: enne pseudoelemente. See on lihtne ristkülik tööriistavihje sisuga. Loome CSS-iga lihtsa ristküliku, lisades ääre sisu atribuudiga loodud tühja elemendi ümber.

Näpunäidete sisu kuvamiseks kasutatakse :: enne pseudo-elementi. Lisame selle koos vara sisuga ja ekstraheerime tööriistavihje atribuudi väärtuse. Sisu väärtuseks võib olla string, atribuudi väärtus elemendilt, nagu meie näide, või isegi pilt URL-iga (tee / image.png).

Selle töö tegemiseks peab nupu elemendi asukoht olema suhteline. Teisisõnu, kõigi elementide asukoht nupu sees on nupu elemendi enda asukoha suhtes.

Lisame ka mõned positsiooninipid, et muuta tööriistavihje teisendusomadusega keskele ja see on tulemus.

Siin on meie CSS:

2. samm: me lihtsalt mängime pseudoelementidega :: enne ja :: pärast, et luua näpunäide. Meie nupu HTML näeb välja selline:

 klõpsake siin !! 

Tööriistavihje positsioon võib olla: parem, vasak, ülemine või alumine.

3. samm: selles viimases etapis lisame tööriistavihjele hõlpsa hõljumise animatsiooni.

See CodePen näitab lõpptulemust (ja võite lõpliku koodi nägemiseks läbi klõpsata):

Kui olete Reaketiga tuttav, kontrollige Minu postitust:

Täname, et lugesite! Kui arvate, et teised inimesed peaksid seda lugema, vajutage nuppu,, piiksutage ja jagage postitust. Pidage kindlasti meeles, et jälgisite mind meediumil, et saaksite minu tulevastest postitustest märku.

Loe veel lugusid https://elazizi.com/